CODEWITHSUNDEEP
htmlcss
user3442845
user3442845

Reputation: 17

Can't position navbar properly

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

Upvotes: 0

Views: 68

Answers (5)

user2579857
user2579857

Reputation:

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.

Upvotes: 0

Mattos
Mattos

Reputation: 447

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.

Upvotes: 0

Oriol
Oriol

Reputation: 288120

Try this:

nav {
    text-align: center;
}
nav > ul {
    display: inline-block;
}
nav > ul:first-child {
    float: left;
}
nav > ul:last-child {
    float: right;
}

Upvotes: 1

James
James

Reputation: 4580

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
}

Upvotes: 0

Oriol
Oriol

Reputation: 288120

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).

Upvotes: 0

Related Questions