Najłatwiej i najlepiej takie coś zrobić techniką kafelkowania tzw. spriting. Choć to jeszcze zależy czy chesz wprowadzać dynamiczne zmiany wyglądu po najechaniu kursorem czy klinkięciu. W najprostszej formie :
- na grafice wyliczasz sobie szerokości dla każdego elementu menu
- w css tworzysz kontener wyglądający np. tak
Sztuczka z text-indent jest zrobiona pod to żeby Google widział tekst, który nromalnie możesz umieścić w linkach - dobre pod pozycjonowanie
.tabs {
background: url('../images/bookmark.png') repeat-x;
height: 58px;
width: 716px;
margin: 5px 0 0 0;
}
.nb ul{height: 100%; float: left; width: 100%;}
.nb ul li{display: inline; float: left;}
.nb ul li a{height: 31px; display: inline; float: left; text-indent: -2000em;}
- w css ustawisz szerokość taką jaką ma grafika i left czyli przesunięciu wobec elementu sąsiadującego po lewej (jest to jego szerokość)
#menu-m1{left:0; width: 135px;}
#menu-m2{left: 135px; width: 161px;}
#menu-m3{left: 296px; width: 147px;}
#menu-m4{left: 443px; width: 116px;}
#menu-m5{left: 559px; width: 125px;}
#menu-m6{left: 684px; width: 128px;}
#menu-m7{left: 812px; width: 162px;}
Struktura przykładowego menu:
<a id="menu-m1" title="Strona główna" class="menu_start" href="#tab-1">Strona główna
</a> <a id="menu-m2" title="Najbliższe terminy" class="menu_start" href="#tab-2">Najbliższe terminy
</a> <a id="menu-m3" title="O nas" class="menu_start" href="#tab-3">O nas
</a> <a id="menu-m4" title="Kontakt" class="menu_start" href="#tab-4">Kontakt
</a> <a id="menu-m5" title="Kariera" class="menu_start" href="#tab-5">Kariera
</a>