CODEWITHSUNDEEP
css
Dr. Chocolate
Dr. Chocolate

Reputation: 2165

How to handle horizontally uneven navigation in CSS?

I'm redoing a site for a friend and I was wondering what the best practice would be for doing horizontally uneven navigation:

http://www.littlebirddesignstudios.com/

My idea was to just do 4 divs with varying heights but I was wondering how other people would handle this same problem.

Thanks!

Upvotes: 0

Views: 128

Answers (1)

Matt Coughlin
Matt Coughlin

Reputation: 18906

CSS positioning

Ordinarily I'd recommend floating the elements in a horizontal nav bar. But in a case like this, if the navigation area has a fixed height and the content won't change, CSS positioning might be the best fit. That allows you to easily control the exact placement of the nav elements.

Give the nav container position: relative and a fixed height, and give the nav elements position: absolute and set the values for left and top as needed.

JSFiddle Demo

HTML

<ul class="nav">
    <li class="design"><a href="#">Design</a></li>
    <li class="services"><a href="#">Services</a></li>
    <li class="bio"><a href="#">Bio</a></li>
    <li class="contact"><a href="#">Contact</a></li>
</ul>

CSS

.nav {
    position: relative;
    height: 200px;
    ...
}
.nav li {
    position: absolute;
}
.nav li.design   {left: 20px;  top: 40px;}
.nav li.services {left: 160px; top: 50px;}
.nav li.bio      {left: 340px; top: 20px;}
.nav li.contact  {left: 450px; top: 60px;}

.nav li a {
    display: inline-block;
    font-size: 30px;
    line-height: 46px;
    ...
}

Upvotes: 1

Related Questions