Forum Moderators: not2easy
Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
CSS:
#wrapHead {
position: absolute;
top: 0;
left: 0;
height: 110px;
z-index: 20;
background: #000;
}
#navtop {
position: absolute;
top: 30px;
right: 10px;
width: 250px;
height: 30px;
padding: 5px 0 10px 0;
z-index: 500;
}
#navtop ul {
list-style: none;
margin: 0;
padding: 0;
}
#navtop li {
display: inline;
}
#navtop li a {
color: #fff;
text-decoration: none;
font-size: 130%;
float: right;
}
#navtopsub {
float: right;
margin: 26px 0 0 0;
background: #f03;
border-top: 1px solid #f66;
}
#navtopsub ul {
list-style: none;
margin: 0;
padding: 0;
}
#navtopsub li {
display: inline;
}
#navtopsub li a {
color: #000;
padding: 5px 4px;
text-decoration: none;
font-size: 85%;
float: right;
}
HTML:
<div id="wrapHead">
<div id="logo">
<span><a href="index.html"><img src="image.gif" alt="image name" width="261" height="57" border="0"></a></span>
</div>
<div id="navtop">
<ul>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
</ul>
</div>
<div id="navtopsub">
<ul>
<li><a href="#">text</a></li>
<li><a href="#.htm">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
</ul>
</div>
</div>
I thought that specifying the z index would bring this to the front, but I have a sneaky suspiscion this is nothing to do with the z index. When I remove the float from navtopsub div the absolute positioned navtop appears.
Any one able to take a look, it would be much appreciated
ZA
It took me a while to figure out that if I floated something, the following item would dissapear when absolute positioning it. Don't ask me why it works, but it does.
And don't forget to add a width to every floated item!
that makes things worse and does not position top right, it ends up bottom left.
I am pretty sure this is something to do with the floated div #navtopsub when I take the float right out of the CSS the absolute positioned #navtop appears in the right place in MISE
If I change the HTML and put the navtop div outside of the wrapHeader div it works, but then it means the HTML is not semantically correct
Lots of hair being pulled out here...
ZA
If I change the HTML and put the navtop div outside of the wrapHeader div it works, but then it means the HTML is not semantically correct
But doesn't giving it an absolute position take it out of the flow of the container.
#navtop {
position: relative;
float: right;
width: 100%;
right: 10px;
top: 30px;
padding: 5px 0 10px 0;
z-index: 500;
}
#navtopsub {
float: right;
margin: 0;
width: 100%;
background: #f03;
border-top: 1px solid #f66;
}
you get a lovely white padding on the right side in all versions of IE, but it gets you a step closer...
One of the main reasons why I am trying to fix the position is about text re-sizing. I dont want the #navtop affecting the positon of the #navtopsub when the font is enlarged
I did think that the position absolute would remove it from flow of the doc and position it exactly where I needed it, but alas not in IE, it looks fine in FF
Damn, there is something I am missing, but not sure what
ZA
Note: removed z-index as serving no useful purpose.
Note: I replaced floating the <a>s (unable to specify widths as required by specifications) with adding text-align: right; to the <ul>s.
Note: adding the universal zeroing of padding and margins can help trim code and know that what you see you really want. It also corrects some cross-browser concerns.
Note: removed <img> HTML attributes and added CSS for #logo img and also floated it.
* {padding: 0; margin: 0;
}
#wrapHead {height: 110px; background: #000;
}
#logo img {float: left; width: 261px; height: 57px; border: 0;
}
#navtop {float: right; width: 250px; height: 30px; margin: 30px 10px 0 0; padding: 5px 0 10px 0;
}
#navtop ul {list-style: none; text-align: right;
}
#navtop li {display: inline;
}
#navtop li a {font-size: 130%; color: #fff; text-decoration: none;
}
#navtopsub {float: right; width: 100%; margin: 26px 0 0 0;background: #f03; border-top: 1px solid #f66;
}
#navtopsub ul {list-style: none; text-align: right;
}
#navtopsub li {display: inline;
}
#navtopsub li a {color: #000; padding: 5px 4px; text-decoration: none;
font-size: 85%;
}
If your HTML code is NOT in normal flow markup (i.e. content comes before header) and position: absolute; is required to force display position try the following:
* {padding: 0; margin: 0;
}
#wrapHead {position: absolute; top: 0; left: 0; height: 110px; background: #000;
}
#logo {position: absolute; left: 0; top: 0;
}
#logo img {width: 261px; height: 57px; border: 0;
}
#navtop {position: absolute; top: 30px; right: 10px; width: 250px; height: 30px; padding: 5px 0 10px 0;
}
#navtop ul {list-style: none; text-align: right;
}
#navtop li {display: inline;
}
#navtop li a {color: #fff; text-decoration: none; font-size: 130%;
}
#navtopsub {position: absolute; width: 100%; left:0; bottom:0; background: #f03; border-top: 1px solid #f66;
}
#navtopsub ul {list-style: none; text-align: right;
}
#navtopsub li {display: inline;
}
#navtopsub li a {color: #000; padding: 5px 4px; text-decoration: none;
font-size: 85%;
}
There are certainly other methods some likely better but these may get you back on track.
It seems to work using the suggestions you made.
I have deliberately chosen to put this navigation and header after to the content in the document flow, otherwise I would have floated everything in the head as you suggested.
The logo bit is actually an image swap, hence the span, as I want to deliver one logo for text only (no CSS and on white background) and a logo for styled content (on black background)
The z-index is needed as I have another background image element overlaping the header (didnt include this bit of code originally)
Thank you so very much for your help, there was one query about 'removed <img> HTML attributes' do you mean removed from the CSS or the HTML itself..?
happy days... :-)
ZA
I have just added my content and now I am getting a flashing horizontal scroll bar at the foot of the browser in MSIE when the browser is re-sized.
When I move the scroll bar I get 1px gap to the right of the header at the top right of screen
<div id="wrap">
<div id="pageContent">
</div>
<div id="wrapHead">
all previous head content....
</div>
</div>
#pageContent {
color: #333;
margin: 130px 0 0 180px;
padding: 0 10px;
}
#wrap {
position: absolute;
top: 0;
left: 0;
color: #fff;
text-align: left;
padding: 0;
width: 100%;
}
course if I make the wrap 99% the scroll does not appear, but I get a gap on the right at the top. changing #wrap to relative position does not change anything either
eeek... any ideas...?
ZA
any ideas...?
Try losing the width:100% on #wrap. It shouldn't be necessary and may be causing the horizontal scrollbar.
Another possibility is that the content you're adding is too wide. Are you adding images or tables whose width might exceed that of the container? If so, IE will auto-expand the containers calculated width to fit the content. This behavior frequently break layouts or causes horizontal scrollbars.
cEM
I have put the wrap around just my page content wrap and not the header as well, and given it 99% width, this now works fine.
Judging by the way I have had to mark this up, would you say this is a fairly good way to create this layout, with wanting to put the content first then the navigation..?
There is so much trial and error, but the urge to get it right is so much stronger, being a perfectionist and all....
ZA
