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
    Feb 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centering CSS Menu buttons

    Hey everyone,

    I would like to center buttons on a CSS based menu instead of them being aligned to the left. I tried changing the "float:left;" with no luck.

    Thanks,
    patchkinz

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    you can try text-align:center;

    if that doesn't work make the parent

    Code:
    text-align:center;
    and the children

    Code:
    margin-left:auto;margin-right:auto;
    That's just an example if you post your code i can help you apply it
    You can not say you know how to do something, until you can teach it to someone else.

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by timgolding View Post
    you can try text-align:center;

    if that doesn't work make the parent

    Code:
    text-align:center;
    and the children

    Code:
    margin-left:auto;margin-right:auto;
    That's just an example if you post your code i can help you apply it
    Thank you!

    I am fairly new to CSS.

    Here's my code:

    Code:
    .blue #slatenav
    {
    position:relative;
    display:block;
    height:42px;
    font-size:13px;
    font-weight:bold;
    background:transparent url(images/blueslate_background.gif) repeat-x top left;
    font-family:Times New Roman,Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;
    }
    
    .blue #slatenav ul
    {
    margin:0px;padding:0;
    list-style-type:none;
    width:auto;
    }
    
    .blue #slatenav ul li
    {
    display:block;
    float:left;margin:0 1px 0 0;
    }
    
    .blue #slatenav ul li a
    {
    display:block;
    float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;
    }
    
    .blue #slatenav ul li a:hover
    {
    text-decoration: underline;
    }
    
    .blue #slatenav ul li a.current
    {
    color:#fff;background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;
    }
    HTML:

    Code:
    <div class="blue">
        <div id="slatenav">
    	<ul>
    	<li><a href="" title="" class="current">Home</a></li>
    	<li><a href="" title="">About Us</a></li>
    	<li><a href="" title="">Services</a></li>
    	<li><a href="" title="">Our Work</a></li>
    	<li><a href="" title="">Contact Us</a></li>
    	</ul>
        </div>
      </div>
    Thank you for the help,
    patchkinz

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello patchkinz,
    To center something you need 3 things:
    1. a DocType
    2. an element with a width
    3. left and right margins of that element set to auto


    Give your ul a width and set it's margins to margin:0 auto;

    This ul menu of unknown width is centered by % -
    http://nopeople.com/CSS/menu-h_centered-ul/index.html - view the source to see how.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,519
    Thanks
    114
    Thanked 110 Times in 109 Posts
    I've looked at your example and am wondering is it really centering you are after. Or maybe just having them evenly spaced out. Something like this
    http://www.sovavsiti.cz/css/horizontal_menu.html
    You can not say you know how to do something, until you can teach it to someone else.

  • #6
    New Coder
    Join Date
    Feb 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by timgolding View Post
    I've looked at your example and am wondering is it really centering you are after. Or maybe just having them evenly spaced out. Something like this
    http://www.sovavsiti.cz/css/horizontal_menu.html
    the second one on their, Variable padding, would be great.

    If you could add that in my code i'd really appreciate that.

    patchkinz

  • #7
    New Coder
    Join Date
    Feb 2009
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello patchkinz,
    To center something you need 3 things:
    1. a DocType
    2. an element with a width
    3. left and right margins of that element set to auto


    Give your ul a width and set it's margins to margin:0 auto;

    This ul menu of unknown width is centered by % -
    http://nopeople.com/CSS/menu-h_centered-ul/index.html - view the source to see how.
    I have a DocType, I just added the HTML for the menu.

    Thanks for your help,
    patchkinz


  •  

    Posting Permissions

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