www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Center A Menu? Impossible?

  1. #1
    Join Date
    Apr 2010
    Posts
    121

    resolved [RESOLVED] Center A Menu? Impossible?

    http://www.dynamicdrive.com/style/cs...n-menu-ii/P10/

    Above, is the link to the website that I found this menu. The menu looks great on the page, but it's off to the side and need s to be centered.

    The HTML
    HTML Code:
    <div id="cfnavbar">
    <ul>
    <li><span><a href="http://www.dynamicdrive.com" id="leftcorner">Home</a></span></li>
    <li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li>
    <li><a href="http://www.dynamicdrive.com/style/">CSS</a></li>
    <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
    <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
    <li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
    <li><a href="http://www.dynamicdrive.com/contact.htm" id="rightcorner">Contact</a></li>
    </ul>
    </div>
    
    <br style="clear: left" />
    The CSS
    Code:
    <style type="text/css">
    
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    
    #cfnavbar{
    margin: 0;
    padding: 0;
    }
    
    #cfnavbar ul{
    background: url(media/bgpink.gif) bottom center repeat-x;
    padding-left: 0;
    margin: 0;
    float: left;
    font: bold 80% Verdana;
    }
    
    * html #cfnavbar ul{ /*IE only rule. Add extra margin-bottom*/
    margin-bottom: 1em;
    }
    
    #cfnavbar ul li{
    display: inline;
    }
    
    
    #cfnavbar ul li a, #cfnavbar ul li span{
    float: left;
    color: black;
    font-weight: bold;
    padding: 7px 13px 8px 6px;
    text-decoration: none;
    background: url(media/dividerpink.gif) bottom right no-repeat;
    }
    
    #cfnavbar ul li span{ /*Targets span tag to the right of #leftcorner below*/
    padding-left: 0px;
    }
    
    
    #cfnavbar ul li a#leftcorner{
    float: none;
    padding-left: 10px;
    padding-right: 0px;
    background: url(media/leftcornerpink.gif) bottom left no-repeat;
    }
    
    #cfnavbar ul li a#rightcorner{
    padding-right: 10px;
    background: url(media/rightcornerpink.gif) bottom right no-repeat;
    }
    
    #cfnavbar ul li a:hover{
    text-decoration: underline;
    }
    
    </style>
    I have tried:

    position: absolute;
    left: 50%;
    width: 500px;
    margin-left: -250px;

    This one worked, but it wasn't completely centered.


    text-align: center;

    This does not work.

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    Give it a suitable width, and then margin auto. For example:
    Code:
    #cfnavbar{
    width:500px; /* Choose suitable width */
    margin: 0 auto;
    padding: 0;
    }
    Great wit and madness are near allied, and fine a line their bounds divide.

  3. #3
    Join Date
    Apr 2010
    Posts
    121

    resolved Thankyou

    Thankyou multiplicity 3! I can't believe it was that easy.

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    in fact you are dealing with the left and right margins, as the code:
    Code:
    margin: 0 auto;
    has the pattern:

    margin:top_and_bottom right_and_left;

    It is in fact the short notation for:
    Code:
    margin:0 auto 0 auto;
    on the pattern:

    margin: top right bottom left;

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles