Edit: here's a jsFiddle: http://jsfiddle.net/7hSny/
I'm trying to position links with an image behind it in CSS. This is a preview of how I like to have it:
preview http://piclair.com/data/odjkf.jpg
The Words Home, Campagne, etc need to be centered in the menu bar. The HTML may be ugly now, I have tried nummerous things but I can't get it positioned properly.
Here's my HTML:
<div id="navigation">
<ul id="nav">
<li><div id="current_page"><p class="navlink"><a href="home.html"><img src="img/Menu_Home_Selected.png"></a></p></div></li>
</ul>
<!-- end of navigation -->
</div>
And here's the CSS:
#navigation{
background-image: url(img/Navbar.png);
background-repeat: no-repeat;
width:955px;
color: #FFF;
float: left;
border:1px solid blue;
}
#current_page {
margin: -22 0 0 0px;
width:164px;
min-height: 124px;
background-image: url(img/Selected.png);
background-repeat: no-repeat;
}
#nav {
min-height: 28px;
margin: 5 0 0 -14px;
}
#nav ul, li {
list-style: none;
}
#nav li {
width:164px;
}
.navlink p (
display: block;
margin: 35 35 35 35px;
}
Right now it looks like this: preview http://piclair.com/data/mdc5z.jpg
There are several things about your markup that could be optimized (as you mentioned, "ugly"). Don't use images where you can use web colors. For image text, put the actual text that the image represents into the html and use background-image for the actual jpg in the css. Vertically centering is not as easy as it should be (unless you're using table cells), but you can use top/bottom padding or line-height in a lot of cases.
Here's a fiddle with a few things updated. Hope this helps.
Also, check out this blog post with various vertical alignment methods. One of these should work for you if mine does not.
