Menu graficzne! Proszę o pomoc

[Hymir]

Witam serdecznie.
Chciałbym uzyskać pomoc w tworzeniu menu graficznego.
Podczas przeglądania forum nie znalazłem konkretnej odpowiedzi.
Jedynym postem, który był najbliżej mojego problemu jest ten post.
http://forum.joomla.pl/showthread.php?t=14069

O taką stronkę jaką autor podaje jako przykład (podobny układ) mniej więcej mi chodzi.
W treści tamtego posta autor podaje treści plików css i php jednak linki do tych materiałów są nieaktywne.

Proszę o wyjaśnienie jak takie menu graficzne zrobić.
To znaczy jak stworzyć menu z grafik np w jpg

[Bazyl]

Dużą grafikę tniesz na mniejsze kawałki.
Kawałki ustawiasz jako tło dla poszczególnych pozycji menu.
Pozycje menu mają wielkość odpowiadającą kawałkom grafiki - to w pliku css.

[Hymir]

Prosiłbym w miarę możliwości o rozpisanie krok po kroku - jak taką operację należy przeprowadzić. Myślę, że byłoby to również przydatne dla innych ponieważ na różnych stronach znalazłem rozpoczęty ten temat ale nigdzie nie jest on wyczerpany.
Z góry dziękuję za poświęcony czas.

[malkowitch]

Cięcie obrazka nie ma sensu!
Podam Ci przykład jak ja zrobiłem menu graficzne:

Plik graficzny:
http://www.auto-boss.net/templates/a...mages/menu.png

Ja obrazy najechane ustawiłem z boku. A wygodniej i szybciej było by je umieścić pod spodem.

CSS:

.menu li {
    float: left;
    list-style: none;
    margin-top: 14px;
    text-indent:-1999px
}
.menu li a {
    display: block;
    background: url('../images/menu.png');
    height: 33px;
}
.menu .item1 a, .menu .item1 a:visited  {
    width: 135px;
}
.menu .item1 a:hover, .menu .item1 a:active, .menu .item1#current a  {
    background-position: -124px 0px;
}
.menu .item2 a, .menu .item2 a:visited  {
    width: 85px;
    background-position: -259px 0px;
}
.menu .item2 a:hover, .menu .item2 a:active, .menu #current.item2 a  {
    background-position: -344px 0px;
}
.menu .item3 a, .menu .item3 a:visited  {
    width: 71px;
    background-position: -429px 0px;
}
.menu .item3 a:hover, .menu .item3 a:active, .menu #current.item3 a  {
    background-position: -500px 0px;
}
.menu .item4 a, .menu .item4 a:visited  {
    width: 156px;
    background-position: -571px 0px;
}
.menu .item4 a:hover, .menu .item4 a:active, .menu #current.item4 a  {
    background-position: -727px 0px;
}
.menu .item5 a, .menu .item5 a:visited  {
    width: 74px;
    background-position: -883px 0px;
}
.menu .item5 a:hover, .menu .item5 a:active, .menu #current.item5 a  {
    background-position: -957px 0px;
}
.menu .item6 a, .menu .item6 a:visited  {
    width: 75px;
    background-position: -1031px 0px;
}
.menu .item6 a:hover, .menu .item6 a:active, .menu #current.item6 a  {
    background-position: -1106px 0px;
}
.menu ul {
    display: none;
}

Gotowe wygląda tak: www.auto-boss.net

Jeśli ktoś nie wie dlaczego korzystałem z background-position to wyjaśniam, że im więcej plików do załadowania tym wolniej będzie ładowała się i chodziła strona. A tak masz mało kodu CSS, mało zapytań i mały plik w zależności od rodzaju kompresji.

Jeśli ktoś ma jeszcze pytania co do kodu to odsyłam do referencji CSS, oraz do zapoznania się z tzw. "sprites" (nie ma chyba na forum)