I’m supposed to build this. There’s going to be multiple copies of this layout in one page.
I plan to use AP for this. As I’m still learning, I’m open to better ways or so called best practice of achieving the same result. The empty box is an image.
To clear floats in IE6 the element needs haslayout which can usually be easily achieved by setting a dimension.
I’d need to see the code to know what’s wrong but you can use mine as a guide and try to find why yourself. It will help you learn 
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??
Hi,
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.
Otherwise it seems to be working fine.
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.
Hi,
I’d go with floats as well but you may just want to AP the buttons but you must preserve the space.
Here is a rough example.
You guys are awesome. Glad I asked. The layout will likely break in AP if the content gets huge. Thanks Paul for that example. Shall take it as a reference
Great explanation Paul, thank you.
Yes will be leaving position:relative well alone for the time being and concentrate on the floats and clears.
Good stuff.
Hi Paul,
Took your advice and fixed the navigation bar to a listed item and added clear:both to the subhead for good measure. Also changed the doctype to strict and everything validates.
#master {
margin:0 auto;
width:990px;
}
#header {
position: relative;
height: 150px;
width: 990px;
left: 0px;
top: 0px;
}
#navbar {
position: relative;
height: 30px;
width: 550px;
top: 120px;
display: block;
float: right;
text-align: right;
}
#navbar ul {
list-style: none;
margin: 0;
padding: 0;
}
#navbar li {
display: inline;
}
#navbar a:link, #navbar a:visited {
color: #333;
text-decoration: none;
margin-right: 25px;
margin-left: 25px;
}
#navbar a:hover {
color: #03C;
text-decoration: none;
}
#subhead {
position: relative;
height: 15px;
width: 990px;
left: 0px;
top: 0px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
clear: both;
}
#slider {
position: relative;
height: 500px;
width: 990px;
overflow: hidden;
}
#footer {
position: relative;
left: 0px;
top: 0px;
height: 15px;
width: 990px;
}
.grey {
font-family: "MS Serif", "New York", serif;
font-size: 14px;
color: #999;
text-decoration: none;
}
.logocontrol {
left: 0px;
top: 66px;
position: relative;
border: none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>mark marriott</title>
<link href="artstyles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</head>
<body>
<div id="master">
<div id="header">
<div id="navbar">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">works</a></li>
<li><a href="#">custom</a></li>
<li><a href="#">shop</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">blog</a></li>
</ul>
</div>
<img src="Images/logo.jpg" alt="mark marriott" width="250" height="50" class="logocontrol" /> </div>
<div class="grey" id="subhead">Home - Artist</div>
<div id="slider">
<img src="Images/pic1.jpg" width="990" height="500" alt="pic1" />
<img src="Images/pic2.jpg" width="990" height="500" alt="pic2" />
<img src="Images/pic3.jpg" width="990" height="500" alt="pic3" />
</div>
<div class="grey" id="footer">xhtml css jQuery</div>
</div>
</body>
</html>
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.
Thanks very much Paul. I will fix the things you mention. The menu thing is another bad habit I got off a Youtube tut.
Just one thing:
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.
Did you mean how I positioned the logo? If that’s the case I will remove the position:relative and use margins then.
Cheers, and thanks to the OP for borrowing your thread. Moving on from AP is the way to go
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?
The CSS:
@charset "UTF-8";
#master {
margin:0 auto;
width:990px;
}
#master #header #navbar a {
font-size: 16px;
color: #333;
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
display: block;
height: 30px;
width: 120px;
float: left;
text-align: right;
}
#header {
position: relative;
height: 150px;
width: 990px;
left: 0px;
top: 0px;
}
#navbar {
position: relative;
height: 30px;
width: 720px;
left: 270px;
top: 120px;
display: block;
}
#subhead {
position: relative;
height: 15px;
width: 990px;
left: 0px;
top: 0px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCC;
}
#slider {
position: relative;
height: 500px;
width: 990px;
overflow: hidden;
border: 1px solid #000;
}
#footer {
position: relative;
left: 0px;
top: 0px;
height: 15px;
width: 990px;
}
.grey {
font-family: "MS Serif", "New York", serif;
font-size: 14px;
color: #999;
text-decoration: none;
}
.logocontrol {
left: 0px;
top: 66px;
position: relative;
}
Just float two <div>'s side by side (for a column structure) and then code the rest of the markup accordingly :).
As a rule of thumb, 99.9% of hte time, no AP is needed for laying hte page out.