Forum PHP.pl

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

[CSS] pobierz, plaintext 
.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;}
[CSS] pobierz, plaintext 

- w css ustawisz szerokość taką jaką ma grafika i left czyli przesunięciu wobec elementu sąsiadującego po lewej (jest to jego szerokość)

[CSS] pobierz, plaintext 
#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;}
[CSS] pobierz, plaintext 

Struktura przykładowego menu:

[HTML] pobierz, plaintext 
<div class="tabs">
                <ul class="navigation">
    <li class="active">
        <a id="menu-m1" title="Strona główna" class="menu_start" href="#tab-1">Strona główna</a>
    </li>
    <li>
        <a id="menu-m2" title="Najbliższe terminy" class="menu_start" href="#tab-2">Najbliższe terminy</a>
    </li>
    <li>
        <a id="menu-m3" title="O nas" class="menu_start" href="#tab-3">O nas</a>
    </li>
    <li>
        <a id="menu-m4" title="Kontakt" class="menu_start" href="#tab-4">Kontakt</a>
    </li>
    <li>
        <a id="menu-m5" title="Kariera" class="menu_start" href="#tab-5">Kariera</a>
    </li>
 
</ul>            
 
 
</div>
[HTML] pobierz, plaintext