You are reading...

February 3rd

As you can see, I use display:inline-block on everything. It’s like nutella. I’ve already showcased the jQuery effect for the navigation, but I didn’t show the actual HTML/CSS, so here it is. There has been a flare up in the tables vs. css debate, I just like to show everyone that not all of us doing CSS like to torture ourselves.

The markup.

<ul id="nav">
<li class="active"><a id="nav_home" href="/">Home</a></li>
<li><a id="nav_archives" href="/archives">Archives</a></li>
<li><a id="nav_contact" href="mailto:saikit@areyoudesign.com">Contact</a></li>
</ul>

The markup in WordPress

<ul id="nav">
<li class="<?php if(is_home()) {?> active
<?php } else {} ?>"><a id="nav_home" href="<?php echo get_option('home'); ?>/">
Home</a></li>
<li class="<?php if(is_page('archives')) {?> active
<?php } else {} ?>"><a id="nav_archives" href="<?php echo get_option('home'); ?>
/archives">Archives</a></li>
<li><a id="nav_contact" href="mailto:saikit@areyoudesign.com">Contact</a></li>
</ul>

The CSS

#nav {
width:500px;
margin:0;
padding:0 0 0 25px;
list-style:none;
display:inline-block;
vertical-align:middle;
}

#nav li {
display:inline-block;
}

#nav li a, #nav li a span {
background-image:url(images/navigation.gif);
background-repeat:no-repeat;
height:57px;
display:block;
text-indent:-9999px;
}

#nav_home {
width:112px;
padding:0 27px 0 0;
}

.hover #nav_home:hover, #nav li.active #nav_home, #nav_home span {
background-position:0 -57px;
}

#nav_archives {
width:174px;
background-position:-139px 0;
padding:0 14px 0 0;
}

.hover #nav_archives:hover,  #nav li.active #nav_archives, #nav_archives span {
background-position:-139px -57px;
}

#nav_contact {
width:163px;
background-position:-327px 0;
}

This isn’t a new technique. I learned it from here. With inline-block, you could use the vertical-alignment property, which is relative to the line-height of the tallest sibling element. In this case, the navigation is vertical alignment of the navigation is relative to the logo. I used vertical-align:middle, but you could also plug a percentage or length (relative to the bottom of the tallest sibling element) and align it anywhere.

Unfortunately, in every browser there is a gap between inline-blocks around 4px. The only way to get rid of it is to float it. Well, you can have fun with that. I’m not crazy about pixel perfect layouts, so it’s an acceptable problem.

Hopefully, this technique will make your development projects more painless.

Go home