Let's change our bitmap slightly so the bottom part does not have countours. This will look better for horizontal tabs.
We also modify the style to make <li> appears as inline (so they will be positioned next to each other instead stacked vertically), as well as setting it to float to the left.
li.menu3 {
list-style-type: none;
display: inline;
padding: 0px;
float: left;
}
a.menu3{
color:black;
padding: 0px;
border: 0px;
text-decoration:none;
background-image: url(images/tab.png);
text-align:center;
display:block;
font-family:Arial, Helvetica, sans-serif;
line-height:25px;
font-size:10px;
text-decoration:none;
}
a.menu3:hover{
color:white;
background-image: url(images/tabHighlight.png);
}
The result is like below:
Screenshot:
On your browser:
This is closer to what we want except the width of the <a> element is cropped just enough to fit the text. (This effect can be used to make liquid menu that resize depending on the text-length, but we won't go into that at this time.)
There are several ways to solve this. One is to set the dimensions explicitly (to match the dimensions of the image) like below:
a.menu4{
color:black;
padding: 0px;
border: 0px;
text-decoration:none;
background-image: url(images/tab.png);
text-align:center;
display:block;
font-family:Arial, Helvetica, sans-serif;
line-height:25px;
font-size:10px;
width: 118px;
height:25px;
text-decoration:none;
}
Another approach is to insert a parent element outside the <a> with the same dimensions as the image.
div.menu
{
width: 118px;
height: 25px;
display: inline;
float: left;
clear:left;
}
So the html becomes like this:
<ul>
<li class="menu3">
<div class="menu"><a class="menu3" href="page1.html">Menu Item 1</a></div>
</li>
<li class="menu3">
<div class="menu"><a class="menu3" href="page2.html">Menu Item 2</a></div>
</li>
<li class="menu3">
<div class="menu"><a class="menu3" href="page3.html">Menu Item 3</a></div>
</li>
<li class="menu3">
<div class="menu"><a class="menu3" href="page4.html">Menu Item 4</a></div>
</li>
</ul>
And the result is this:
This concludes the tutorial.