0

So I want the logo in the middle, and 2 links to the left, 2 links to the right. I've been trying a lot of different things but I can't make all 4 links sit on the same height while also having the logo in the center..

Here's what I got

HTML:

<header>
   <nav>
     <ul>
        <li><a href="smartphones.php">Smartphones</a></li>
        <li><a href="tablets.php">Tablets</a></li>
     </ul>
     <ul>
        <li><img src="logo.png" alt="Logo" height="80" width="80" /></li>
     </ul>       
     <ul>   
        <li><a href="laptops.php">Laptops</a></li>
        <li><a href="desktops.php">Desktops</a></li>    
     </ul>
  </nav>    
</header>

css:

header {
    width: 100%;
    height: 80px;
    background-color: #FFF;
}

nav {
    height:80px;
    width:1000px;
    margin: 0 auto;
}

nav ul {
    width: 33.33%;
    margin:0 auto;
    float: left;
}

nav ul  li{
    display:inline;
}

What that gives is found here http://e2-repair.be/

Edit: Please note that I've tried a lot of things so what I got right now may look pretty dumb or whatever but it's the closest I got so far

user3442845
  • 17
  • 1
  • 5
  • Have you tried to add `
    ` for logo? It seems to look OK (of course their position is not exact - left-center-right)
     –  Mar 20 '14 at 18:33
  • @fiskerXO `
    ` is deprecated. `text-align: center` should be used instead.
     – Oriol Mar 20 '14 at 18:33
  • Same height as the logo you meant? :/ – nCore Mar 20 '14 at 18:34
  • I have, and it puts the logo in the center, but the problem I'm having with this 33% is that I cant put my links closer to my logo, closer than the 33% width that it has. – user3442845 Mar 20 '14 at 18:35
  • Well i thing I know where your problem is. maybe try to eliminate the bottom scroll bar because your image is too large, so your coordinates will be compromised –  Mar 20 '14 at 18:39
  • @fiskerXO I don't think I have a scrollbar, or am I missing something here – user3442845 Mar 20 '14 at 18:41
  • You image with phones is larger. –  Mar 20 '14 at 18:45
  • @fiskerXO the width for the phone image is 600 and the container is 940. I dont see how it could have a scrollbar. Sorry if I'm just being retarded here but I'm just trying to learn – user3442845 Mar 20 '14 at 18:52
  • @fiskerXO I found what you were talking about, it's because I had the 200px margin. Fixed that now – user3442845 Mar 20 '14 at 18:56

5 Answers5

1

Try this:

nav {
    text-align: center;
}
nav > ul {
    display: inline-block;
}
nav > ul:first-child {
    float: left;
}
nav > ul:last-child {
    float: right;
}
Oriol
  • 274,082
  • 63
  • 437
  • 513
0

Try this:

nav:after {
    content: "";
    display: inline-block;
    width: 100%;
}
nav {
    text-align: justify;
}
nav ul {
    display: inline-block;
    vertical-align: middle; /* Or whatever you like: top, bottom, baseline, ... */
}

It's a trick to justify the last line of an element (in this case, the only line).

Community
  • 1
  • 1
Oriol
  • 274,082
  • 63
  • 437
  • 513
0

Try if this helps you

nav {
    text-align:center;
}
nav ul {
    width: 33.33%; //remove this line
    margin: 0; //change margin to 0
    float: left; //remove this line
    display: inline-block;
    vertical-align: middle; // to vertically align in center
}

nav ul  li{
    display:inline-block; // change inline to inline-block
}
James
  • 4,540
  • 1
  • 18
  • 34
  • This did the trick. Could you just briefly explain why it worked though? For educational purposes :) Thanks a lot – user3442845 Mar 20 '14 at 19:05
  • @user3442845 in your styles you tried to specify a `width` and floated it to the `left` so that all the `div`s will stack properly. But when you `float` it to the `left`, the `ul` will take only the `height` of the content. When you make this `inline-block`, it will assign two aspects for the element, one is make them `inline` and the other is `block`(when it is made block it takes the `height` of the parent). Now when all the elements takes the `height` of the parent, you can easily align it vertically as you want – James Mar 20 '14 at 19:16
  • Wow, that's in-depth. Thanks! – user3442845 Mar 20 '14 at 19:39
0

CHECK THIS FIDDLE http://jsfiddle.net/luckmattos/327BL/

  1. I remove couple <ul> and use only one.
  2. Added a class to the <li class="logo">.
  3. Minor changes in the css, check fiddle.
  4. Make sure to adjust the width of the <ul> according to your content.

Hope it helps.

Mattos
  • 447
  • 2
  • 8
0

Well i thing I know where your problem is. maybe try to eliminate the bottom scroll bar because your image is too large, so your coordinates will be compromised.