Create a nav bar with HTML vs Photoshop

Question

On my website I want a nav bar. I was thinking of making the background in Photoshop and then using that as the background of the unordered list (with HTML displaying the actual text) for the items in the bar. Is it best to do that or make the text on the items in Photoshop? And if I do it the second way, how do I make it so each different part of the picture is clickable?

Answer 1

Its great your asking the right questions and you are correct in asking them. Use an image as a background by all means, but never put text in as an image where you can avoid it, especially in a menu. The reason for this is two fold one search engines wont read the content and second accessibility screen readers cant read it and users cant zoom in the text via there browsers.

Your mark up could look something like this

.nav{
     background-image:url("bg.jpg");
     background-repeat:no-repeat;
     width:yourwidth;
     height:yourheight;
     display:block;
}
.nav li{
     list-style:none;
     float:left;
     margin-left:20px;
     margin-right:20px;}

markup

<ul class="nav">
    <li><a href="#">Link</a></li>
     <li><a href="#">Link</a></li>
     <li><a href="#">Link</a></li>
</ul>