Hello, I am completely new in Web-Design. I have read some of the site point book in order to learn.
Now I am here to annoy you, I am going to ask a lot of question about my problems while creating web pages with my own ideas. Let me ask the very simple question first:
When I am trying to positiong any div or any HTML5 element with “position: absolute”, the background color disapperas immediately. If I use the float, the same thing happens.
I don’t understand, the parent element has been given a white background, then if I position any of the child elements with “position” attribute, then why the white background disappears. My code is something like this (but not the actual code, I will send the actual page if necessary)
div#container {
width: 80%;
margin: 0 auto;
height: 900px; /* Remember this code, I am going to talk about it later */
}
div#container div#content, header {
position: absolute;
}
div#content {
top: 100px;
left: 100px;
}
header {
top: 100px;
right: 10px;
}
Now look at the commented css style, if I add the height in the parent element (in this case the “container”), everything goes ok within 900px. But if I remove the height, all the white background is gone (My “body” background was set to green, div#container background was set to white), what can I do? I can’t always set height as the text flows down. And of course it’s not the right way.
I have others questions, but answer this first. As I am new, details is appreciated.
Firstly, don’t use position: absolute for page layout (except for small items that are not part of the main page flow. The reason is that absolute elements are taken out of the “flow” of the page, meaning that other elements don’t “see” them and thus do not respond to them (such as when they grow in size). That’s why the container is closed when the inner element is absolute, because the container think it has nothing inside it, so it closes up to nothing—unless, of course, you give it a fixed height (which is almost always a bad idea anyway).
You should indeed be using float on the inner element. But as with absolutely positioned elements, a container doesn’t wrap around a floated element by default. You have to tell the container to wrap around the floated item. The easiest way to do that is with overflow: hidden. So try this:
Make sure to set a width on each floated element, or it won’t float, and you can also set padding/margin to suit. Be aware, though, that left and right padding/margin are added to the overall width.
Should I be using float element in the div#container too? What if I don’t use float in the parent element. Again, if my overflow of content is hidden, what about if I need to add more text in the pages?
We actually need to see the HTML this CSS applies to to be sure of what you are asking. The key is to give the parent element overflow: hidden, and then float the inner elements that need to sit side by side. That will allow the text areas to expand as much as needed.
I have to thank you ralph.m, I used overflow: hidden and it works nicely. But a new problem has appeared. The page I created is showing different resolutions. In 1024x768, the layout gets broken in contact.html page, though I used percentage (tried to be liquid). I am attaching the file so that you can further go on.
The only reason it doesn’t break at all browser widths is that the aside has max-width instead of width. You need to adjust the widths to account for the left/right margin/padding.
They both explain how to style the placeholder text with the last example providing a JavaScript fall-back for older browsers so the last example would seem to be appropriate.
Yes, yes, you are right. But the real truth is, I didn’t post here anything till I tried my best and failed You know I am new and having lot of problems, I have solved most of them myself and with help of Google. One thing, I am seeing this kind of css in many places-
* {
margin: 0;
padding: 0;
}
Wha’s the use of “*”, what does it do? I can’t find about it anywhere…so sorry
The “*” is the universal selector and matches any element type. therefore when you say:
* {
margin: 0;
padding: 0;
}
You are saying that for every element that exists I want to remove the margin and padding. It is often used for demos as a quick fix to negate all margin and padding but has implications for form elements as it removes styling that can’t easily be restored. These days a proper reset is used instead of that approach.
Suffice to say that all you really need to know is that elements (apart from divs and spans and various others) have default margins or padding applied and that you need to address this directly and set the margin and padding that you want and not what the browser thinks you want.
Thanks, I understand both of you.
But actually, the “Sticky Footer” tutorial taught me to use that universal selector. And Paul O’b is right, some of the elements looks odd and can’t be redefined easily (at least for me)…
It is used in the demos to avoid having a reset in there as well and to keep the code simple but it is marked up as “demo only” and in a real situation you should use your own reset or at least control the margins and padding of the elements you use.
My problem is, I want to expand the right contents/aside as the aside/rightcontents expands. The aside content is working nicely, but the main contents bgcolor is not exapanding, it’s stuck in a the height where my “p” tag ended.
I added overflow:hidden as ralph.m said before, but in this case, text disappears and scroll bar gets added. I have added comments in the source codes so that you can understand easily.
I didn’t explain here directly because you will get more clear seeing the pages directly in action. So the attachment would do good.
Why do you expect that an elements height should match some other unrelated element? In most cases (apart from table-cells and display table-cell) an elements height is dictated by its content. It will not match the height of some other unrelated element and if you think about it - how could it know?
As Ralph suggested you are looking for a faux column approach where you have to set things up specifically to cater for what you need. Just search the forums for faux columns and you should also find lots of examples. For ie8+ you could use display:table- and display:table-cell properties to mimic the equalising column nature of tables.
On another issue note that very few words are this long:
Using unbroken text like that is just like putting an image in the page and it won’t wrap unless you tell it. You can make unbroken text wrap at the containers edge by applying word-wrap:break-word to the parent container but in truth you only need it when text is in small columns or you are accepting input you can’t control.
So, can you explain me more clearly? What can I do? Continue normal text flow as it should be except those meaningless words? I used word-wrap:break-word but nothing happened (anyway, you didn’t give it as a solution, did you?)
Again, both the article and the content was in the “wrapper” div, so I thought that both of them should be realtive to each other. Sorry for my wrong knowledge. (I think web-design can’t be done by me, because I can do nothing
I may not have been clear but the issue I was referring to was that your unbroken text stretched out of the container wrapper and did not wrap at the containers edge. If you apply the code I gave you to the parent of that text then the text will break at the containers edge. However, as I mentioned it is unlikely that you will come across any words that are 100 letters long and so will not be an issue in that element
Again, both the article and the content was in the “wrapper” div, so I thought that both of them should be realtive to each other. :([/B]
Yes but there could be any number of other elements in that wrapper and do you think they should all magically stretch to the height of the parent?
Static (non positioned) elements will always only be as high as the content that holds them or as high as the height you have set. A percentage height would be be based on a parent that has a fixed height and not on a parent that’s height is dictated by its own content. In essence percentage height is rarely any use apart from using on html and body (see the CSS faq on 100% height). To make equal columns you need the faux column technique Ralph mentioned or to utilise the display:table properties I mentioned (IE8+)
Sorry for my wrong knowledge. [B](I think web-design can’t be done by me, because I can do nothing
Don’t get depressed its a common mistake and you just need a fuller understanding of how css works which will come with practice. We all made the same mistakes at the beginning so just follow the examples we have mentioned as they should answer your original questions.
There is a steep learning curve at first but it will make sense in the end.
Hmm, I have tested several times. But I don’t know why this is happening, I didn’t use the word-wrap: break-word in the text holder but it still wrapped nicely. Are you seeing that page in different browser/version? I am using FF 10!!!
The meaningless words I used was only for testing purpose. And you are right, no word is 100 letters long
You know I am new and having lot of problems, I have solved most of them myself and with help of Google. One thing, I am seeing this kind of css in many places-