Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question How do I center blocked li for horizontal menu

    I have a horizontal menu that uses floats and blocked li, but would really like to center it if I could...below is my style and html code...got the menu from a free online site, have managed to change colors to my needs and it is working great as is, just would prefer it to center if possible and still somewhat new to css, but learning...thanks in advance for any and all help/suggestions


    .wrapper {
    width: 642px;
    height: 30px;
    position: relative;
    margin-bottom: 30px;
    background-color: #000000;

    }

    ul#saturday {
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    position:relative;
    display:block;
    height:36px;
    text-transform:uppercase;
    font-size:12px;font-weight:bold;
    background:transparent url("images/bgOFF.gif") repeat-x top left;
    font-family:Helvetica,Arial,Verdana,sans-serif;
    border-bottom:4px solid #000000;
    border-top:1px solid #000000;
    }

    ul#saturday li {
    display:block;
    float:left;
    margin:0;
    padding:0;
    }

    ul#saturday li a {
    display:block;
    float:left;
    color:#000000;
    text-decoration:none;
    padding:12px 20px 0 20px;
    height:24px;
    background:transparent url("images/bgDIVIDER.gif") no-repeat top right;
    }

    ul#saturday li a:hover {
    background:transparent url("images/bgHOVER.gif") no-repeat top right;
    }

    ul#saturday li a.current, ul#saturday li a.current:hover {
    color:#ffffff;
    background:transparent url("images/bgON.gif") no-repeat top right;
    }



    <div class="wrapper">
    <ul id="saturday">
    <li><a href="index.php" title="Home">HOME</a></li>
    <li><a href="bio.php" title=Bio"">BIO</a></li>
    <li><a href="mylea.php" title="Mylea" class="current">MYLEA</a></li>
    <li><a href="books.php" title="Books">BOOKS</a></li>
    <li><a href="media.php" title="Media">MEDIA</a></li>
    <li><a href="contact.php" title="Contact">CONTACT</a></li>

    </ul></div>

  • #2
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    purplerose, try editing the margin in your .wrapper class as such:

    .wrapper {
    margin:0 auto 30px auto;
    width: 642px;
    height: 30px;
    position: relative;
    background-color: #000000;

    }

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,597
    Thanks
    23
    Thanked 646 Times in 645 Posts
    The is not your lucky day, because I am going critique your CSS. But first please answer me this. Why do you use position:relative;? It is becoming the thing that most first timers here use, and when I ask, they never answer. Please answer even if the answer is "I saw it somewhere it looked cool and I want to look cool so I use --- I use it a lot!"

    Why do you use it? It is not needed here at all.


    You have your back ground color as black and your text color as black. Can't see 'em.
    So starting at the top selector and working down:
    class wrapper selector: get rid of position: relative; and background-color: #000000;

    ul#saturday:
    get rid of
    width:auto; You might want to do a width at sometime in the future but 100% is not the way to do it. List have spaces on the left for the dots or images if added.
    position:relative; because it's use here is bunkum.
    display:block; This is the default, why rewrite it and use download bits?
    height:36px; Doesn't add to this at present.
    background: because we can't see it. It's on your computer so lets just supress it for now.
    border top and bottom -- We will add that to the div that holds the list.

    ul#saturday li a:
    display:block;
    float:left; Both talked about above.
    height:24px; ????????
    padding:12px 20px 0 20px; We will added that to the LI because the <a> is inside of it.
    background Same as above.

    THIS:
    ul#saturday li a.current, ul#saturday li a.current:hover

    What ever you did to a.current is done and a.current:hover wont change it.
    Why do you want a.current different then the other LIs?

    OK, now to centering the menu.
    First give wrapper a width that encloses the list.
    width: 466px;

    Then center it.
    margin: 0 auto 30px auto;


    The menu:
    Code:
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta charset="UTF-8" />
    <title>Title of the document</title>
    <style type="text/css">
    .wrapper {
    //width: 642px;
    width: 466px;
    	height: 30px;
    //position: relative;
    //margin-bottom: 30px;
    margin: 0 auto 30px auto;
    //background-color: #000000;
    border-bottom:4px solid #000000;
    border-top:1px solid #000000;
    }
    
    ul#saturday {
            margin:0;
            padding:0;
    	list-style-type:none;
    //width:auto;
    //position:relative;
    //display:block;
    //height:36px;
    	text-transform:uppercase;
    	font-size:12px;
    	font-weight:bold;
    //background:transparent url("http://www.codingforums.com/images/bgOFF.gif") repeat-x top left;
    	font-family:Helvetica,Arial,Verdana,sans-serif;
    //border-bottom:4px solid #000000;
    //border-top:1px solid #000000;
    }
    
    ul#saturday li {
    	display:block;
    	float:left;
    //margin:0;
    //padding:0;
    margin: 12px 20px 0 20px;
    }
    
    ul#saturday li a {
    //display:block;
    //float:left;
    	color:#000000;
    	text-decoration:none;
    //padding:12px 20px 0 20px;
    //height:24px;
    //background:transparent url("http://www.codingforums.com/images/bgDIVIDER.gif") no-repeat top right;
    }
    /*
    ul#saturday li a:hover {
    background:transparent url("http://www.codingforums.com/images/1.jpg") no-repeat top right;
    }
    
    ul#saturday li a.current, ul#saturday li a.current:hover {
    color: red; //#ffffff;
    background:transparent url("http://www.codingforums.com/images/1.gif") no-repeat top right;
    }*/
    </style>
    </head>
    
    <body>
    <div class="wrapper">
    <ul id="saturday">
    	<li><a href="index.php" title="Home">HOME</a></li>
    	<li><a href="bio.php" title=Bio"">BIO</a></li>
    	<li><a href="mylea.php" title="Mylea" class="current">MYLEA</a></li>
    	<li><a href="books.php" title="Books">BOOKS</a></li>
    	<li><a href="media.php" title="Media">MEDIA</a></li>
    	<li><a href="contact.php" title="Contact">CONTACT</a></li>
    </ul>
    </div>
    </body>
    </html>
    Last edited by sunfighter; 08-13-2014 at 10:18 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New Coder
    Join Date
    Sep 2006
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sunfighter, the wrapper code was part of the code that another person on here helped write for me when I was first setting up the site back in April..his name is Coothead and frankly he bailed my butt out big time...so technically I didn't write the relative...as for the menu code, as I stated in original post, it was a menu with code that I downloaded from a free menu site...again, not my code...I am still learning, have loads and loads to learn, and maybe someday I will know it well enough to pay it forward and help somebody else on here...thank you so much for the assistance and the lesson..gonna go implement the code now and see how it looks

  • #5
    New Coder
    Join Date
    Sep 2006
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    neither suggested fix worked...here is the URL for the website Author: Philip C Elrod

    the first suggestion changed nothing, the second one made my menu disappear completely..I have now returned the code to where I started

  • #6
    New Coder
    Join Date
    Sep 2006
    Posts
    24
    Thanks
    2
    Thanked 0 Times in 0 Posts
    solved my problem by just expanding the titles of my links....thanks for the help everyone !!

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,597
    Thanks
    23
    Thanked 646 Times in 645 Posts
    @purplerose,
    What I gave you does work. BUT it seems you took that code and inserted it into a html page without regard to other CSS or HTML code. What did you expect? If you want a section of html fixed send us a link to that page next time and we'll code so it works in the final page.

    Glad to see the problem is solved for you.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

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