SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question Centering Horizontal Menu with Even Widths in Fixed-Size Container

    I have this menu:
    <div id="mainmenu">
    <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>
    <li>Menu 6</li>
    </ul>
    </div>

    inside a container (width of 957px). What I'm trying to do is not only center the menu within the container but also trying to get the menu to fill the width of the container. I can't seem to figure out how to do that without the menu flowing OUTSIDE or BEYOND the container width.

    Also, I have it set to absolute because my next layer will be a rather large image behind the menu.

    CSS:
    Code:
    .mainmenu {
    	position: absolute;
    	margin-top: 7px;
    	top: 0px;
    	left: 0px;
     line-height: normal;
    	z-index: 1000;
    }
    
    .mainmenu ul {
    	margin: 0px;
    	padding: 0px;
    	text-align: center;
    	font: normal 14px Georgia, "Times New Roman", Times, serif;
    	background: rgba(0,0,0,.5);
    }
    
    .mainmenu ul.menu li {
    margin: 0px;
    display: inline;
    list-style-type: none;
    padding: 10px 0px;
    border-left: 1px solid #737476;
    }
    
    .mainmenu ul.menu li.first-child {
    	border-left: none;
    }
    
    .mainmenu ul.menu li a, .mainmenu ul.menu li a:link, .mainmenu ul.menu li a:active, .mainmenu ul.menu li a:visited {
    color: #FFF;
    padding: 10px 55px;
    text-decoration: none;
    text-transform: capitalize;
    }
    
    .mainmenu ul.menu li a:hover {
    	color: #000;
    	background: #FFF;
    }
    Thank you!

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Give the div the background and the ul the fixed width and margin auto.

    Here are all the ways to do it. http://www.visibilityinherit.com/code/center-nav.php

    Edit- Depending, you'll prob want to remove that position absolute on the div too.

  3. #3
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    This is what I need it to look like
    Attached Images Attached Images

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can't really do it automatically (not without a lot of trickery). You could use display:table and display:table-cell properties to make it fit automatically but they are not supported in ie6 and 7.

    I would just float each one left and give them widths to fit exactly.

  5. #5
    SitePoint Guru
    Join Date
    Jul 2003
    Location
    england
    Posts
    819
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank Paul O'B'.

    I wound up setting an em width on the line items and adding a special padding-right (just a tad) to the last line item since it wasn't filling up to the full width. Looks good!

    Thank you!


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
  •