How to handle horizontally uneven navigation in CSS?


Tags: css

Problem :

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!



Solution :

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;
    ...
}

    CSS Howto..

    Make converted joomla template show 2 colums in main content

    How can I stop an CSS animation from interfering with a CSS transform transition?

    How can I get jQuery to toggle a class with fadeToggle?

    How to specify a more specific styling with .css.scss?

    How to get css button to stay active after it has been clicked?

    How to apply a class on
  • when mouse is hovering on it?
  • How to center a rotated div inside a table element with a specific width?

    HTML/CSS: How to achieve the following center-left alignment?

    how to write a desktop application which uses HTML and CSS for user interface and python/perl/c++/java for the processing?

    How to prioritize a CSS class?

    How to make commandeButon to vertical align?

    image carousel showing all images

    how to hidden image over image in css

    How can I style a disabled button in a Windows 8 JavaScript app?

    How to change element CSS class when different part of web page is present?

    how to redirect page

    How do I add line-height to a