qeng
asked on
CSS - How to Center Spry Horiz Menu Widget within Div in both IE7 and FF3
How do I center the entire horizontal spry menu bar within the orange div (please see attached code) such that if I add additional items to the nav bar, the menu bar remains centered (in other words, I don't want to use padding, I want it to self-center, regardless of the menu bar's overall width).
I'm looking for a solution which works in IE7 as well as FF3
I'm looking for a solution which works in IE7 as well as FF3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000000;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #FFFFFF;
}
/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/
#container {
width: 57em;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
padding: 0px;
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
background-color: #0000FF;
}
#topnavbar {
padding: 0;
/* margin: -21px 0;*/
height: 35px;
text-align: center;
background-color: #FF6600;
}
#header {
/* padding: 0 10px 0 20px;*/ /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
text-align: center;
background-color: #FF0000;
}
#header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
#mainContent {
/* padding: 0 20px;*/
/* padding: 20px 0;*/
/* margin: -21px 0;*/
background-color: #00FF00;
text-align: center;
}
#footer {
padding: 0 10px;
text-align: center;
background-color: #FF00FF;
}
#footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
-->
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="topnavbar">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<!-- end #topnavbar --></div>
<div id="mainContent">
<img src="Photos/Snowfest_Site_Cover_DSC_0116_r1_1000x669.jpg" width="1000" height="669" />
<!-- end #mainContent -->
</div>
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I had been typing for a while when I posted that.... didn't know you had posted an update in the meantime...
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yessirnosir,
Thanks a lot for your detailed response. I will probably revisit it on my next page build. Without studying it right now it seems your approach is more generic than the one I used and will provide for more automatic sizing of the menu containers.
Just for clarification, number of menu elements changes from site to site or page to page. This is why I was looking to do something more generic that didn't always require that several rules be adjusted each time the lable widths or number of menu items changes (the adjustment of the individual rules is stil a bit cumbersome for me as I'm relatively new to the entire html/css game).
I see as I'm typing this that another comment has been posted. So this comment of mine may be out of sequence in the thread once I post it.
I'll review the last comment and close off the question.
Thanks again for your help.
Mike
Thanks a lot for your detailed response. I will probably revisit it on my next page build. Without studying it right now it seems your approach is more generic than the one I used and will provide for more automatic sizing of the menu containers.
Just for clarification, number of menu elements changes from site to site or page to page. This is why I was looking to do something more generic that didn't always require that several rules be adjusted each time the lable widths or number of menu items changes (the adjustment of the individual rules is stil a bit cumbersome for me as I'm relatively new to the entire html/css game).
I see as I'm typing this that another comment has been posted. So this comment of mine may be out of sequence in the thread once I post it.
I'll review the last comment and close off the question.
Thanks again for your help.
Mike
ASKER
yessirnosir, I'll use your code on my next page build (or on the present one if I keep running into snags with the positioning of the submenus relative to the main menu items). Thx.
ASKER
I can't seem to get your suggestion to work (I may not have interpreted it correctly). I'll answer your comments in the order of your reply and explain what I did.
The unordered list was already a drop down format (the 'Videos' menu item has 4 submenu items associated with it ... which can be seen in lines 83 to 86 of the attached html file in the code snippet window). I'm guessing that because I haven't sent the full site files (e.g. you don't have the required java script to fully operate the spry drop down menus) that you're not able to see this behaviour.
You mentioned to create a div which wraps the MenuBar1 and apply either "margin: auto" or "margin: auto" and "text-align:center". I tried that but it's not working for me. The menu was still not centering.
I already had the entire top menu in two divs specifically created to wrap the horizontal menu. The innermost wrapping container "MenuBar1" seems to be controlled by several rules including the main "ul.MenuBarHorizontal", which is the first rule in the external css sheet "SpryMenuBarHorizontal.css
The other div, "id=topnavbar", I had previously created to wrap the entire spry widget and also to be able to color the background extending horizontally at either end of div MenuBar1. Applying "margin: auto" and "text-align:center" to this div also didn't center the menu.
Doing a bit more research, I found that replacing the "width:auto" with a fixed width (in this case I used "width: 50em") in rule "ul.MenuBarHorizontal" does the trick. The menu now centers in both IE7 and FF3.
I don't understand why the menu remains left justified with the "width:auto" in "ul.MenuBarHorizontal".
Thx
Mike
Open in new window