Menu help - centering list items in a horizontal menu?

I am learning CSS…more and more each day but menus still scare me!! :smiley:

I’m creating a horizontal menu for a mobile site (read: doesn’t have to work with IE6 buuut does have to deprecate for non style sheet/image phones and/or narrow windows).

I want to make a menu using an unordered list. I want each list item to be centered in its own “space” according to the overall width of the window. (I hope that makes sense - basically, each item is horizontally aligned) Since the widths of the browser windows will vary, I need something that will expand/contract the space between each list item proportionate to the size of the window. Simply putting padding or margin to the left or right of each item doesn’t seem to work no matter how I try!!

For example, if the window is 320 px wide, each menu item will have to have 5px space to the left and right of it, but if the window is only 280 px wide, that space has to go down to like 3px on either side.

Can someone help? Any menu tips will be appreciated, I know my code is not perfect! Thank you!


	ul#nav1{  /*centers text vertically */
		list-style: none;
		font-size:13px;
		font-weight:bold;
		width: 270px;
	}
	
	ul#nav1 a {
		display: block;
		color:#fff;
		text-decoration:none;
		padding: 13px 0 13px 0;
		margin:0px auto;
	}
	
	ul#nav1 a:active {
		text-decoration:underline;
	}
	
	ul#nav1 li { /*float makes text list horizontally, padding adds space to left and right of word */
		float: left;
	}
	
	ul#nav1 li.footer-logo a { /*negates text padding applied to make text center vertically, adds padding to left side */
		margin: 0;
		padding: 9px 7px 8px 7px;
	}

<div align="center">
    <ul id="nav1">
        <li class="footer-logo"><a href="/m/"><img src="images/logo-b.jpg" width="27" height="28" alt="home" /></a></li>
        <li><a href="about.php">about</a></li>
        <li><a href="services.php">services</a></li>
        <li><a href="portfolio.php">portfolio</a></li>
        <li><a href="blog.php">blog</a></li>
    </ul>
</div>

Hi pas_non, I read your post last Monday but couldn’t post so I bookmarked it. :slight_smile:

With style and images disabled, the list would be vertical and have bullets and the image alternate text presented. In css enabled mobiles you can have the list evenly distributed across the whole width by text-align justify with the menubar displayed inline and the item-row line-end forced to a soft line-break.

Here is some code you can test in different situations and mobiles.

<!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" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#nav1{
	list-style:none;
	margin:0; /* remove any bullet-space default left margin/padding */
	padding:0 8&#37;;
	background:#999;
	text-align:justify; /* applies to soft-wrapped lines only */
	font-size:13px;
	line-height:0; /* to not affect the nav-box height; minimize the line-height of the soft-breaking line end */
}
#nav1 li{
	display:inline; /* only text lines can be justified */
}
#nav1 li.justified-line-wrap{
	margin-right:100%; /* force a line-break on the line-end, using a hard-space that doesn't sound in text-reading accessibility tools */
}
#nav1 a{
	margin:0 5px;
	line-height:48px; /* restore desired line height*/
	text-decoration:none;
	color:#fff;
}
#nav1 img{
	border:0;
	vertical-align:middle;
}
/* some options */
/* e.g. making items inline-block to take dimensions and vertical margin/padding */
/* e.g. using hidden characters for the line-break and for space at the ends */
#nav2{
	list-style:none;
	margin:0;
	padding:0;
	background:#999;
	text-align:justify;
	font-size:81%;
	line-height:0;
}
#nav2 li{
	display:inline;
	color:#fff;
}
#nav2 li.justified-line-wrap{
	margin-right:100%;
}
#nav2 li.hide-the-dot{
	visibility:hidden;
}
#nav2 li.hide-the-dot a{
	visibility:visible;
}
#nav2 a{
	display:inline-block;
	padding:6px;
	width:4em;
	width:4em;
	vertical-align:middle;
	text-align:center;
	line-height:.9;
	text-decoration:none;
	color:#fff;
}
#nav2 a:hover{
	background:#c00;
}
#nav2 img{
	margin:-6px;
	border:0;
}
</style>
</head><body>

<ul id="nav1">
	<li><a href="/m/"><img src="images/logo-b.jpg" width="48" height="48" alt="home" /></a></li>
	<li><a href="about.php">about</a></li>
	<li><a href="services.php">services</a></li>
	<li><a href="portfolio.php">portfolio</a></li>
	<li class="justified-line-wrap"><a href="blog.php">blog</a> &nbsp;</li><!-- no white-space before the end tag -->
</ul>
<p>
<ul id="nav2">
	<li class="hide-the-dot">. <a href="/m/"><img src="images/logo-b.jpg" width="27" height="48" alt="home" /></a></li>
	<li>| <a href="about.php">about</a> |</li>
	<li><a href="services.php">services & support</a> |</li>
	<li><a href="portfolio.php">portfolio</a> |</li>
	<li class="justified-line-wrap hide-the-dot"><a href="blog.php">blog</a> . .</li><!-- no white-space before the end tag -->
</ul>

</body></html>

Hope you can make it work like you want. :slight_smile:

Well percentage distances via margins would base their values off the width of the element it is set on.

Perhaps I’m not thinking clearly enough but I don’t think you could get this dynamic distance with just CSS :slight_smile: