How to make a navbar like WikiHow? - html

Question

I would like a navbar like WikiHow with a icon on top and text beneath. I have been taking a look at their code but it seems pretty messy and I think there is easier ways to do it.
CSS
nav ul li{
border-left: 1px solid red;
height: 80px;
position: relative;
display: inline-block;
width: 70px;
}
.nav_icon{
margin-top: 15px;
background: url('inc/icon.png');
}
HTML
<nav>
<ul>
<li><div class="nav_icon"></div>HOME</li>
<li>PICTURES</li>
<li>ABOUT</li>
</ul>
</nav>
Then I created a <div> that I inserted before "HOME" in the first <li> element. I put some padding-top: 15px; on the div to make it go down a bit, but affects the whole <li> elements. I just want the icon to get some margin from the top...
http://jsfiddle.net/JmZbG/1/

Answer 1

By default inline blocks will align based on their text baseline.
Just add vertical-align: top; to the CSS for nav ul li to have them align by their top edge instead.

Answer 2

Here's my version: http://jsfiddle.net/JmZbG/2/
And here's an explanation of the changes:
nav ul li {
border-left: 1px solid red;
height: 80px;
line-height: 80px; /* Center the labels vertically */
float: left; /* Another way of lining up the <li>s horizontally */
display: inline-block;
}
.nav_icon {
display: inline-block; /* Needs to be an inline-block to be inline with the text */
vertical-align: middle; /* This centers the image vertically in it's <li> */
width: 46px; /* Need to define a size for an empty <div>... */
height: 41px; /* ...in order to see the background image */
background-image: url("http://i.imgur.com/mDXvZOZ.jpg");
}