You’re welcome west end lane. We are all here to learn
Hmm…I tired to build one myself using, what I think is logical. But, it fails terribly in ie6
Here’s what I did. Had madethe boxes smaller to make them more obvious. I have overflow:hidden in the out divs wrapping those floats. I know its chaotic, but, whats wrong? IE6 doesn’t wrap floats with overflow:hidden??
If you want a full review then you should post in the review forum but I can make a few comments on the code.
You have set a height to the header so the folowing content will be clear of the floated content inside the header so you are right that you didn;t need a clear. However I would have set clear:both on subhead just in case.
For your menu you have bare anchors next to each other which is bad for accessibility and you should use a list structure instead. Otherwise it reads the whole line as if it were a sentence.
<a href="#">home</a> <a href="#">works</a>
A screen reader will read that as “home works” without pausing and may confuse. It’s best to put a menu structure in a list and you get structure and semantics and accessibility all rolled into one.
Lastly avoid using relative position to move stuff around as it will soon get complicated. In most cases you probably could have used margins and not mess about with the flow of the document.
In truth you should very rarely need position:relative to lay out your page and move elements around as in most cases margins will suffice.
Position:relative is useful though for moving an element a few pixels without changing the flow. That means you can move the element and its effect on the rest of the elements on the page will be zero - they don’t think it has moved. However, you really shouldn’t need to do that if you have laid everything out correctly with margins and floats etc.
You will need to add position:relative when you either want to apply a z-index as only positioned elements can have a z-index. Or you may also want to apply position:relative when you want to place an absolute child in respect of that element.
You can use absolute positionong in small doses but in controlled areas where the flow of the document isn’t an issue. e.g. you could place an image inside a fixed height element absolutely so that it overlaps something else but you don’t need to worry about the flow because the fixed height parent takes care of that. You would need to add position:relative to the parent though (as mentioned above) so that it becomes the stacking context for the absolutely placed child (rather than the viewport) but as you are not supplying co-ordinates then the flow isn’t compromised.
My advice is to completely forget about moving things with relative position for the time being. Once you get a better grasp on what’s going on then you can start to use it again for more subtle and advanced effects.
I’m still getting to grips with understanding the use of margins though. I had a look through your links but didn’t spot if there was something on this subject (although found some other cool stuff). Is it a case of not always needing to add position:relative to every Div then? Can you simply add a Div without a position stated and just control it with margins? If so, how do you know when to add position to a Div and when to just use margins?
If I’m still way off the track with this - apologies!
I wouldn’t bother changing it now as you have it all worked out and the page is simple enough. The logo is contained inside the fixed height header anyway and means that it won’t affect anything else. In fact if you moved it via top margins you may get margin-collapse anyway.
I was talking more generally and when you move an element with relative positioning it doesn’t actually go anywhere. It looks like its somewhere else but the space it originally occupied is always preserved (like a hole in the page). All elements think its still where it was and avoid it like usual.
Therefore if you move lots of elements by relative positioning you have all these gaps in the page where the elements originally were and it becomes very hard to control. Most of the times you just need margins but obviously need to take into account margin-collapse where applicable.
Yeah Paul steered me away from AP Divs as that’s what I started out using as well. There’s still stuff I’m not sure on, but glad I’m not still blindly going the AP route.
Actually Paul, if your reading this could you tell me how this CSS looks to you? I made sure not to AP everything and as a result the jQuery works perfect (unlike the last discussion we had where AP divs had ruined it). I couldn’t see the need to put in any floats or clears, but would you have done it differently?