0

I am trying to position my navbar to the top-center of my website, but I can't get rid of the small spaces between my buttons.
I tried many different CSS properties, but without success.

Also, my inside the navbar is not at the very center, but a little bit to the right?
How come?

Finally, I added some media queries at the bottom and they also have some unwanted space on the left.
Plus, they are not really centered in the very middle.

Here is my JSFiddle: http://jsfiddle.net/RHSab/96/

<header>
    <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#" id="#logo"><img class="topleftlogo" src="images/logo.png"/></a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</header>
Christian Heinrichs
  • 786
  • 1
  • 9
  • 28
C. Felipe
  • 469
  • 2
  • 9
  • 22
  • 1
    if this is a navbar, the appropriate html5 container element is ` – Spudley Aug 05 '13 at 12:25
  • 1
    See the duplicate for details on the spacing inbetween. For the centering issue, it is because there is padding on the `ul`. Try adding `padding-left:0px;` for the `ul`. – Kami Aug 05 '13 at 12:26
  • Thanks! Padding-left works well, now I just need to fix those unwanted spaces in between buttons. – C. Felipe Aug 05 '13 at 12:29
  • for fix unwanted spaces, remove this : `display:inline` from `header ul li` and add `float:left; list-style:none;` – artSx Aug 05 '13 at 12:31
  • @artSX: Spaces are gone but now my buttons are not centered, they are all position t the left – C. Felipe Aug 05 '13 at 12:34
  • @C.Felipe arf sorry, with the float:left; you cant center ul if you dont put width on
      but we have one a very academic approach to this problem space, try this => on `header ul li {margin-left:-4px;}`
     – artSx Aug 05 '13 at 12:38
  • I solved spaces with a suggestion bellow but now I have just one small space at the bottom??? http://jsfiddle.net/RHSab/110/ – C. Felipe Aug 05 '13 at 12:43

2 Answers2

2

you need to add css on ul 

ul {
   padding-left: 0;
}

header ul li {
   display: block;
   width: 100%;
}

header a {
   padding: 0;
   height: 30px;
   color: white;
   background: rgba(0,0,0,0.1);
   height: 60px;
   font-family: 'Roboto Slab', serif;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 2px;
   font-weight: 700;
}

It will center on its own.

Amb
  • 3,343
  • 7
  • 27
  • 34
1

header{text-align: center;}
header ul{
display: inline-block;
overflow: hidden;
}
header ul li{float: left;}

Anon
  • 2,854
  • 14
  • 18
  • Almost perfect. What's the new unwanted space below??? http://jsfiddle.net/RHSab/108/ – C. Felipe Aug 05 '13 at 12:37
  • 1
    header ul{vertical-align:top;} – Anon Aug 05 '13 at 12:42
  • Why does the text on my navbar is not centered when I resize my browser to @media screen and (min-width: 481px) and (max-width : 768px) – C. Felipe Aug 05 '13 at 12:47
  • 1
    you have one line with `header ul li { width: 768px; }` remove 768px and add 100% – artSx Aug 05 '13 at 12:52
  • Thanks a lot! Appreciate your kindness very much. And the patience with beginners. You helped me a lot as I was cracking my head with this since yesterday... – C. Felipe Aug 05 '13 at 12:54