8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

CSS Help

by Matt Braun
7 replies
  • WEB DESIGN
    • |
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;
}
#css
  • Profile picture of the author lovenot
    Another method is to set width and use margin: 0px auto;
    {{ DiscussionBoard.errors[4581317].message }}
  • Profile picture of the author Matt Braun
    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
    {{ DiscussionBoard.errors[4581360].message }}
  • Profile picture of the author transparentb
    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;
    }
    {{ DiscussionBoard.errors[4581376].message }}
  • Profile picture of the author Matt Braun
    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>
    {{ DiscussionBoard.errors[4581851].message }}
  • Profile picture of the author neil_patmore
    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.
    Signature

    {{ DiscussionBoard.errors[4584948].message }}
  • Profile picture of the author IMAnthony
    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;
    }
    Signature
    PAY ATTENTION TO THIS!!



    Are You Ready to Make Money? ----->How I Made $2000 USING LINKEDIN!
    {{ DiscussionBoard.errors[4590624].message }}

Trending Topics