SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Menu, Horizontal with fixed width items.

    I am having a terrible time creating a CSS horizontal menu where the items are fixed width yet the entire menu can center. Can any one help?

    Here is an example http://www.highfivefriday.com/test.html

    Here is the code.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link type="text/css" href="test.css" rel="stylesheet">
    <title>Please Help :)</title>
    <style type="text/css">
    <!--
    /**********************/
    /* Menu Layout        */
    /**********************/
    #container{
    	width:800px;
    	background-color:#e0e0e0;
    }
    #inner_menu{
    	margin: 10px auto;
    	padding:0;
    	list-style:none;
    }
    #inner_menu li{
    	margin:0;
    	padding:0;
    	display:inline;
    }
    #inner_menu li a, #inner_menu li a:visited{
    	padding:5px;
    	background-color:#23185d;
    	border-color:#000000;
    	border-width:1px;
    	border-style:solid;
    	color:#FFFFFF;
    	text-decoration:none;
    }
    #inner_menu li a:hover{
    	background-color:#2070bd;
    }
    
    /**************************************/
    /* Menu Layout   TRYING TO CENTER     */
    /**************************************/
    
    #inner_menu2 li a:hover{
    	background-color:#2070bd;
    }
    
    #inner_menu2{
    	margin: 10px auto;
    	padding:0;
    	list-style:none;
    }
    #inner_menu2 li{
    	margin:0;
    	padding:0;
    	display:inline;
    }
    #inner_menu2 li a, #inner_menu2 li a:visited{
    	display:block;
    	width:150px;
    	float:left;
    	padding:5px;
    	background-color:#23185d;
    	border-color:#000000;
    	border-width:1px;
    	border-style:solid;
    	color:#FFFFFF;
    	text-decoration:none;
    }
    #inner_menu2 li a:hover{
    	background-color:#2070bd;
    }
    
    -->
    </style>
    </head>
    <body>
    
    <div id="container">
    
    	<P>The menu below should appear centered, but I need the items to be a fixed width (150px) because I want to use a background image.  </p>
    	<div align="center">
    		<div id="inner_menu">
    		<ul>
    			<li><a href="#">Button 1</a></li>
    			<li><a href="#">Button 2</a></li>
    			<li><a href="#">Button 3</a></li>
    		</ul>
    		</div>
    	</div>
    	
    	<P>When I set either the &lt;li&gt; or &lt;a&gt; tags to a fixed width they no longer are side by side. So I do a float:left; and they go side by side but the menu will not center. As you can see below.</p>
    	<div align="center">
    		<div id="inner_menu2">
    		<ul>
    			<li><a href="#">Button 1</a></li>
    			<li><a href="#">Button 2</a></li>
    			<li><a href="#">Button 3</a></li>
    		</ul>
    		</div>
    	</div>
    	
    	<div style="clear:both;"></div>
    	<p>Any suggestions?</p>
    
    <div>
    
    </body>
    </html>
    I have attached this file in case anyone feels so motivated to play.

    Any suggestions are appreciated!
    Attached Files Attached Files

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To center a block level element, you need to set a width. As the total width of the list elements is known, a total can be calculated (486px) and set. It should also be remembered that <ul>s and <ol>s have a list indent, applied via left margin on IE and left padding on FF, therefore both these should be controlled. In your example, there is no need for those two surrounding divs - the width and auto side margins can be applied directly to the <ul> (via the id), and the text centering done using text align on the <a>s. When floating list elements, it is wise to float both the <a>s and <li>s to avoid IE problems.
    Code:
    	<p>When I set either the &lt;li&gt; or &lt;a&gt; tags to a fixed width they no longer are side by side. So I do a float:left; and they go side by side but the menu will not center. As you can see below.</p>
    	<ul id="inner_menu2">
    		<li><a href="#">Button 1</a></li>
    		<li><a href="#">Button 2</a></li>
    		<li><a href="#">Button 3</a></li>
    	</ul>
    Code:
    #inner_menu2{
    	margin: 10px auto;
    	width: 486px;
    	padding:0;
    }
    #inner_menu2 li{
    	margin:0;
    	padding:0;
    	list-style:none;
    	float: left;
    }
    #inner_menu2 li a, #inner_menu2 li a:visited{
    	text-align: center;
    	width:150px;
    	float:left;
    	padding:5px;
    	background-color:#23185d;
    	border-color:#000000;
    	border-width:1px;
    	border-style:solid;
    	color:#FFFFFF;
    	text-decoration:none;
    }
    #inner_menu2 li a:hover{
    	background-color:#2070bd;
    }

  3. #3
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,827
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John_Betong View Post
    Try this:
    The buttons are not a fixed width in that example (try different text in them - the width varies with text) - you cannot assign a width to an inline element.

  5. #5
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,827
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Centauri View Post
    The buttons are not a fixed width in that example (try different text in them - the width varies with text) - you cannot assign a width to an inline element.
    Try: version:002

    http://johns-jokes.com/downloads/sp/centered_links/





    .

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ..which you achieved by setting a width to the container, as I did above. Semantically, a menu is a list of links rather than links in a paragraph anyway.

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. My hope was to not have to set the width of the entire menu equal to the sum widths of the line items because the number of line items will vary from time to time. Sometimes there will be 3 (as in this example), other times 4. I guess I can have two sets of css ids and class for each. However that means if you want to add a button you can't just add a line item. You have to also change the id and class. I was trying to build it so that a none web dev person could easily add and subtract from the menu. But this has taught me a lot.

    Thank you all of you your help.

    Jed

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is this method on Paul's site, but it is more complex.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •