Forum Moderators: not2easy
I need "top_main_menu" and "top_sub_menu" divs to align in the center of the page. I do not want them to wrap when browser window is resized to small size. I also do not want them to mysteriously float to the left of the browser window when its resized (happens when i use left-margin at 50% size).
I tried all the solutions from CSS template sites yet i cannot get it to work properly.
What am i doing wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML
<body>
<div id="top_background"></div>
<div id="top_key2_logo">Logo</div>
<div id="top_main_menu" align="center"><img src="menu-placeholder.gif" width="634" height="29" /></div>
<div id="top_sub_menu" align="center"><a href="#">home</a> <a href="#">about us</a> <a href="#">contact us</a> <a href="#">terms</a></div>
<div id="top_telephone">telephone number</div>
</body>CSS
body {
background:#ffffff;
margin:0;
padding:0;
color:#999999;
font-size:11px;
font-family: Arial, Helvetica, sans-serif;
}
/* Links
----------------------------------------------- */
a:link {color:#D11D8B; }
a:visited {color:#D11D8B;}
a:hover {color:#D11D8B;text-decoration: underline;}
a img {
border-width:0;
}/* top gfx & headers
----------------------------------------------- */
#top_background{
width:100%;
height:93px;
position:absolute;
background-color: #D11D8B;
background-image: url(/site_test/1/images1/key2_top_background_luxury.gif);
background-repeat: repeat-x;
min-width: 634px;
top:0px;
}
#top_key2_logo {
position: absolute;
left:10px;
top:5px;
width:150px;
z-index: 2;
background: #fff; /* added for visual only */
}#top_telephone {
position: absolute;
right:10px;
top:5px;
width:139px;
z-index: 1;
background: #fff; /* added for visual only */
}#top_main_menu {
position: absolute;
width: 634px;
top:41px;
min-width: 634px;
z-index: 999;
background: #ff0; /* yellow for visual only */
}#top_sub_menu {
position: absolute;
width: 634px;
margin-left : auto;
top:71px;
min-width: 634px;
z-index: 999;
background: #fff; /* added for visual only */
}#top_sub_menu a{
color:#D11D8B;
font-weight: normal;
text-decoration: none;
padding-right: 40px;
padding-bottom: 0px;
padding-left: 40px;
text-decoration:none;
}
#top_sub_menu a:hover {
text-decoration: underline;
}
[edited by: SuzyUK at 2:14 pm (utc) on Feb. 23, 2007]
[edit reason] Link snipped and Code added [/edit]
Now when the page is resized, everything stays in place, background are not lost if i resize to a really small size. Need to test in IE7.
heres the code:
<b>HTML</b>
<body>
<div id="top_background">
<div id="top_main_menu">
<img src="images/key2luxury_holidays_main_menu.gif" width="634" height="29" /></div>
<div id="top_sub_menu">
<a href="#">home</a> <a href="#">about us</a> <a href="#">contact us</a> <a href="#">terms</a></div>
<div id="top_key2_logo">
<img src="images/key2luxury_holidays_logo.gif" width="134" height="35" /></div>
<div id="top_telephone">
<img src="images/key2luxury_holidays_telephone.gif" width="139" height="35" /></div>
</div>
</body><b>CSS</b>
body {
background:#ffffff;
margin:0;
padding:0;
color:#999999;
font-size:11px;
font-family: Arial, Helvetica, sans-serif;
text-align:center;
}
#top_background{
width:100%;
height:93px;
position:absolute;
background-color: #D11D8B;
background-image: url(/images/key2_top_background_luxury.gif);
background-repeat: repeat-x;
min-width: 634px;
top:0px;
left:0px;
text-align:center;
}
#top_key2_logo {
position: absolute;
left:10px;
top:5px;
width:150px;
z-index: 2;
}#top_telephone {
position: absolute;
right:10px;
top:5px;
width:139px;
z-index: 1;
}#top_main_menu {
position: relative;
width: 634px;
z-index: 999;
top:41px;
margin-left: auto;
margin-right: auto;
}#top_sub_menu {
position: relative;
width: 634px;
min-width: 634px;
top:43px;
z-index: 999;
margin-left: auto;
margin-right: auto;
}
Aparentlly IE6 has a bug which makes elements center with text-align property, which in my opinion is not the greatest way of doing this.
you are right, however IE6/7 now also do it the compliant way (using margin: 0 auto;} providing you're using a Strict Rendering Doctype (which yours is if you've got no whitespace before it) so if you don't need to support IE5.x you can start phasing out the text-align: center workarounds.
I see between your first and second code samples that you have now got the elements inside the background div - that now makes it a wrapper for it's contents :) - I was going to suggest that to make things easier but hey you're ahead of us all!
because you now have a "wrapper" you don't need
text-align: center;You can also now remove the absolute positioning and co-ordinates off the
#top_backgroundIt's testing fine in IE7 for me :)
Suzy
now that i resolved centering issues im building the rest of the content at warp speed. Woohoo!
