Web Analytics Made Easy -
StatCounter Centering CSS Menu buttons - CodingForum

Announcement

Collapse
No announcement yet.

Centering CSS Menu buttons

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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.

    Comment


    • #3
      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

      Comment


      • #4
        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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

        Comment


        • #5
          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.

          Comment


          • #6
            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

            Comment


            • #7
              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

              Comment

              Working...
              X