CSS Help

by 7 replies
8
Hi, I'm trying to center my menu for the website I'm building, but I can't seem to get the CSS code right to get it to center here is the code.

.menu{margin:50px; padding:50px; height:30px; width:100%; display:block;}
.menu li{padding:0; margin:0; list-style:none; display:inline; text-align:center;}
.menu li a{float:left; padding-left:15px; display:block; color:#FFE099); text-decoration:none; font:14px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; }
.menu li a span{text-align:center; line-height:30px; float:left; display:block; padding-right:15px; }
.ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#website design #css
  • Another method is to set width and use margin: 0px auto;
  • Thanks for the reply. I'm very new to this so if you could go in to detail about what I'm doing wrong / how setting the width and using margin: 0px auto; works I would really appreciate it
    • [1] reply
  • Matt you need to post the HTML as well. And is .ul a class on a <ul> or is that a mistake and you want to refer to the actual element (in which case remove the period before it)?

    Assuming .ul is the class on the <ul>, try this:

    .ul {
    width: 400px; /* set this to the width you need */
    margin: 0 auto;
    text-align: center;
    }
  • Thanks for the replies. Here is the html.
    <ul class="menu">
    <li><a href="/home" class="active"><span>Home</span></a></li>
    <li><a href="Ex"><span>Ex</span></a></li>
    <li><a href="Ex"><span>Ex</span></a></li>
    <li><a href="Ex"><span>Ex</span></a></li>
    <li><a href="Ex"><span>Ex</span></a></li>
    <li><a href="Ex"><span>Ex</span></a></li>
    </ul>
  • By default the unordered list will span the complete page or container. Put the list in a div, set the width and center the div.
    • [ 1 ] Thanks
  • Create a div for navigation if is standart html, (if its html 5 just put the nav tag). Inside put the ul, and in the css file put this to your div :

    html:
    <div class="nav"> here you ul</div>


    css:
    div .nav{margin:0 auto;
    }
    • [ 1 ] Thanks
Join the discussion

Next Topics on Trending Feed

  • 8

    CSS Help

    Hi, I'm trying to center my menu for the website I'm building, but I can't seem to get the CSS code right to get it to center here is the code. .menu{margin:50px; padding:50px; height:30px; width:100%; display:block;}