Link to home
Start Free TrialLog in
Avatar of Shaye Larsen
Shaye Larsen

asked on

Classic Question Center Inline float left list without known width

I know there is no known way of doing this. I have a navigation menu that is dynamic. People can edit and change their nav menu. It spans the width of the screen but the list needs to center within that bar.

Believe it or not I have this working in Firefox. But it is being more stubborn than a first generation Netscape in Internet Explorer 7.

I have seen others doing it and have tried to implement their stuff but it doesn't work for IE.

I need to center the list whose code is shown below.

How can I pull this off? Keep in mind this will be dynamic and users will be changing the styles. However, I could put a main width on it that they can edit but there would need to be something behind it to span the screen.

I have tried adding a width to the container called nav_div and set margin:0 auto; and text-align:center;, but this centers the whole thing but not the text/list elements inside of it in IE 7.

Here is the CSS and HTML:
CSS:
/*these styles effect the main top bar*/
#nav26 li.top {display:table-cell; float:left; height:38px; text-align:center;}
#nav26 li a.top_link {display:block; float:left; height:38px; line-height:38px; color:#2C4728; text-decoration:none; font-size:12px; font-weight:bold; padding:0 0 0 18px; vertical-align:middle; cursor:pointer;background: url(../jquery/plugins/pro_dropdown_2/thee.gif);}
#nav26 li a.top_link span {float:left; display:block; padding:0 18px 0 18px; height:38px; background: url(../jquery/plugins/pro_dropdown_2/tre_.gif) right top no-repeat;}
#nav26 li a.top_link span.down {float:left; display:block; padding:0 18px 0 18px; height:38px; background: url(../jquery/plugins/pro_dropdown_2/the0a.gif) no-repeat right top;}
 
/*these styles effect the main top bar hover*/
#nav26 li:hover a.top_link {color:#BCDFB7; background: url(../jquery/plugins/pro_dropdown_2/th_1.gif) no-repeat;}
#nav26 li:hover a.top_link span { background:url(../jquery/plugins/pro_dropdown_2/thr1.gif) no-repeat right top;}
#nav26 li:hover a.top_link span.down { background:url(../jquery/plugins/pro_dropdown_2/thea.gif) no-repeat right top;}
 
/*these styles effect the submenus*/
ul.topLevel {width:100%;}
#nav26 li:hover {position:relative; z-index:1060;}
#nav26 li:hover ul.sub{left:1px; top:38px; background: #61895B; padding:3px; border:1px solid #34672B; white-space:nowrap; width:90px; height:auto; z-index:1070; filter:alpha(opacity=90); opacity:.900; -moz-opacity:.900; -khtml-opacity:0.90;}
#nav26 li:hover ul.sub li{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav26 li:hover ul.sub li a{display:block; font-size:10px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000000; text-decoration:none;border:1px solid #61895B;}
#nav26 li ul.sub li a.fly{background:#61895B url(../jquery/plugins/pro_dropdown_2/arrow.gif) 80px 6px no-repeat;}
#nav26 li:hover ul.sub li a:hover{background:#34672B; color:#fff; border-color:#fff;}
#nav26 li:hover ul.sub li a.fly:hover{background:#34672B url(../jquery/plugins/pro_dropdown_2/arrow_over.gif) 80px 6px no-repeat; color:#fff;}
#nav26 li:hover li:hover ul, #nav26 li:hover li:hover li:hover ul, #nav26 li:hover li:hover li:hover li:hover ul, #nav26 li:hover li:hover li:hover li:hover li:hover ul{left:90px; top:-4px; background: #61895B; padding:3px; border:1px solid #34672B; white-space:nowrap; width:90px; z-index:1090; height:auto;}
#nav26 li:hover li:hover a.fly, #nav26 li:hover li:hover li:hover a.fly, #nav26 li:hover li:hover li:hover li:hover a.fly, #nav26 li:hover li:hover li:hover li:hover li:hover a.fly{background:#34672B url(../jquery/plugins/pro_dropdown_2/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}
#nav26 ul, #nav26 li:hover ul ul, #nav26 li:hover li:hover ul ul, #nav26 li:hover li:hover li:hover ul ul, #nav26 li:hover li:hover li:hover li:hover ul ul{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav26 li:hover li:hover li a.fly, #nav26 li:hover li:hover li:hover li a.fly, #nav26 li:hover li:hover li:hover li:hover li a.fly{background:#61895B url(../jquery/plugins/pro_dropdown_2/arrow.gif) 80px 6px no-repeat; color:#000000; border-color:#61895B;}
 
/*These styles effect the list containers*/
#nav_div{width:775px; z-index:1050; text-align:center; margin:0 auto;}
.del_nav{display:inline-block; text-decoration:none;}
 
<!--[if lte IE 7]>
.del_nav {display:inline-block;}
<!--[endif]-->
 
HTML:
<div id="nav_div">
<del class="del_nav">
<ul id="nav26" class="toplevel">
	<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
	<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a>
		<ul class="sub">
			<li><a href="#nogo3" class="fly">Cameras</a>
					<ul>
 
						<li><a href="#nogo4">Nikon</a></li>
						<li><a href="#nogo5">Minolta</a></li>
						<li><a href="#nogo6">Pentax</a></li>
					</ul>
			</li>
			<li><a href="#nogo7" class="fly">Lenses</a>
					<ul>
 
						<li><a href="#nogo8">Wide Angle</a></li>
						<li><a href="#nogo9">Standard</a></li>
						<li><a href="#nogo10">Telephoto</a></li>
						<li><a href="#nogo11" class="fly">Zoom</a>
							<ul>
								<li><a href="#nogo12">35mm to 125mm</a></li>
 
								<li><a href="#nogo13">50mm to 250mm</a></li>
								<li><a href="#nogo14">125mm to 500mm</a></li>
							</ul>
						</li>
						<li><a href="#nogo15">Mirror</a></li>
						<li><a href="#nogo16" class="fly">Non standard</a>
							<ul>
 
								<li><a href="#nogo17">Bayonet mount</a></li>
								<li><a href="#nogo18">Screw mount</a></li>
							</ul>
						</li>
					</ul>
			</li>
			<li><a href="#nogo19">Flash Guns</a></li>
 
			<li><a href="#nogo20">Tripods</a></li>
			<li><a href="#nogo21">Filters</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>
		<ul class="sub">
			<li><a href="#nogo23">Printing</a></li>
 
			<li><a href="#nogo24">Photo Framing</a></li>
			<li><a href="#nogo25">Retouching</a></li>
			<li><a href="#nogo26">Archiving</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>
		<ul class="sub">
 
			<li><a href="#nogo28">Support</a></li>
			<li><a href="#nogo29" class="fly">Sales</a>
				<ul>
					<li><a href="#nogo30">USA</a></li>
					<li><a href="#nogo31">Canadian</a></li>
					<li><a href="#nogo32">South American</a></li>
 
					<li><a href="#nogo33" class="fly">European</a>
						<ul>
							<li><a href="#nogo34" class="fly">British</a>
								<ul>
									<li><a href="#nogo35">London</a></li>
									<li><a href="#nogo36">Liverpool</a></li>
									<li><a href="#nogo37">Glasgow</a></li>
 
									<li><a href="#nogo38" class="fly">Bristol</a>
										<ul>
											<li><a href="#nogo39">Redland</a></li>
											<li><a href="#nogo40">Hanham</a></li>
											<li><a href="#nogo41">Eastville</a></li>
										</ul>
									</li>
 
									<li><a href="#nogo42">Cardiff</a></li>
									<li><a href="#nogo43">Belfast</a></li>
								</ul>
							</li>
							<li><a href="#nogo44">French</a></li>
							<li><a href="#nogo45">German</a></li>
							<li><a href="#nogo46">Spanish</a></li>
 
						</ul>
					</li>
					<li><a href="#nogo47">Australian</a></li>
					<li><a href="#nogo48">Asian</a></li>
				</ul>
			</li>
			<li><a href="#nogo49">Buying</a></li>
 
			<li><a href="#nogo50">Photographers</a></li>
			<li><a href="#nogo51">Stockist</a></li>
			<li><a href="#nogo52">General</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
		<ul class="sub">
 
			<li><a href="#nogo54">Online</a></li>
			<li><a href="#nogo55">Catalogue</a></li>
			<li><a href="#nogo56">Mail Order</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
</del>
</div>

Open in new window

Avatar of yessirnosir
yessirnosir

Hey hero, that menu is looking pretty good on my machine in FF, IE6 and IE7.  Maybe I'm not looking at the right thing.  Have attached an IE7 screenshot.  Is that what you are seeing?  The only change I made to your code was cleaning up the conditional style what is shown below.

<!--[if lte IE 7]>
<style type="text/css">
.del_nav {display:inline-block;}
</style>
<![endif]-->

Open in new window

hero-menu.jpg
===>>>  "I know there is no known way of doing this"
Well that was like waving a red flag in front of the bull!  I just spent many hours experimenting with different menu centering techniques, and managed to get three different variable-width drop-down menus centered and working in IE6/7, FF, Chrome, Safari/Win and Opera.  Screenshots below.  I used two different centering techniques. One I think is the one you were working with:
http://www.cssplay.co.uk/menus/centered.html
and the other is this one:  
http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support 
I think either one could have worked with all three menus.   The second one is a little stranger to work with since it sends a non-displaying part of a div off the right hand edge of the screen.  But you've got to admire the cleverness of his centering technique.  It looks like it would work for centering any variable width content.

The first menu in the screen shot is based on the http://sperling.com/examples/menuh/ which is pure CSS for everything except IE6.  For IE6 it uses the csshover.htc behavior.

The second menu is a jquery version of Suckerfish called Superfish. http://users.tpg.com.au/j_birch/plugins/superfish/  Some really nice functionality in the JS, and much cleaner HTML than suckerfish.  

The third one is a JS based dropdown called the "Simple Drop Down Menu".  Lightweight JS code.  From here:  http://javascript-array.com/scripts/simple_drop_down_menu/

I'm posting code from the first one.  If you're interested in the others just let me know.
<!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>Center the Sperling Horizontal Menu</title>
<style type="text/css">
body {
	margin:0;
	padding:0;
	text-align:center;
}
h1 {font-size:18px;text-align:center;}
#wrapper {
	text-align:center;
}
.container {
	clear:both;
	text-decoration:none;
	background:yellow;  /* just a flag; shows up on screen if something is wrong with layout */
	}
#menuh {
}
/* Begin CSS Drop Down Menu */
 
 
#menuh {
	display:table;   /* based on Stu Nichols http://www.cssplay.co.uk/menus/centered.html */
	background:green;  /* just a flag; shows up on screen if something is wrong with layout */
	margin: 0 auto;
	font-size: small;
	font-family: arial, helvetica, sans-serif;/*width:100%;*/
	}
#menuh a {
	text-align: center;
	display:block;
	border: 1px solid #555;
	white-space:nowrap;
	margin:0;
	padding: 0.5em 1.5em 0.5em 1em;
}
#menuh a:link, #menuh a:visited, #menuh a:active	/* menu at rest */ {
	color: white;
	background-color: royalblue;
	text-decoration:none;
}
#menuh a:hover	/* menu at mouse-over  */ {
	color: white;
	background-color: cornflowerblue;
	text-decoration:none;
}
#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */ {
	background-image: url(navdown_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
}
#menuh a.parent, #menuh a.parent:hover 	/* attaches side-arrow to all parents */ {
	background-image: url(nav_white.gif);
	background-position: right center;
	background-repeat: no-repeat;
}
#menuh ul {
	list-style:none;
	margin:0;
	padding:0;
	float:left;/*width:9em;*/	/* width of all menu boxes */
	}
#menuh li {
	display:table-cell;  /* based on Stu Nichols http://www.cssplay.co.uk/menus/centered.html */
	min-height: 1px; 			/* Sophie Dennis contribution for IE7 */
	vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
}
#menuh ul ul {
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1em 0 0 -1em;
}
#menuh ul ul ul {
	top:0;
	left:100%;
}
/*#menuh ul li {float:left;width:100px;}*/
 
#menuh ul li ul {
	width:120px;
} /* keeps dropdown vertical*/
#menuh ul ul li {
	position:relative;
	float:left;
	width:120px;
}
div#menuh li:hover {
	cursor:pointer;
	z-index:100;
}
div#menuh li:hover ul ul, div#menuh li li:hover ul ul, div#menuh li li li:hover ul ul, div#menuh li li li li:hover ul ul {
	display:none;
}
div#menuh li:hover ul, div#menuh li li:hover ul, div#menuh li li li:hover ul, div#menuh li li li li:hover ul {
	display:block;
}
 
/* End CSS Drop Down Menu */
</style>
 
 
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body{behavior:url(csshover.htc); }
#menuh ul li{float:left; width:1px;}
#menuh a{height:1%;}
</style>
<![endif]-->
 
<!--[if lte IE 7]>
<style type="text/css">
.container {display:inline-block; }
</style>
<![endif]-->
 
</head>
 
<body>
<h1> Centering the Sperling Horizontal Menu with Variable Width </h1>
<p>Menu based on  http://sperling.com/examples/menuh/</p>
<p>Centering technique based on http://www.cssplay.co.uk/menus/centered.html </p>
<div id="wrapper">
<del class="container">
 
    
        <div id="menuh">
                
            <ul>
                <li><a href="#" class="top_parent">Item 1</a>
        
                <ul>
                    <li><a href="#">Sub 1:1</a></li>
                    <li><a href="#" class="parent">Sub 1:2</a>
                        <ul>
                        <li><a href="#">Sub 1:2:1</a></li>
                        <li><a href="#">Sub 1:2:2</a></li>
                        <li><a href="#">Sub 1:2:3</a></li>
        
                        <li><a href="#">Sub 1:2:4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Sub 1:3</a></li>
                    <li><a href="#" class="parent">Sub 1:4</a>
                        <ul>
                        <li><a href="#">Sub 1:4:1</a></li>
        
                        <li><a href="#">Sub 1:4:2</a></li>
                        <li><a href="#">Sub 1:4:3</a></li>
                        <li><a href="#">Sub 1:4:4</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="parent">Sub 1:5</a>
                        <ul>
        
                        <li><a href="#">Sub 1:5:1</a></li>
                        <li><a href="#">Sub 1:5:2</a></li>
                        <li><a href="#">Sub 1:5:3</a></li>
                        <li><a href="#">Sub 1:5:4</a></li>
                        <li><a href="#">Sub 1:5:5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Sub 1:6</a></li>
                </ul>
                </li>
          </ul>
        
            <ul>
                <li><a href="#" class="top_parent">Make This Wider</a>
                <ul>
        
                    <li><a href="#">Sub 2:1</a></li>
                    <li><a href="#" class="parent">Sub 2:2</a>
                        <ul>
                        <li><a href="#">Sub 2:2:1</a></li>
                        <li><a href="#">Sub 2:2:2</a></li>
                        </ul>
                    </li>
        
                    <li><a href="#">Sub 2:3</a></li>
                    <li><a href="#" class="parent">Sub 1:4</a>
                        <ul>
                        <li><a href="#">Sub 2:4:1</a></li>
                        <li><a href="#">Sub 2:4:2</a></li>
                        </ul>
                    </li>
        
                    <li><a href="#" class="parent">Sub 2:5</a>
                        <ul>
                        <li><a href="#">Sub 2:5:1</a></li>
                        <li><a href="#">Sub 2:5:2</a></li>
                        <li><a href="#">Sub 2:5:3</a></li>
                        <li><a href="#">Sub 2:5:4</a></li>
        
                        <li><a href="#">Sub 2:5:5</a></li>
                        </ul>
                    </li>
                </ul>
                </li>
          </ul>
        
            <ul>
                <li><a href="#" class="top_parent">Item 3</a>
        
                <ul>
                    <li><a href="#" class="parent">Sub 3:2</a>
                        <ul>
                        <li><a href="#">Sub 3:2:1</a></li>
                        <li><a href="#">Sub 3:2:2</a></li>
                        <li><a href="#">Sub 3:2:3</a></li>
                        <li><a href="#">Sub 3:2:4</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="parent">Sub 3:3</a>
                        <ul>
                        <li><a href="#">Sub 3:3:1</a></li>
                        <li><a href="#">Sub 3:3:2</a></li>
                        <li><a href="#">Sub 3:3:3</a></li>
        
                        <li><a href="#">Sub 3:3:4</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="parent">Sub 3:4</a>
                        <ul>
                        <li><a href="#">Sub 3:4:1</a></li>
                        <li><a href="#">Sub 3:4:2</a></li>
        
                        <li><a href="#">Sub 3:4:3</a></li>
                        <li><a href="#">Sub 3:4:4</a></li>
                        <li><a href="#">Sub 3:4:5</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Sub 3:5</a></li>
                </ul>
                </li>
          </ul>
            
            <ul>
                <li><a href="#" class="top_parent">Item 4</a>
                <ul>
                    <li><a href="#">Sub 4:1</a></li>
                    <li><a href="#" class="parent">Sub 4:2</a>
        
                        <ul>
                        <li><a href="#">Sub 4:2:1</a></li>
                        <li><a href="#">Sub 4:2:2</a></li>
                        <li><a href="#">Sub 4:2:3</a></li>
                        <li><a href="#">Sub 4:2:4</a></li>
                        </ul>
                    </li>
        
                    <li><a href="#">Sub 4:3</a></li>
                    <li><a href="#" class="parent">Sub 4:4</a>
                        <ul>
                        <li><a href="#">Sub 4:4:1</a></li>
                        <li><a href="#">Sub 4:4:2</a></li>
                        <li><a href="#">Sub 4:4:3</a></li>
        
                        <li><a href="#">Sub 4:4:4</a></li>
                        <li><a href="#">Sub 4:4:5</a></li>
                        <li><a href="#">Sub 4:4:6</a></li>
                        <li><a href="#">Sub 4:4:7</a></li>
                        <li><a href="#">Sub 4:4:8</a></li>
                        <li><a href="#">Sub 4:4:9</a></li>
                        </ul>
                    </li>
                </ul>
                </li>
          </ul>
            <ul>
                <li><a href="#" >Item 5</a></li>
          </ul>
        <div style="clear:both"></div>
        </div>
 	
</del>
</div>
</body>
</html>

Open in new window

centering-three-dropdown-menus.jpg
Avatar of Shaye Larsen

ASKER

Wow, thank you very much for the help. I can get my own code (the code I posted first) to center the containing div on the page. I cannot however get the links within that div to center within it. If I adjust the width to be just the right size around the links it centers correctly, but as you know I cannot do that.

Yessirnosir, I will try implementing the code you gave me. But before I go all into that, is there a simple fix to the styles I already have to match the ones you suggested?

Anyway, how can I center the links inside of the main containing div? text-align:center; doesn't seem to work.

Thanks!
ASKER CERTIFIED SOLUTION
Avatar of yessirnosir
yessirnosir

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks