Jak zostało zrobione to menu?

[Moody]

http://browsershots.org/

Na tej stronie zastanawia mnie technika wykonania górnego menu. Widzę, że to jest lista ul itd.

Czy span jest dozwolone w elemencie <a>?

I jak zrobili to, że tło przycisku jest dostosowane pod tekst. A nie, że każdy ma taką samą szerokość.

[Heyek]

Cześć, przeanalizuj sobie ich CSS'a

Kod:

.menu ul li a:hover, .menu ul li.active a {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://browsershots.org/static/images/bg.png");
background-origin: padding-box;
background-position: 100% -142px;
background-repeat: no-repeat;
background-size: auto;
text-decoration: none;
}

.menu ul li a:hover, .menu ul li.active a {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://browsershots.org/static/images/bg.png");
background-origin: padding-box;
background-position: 100% -142px;
background-repeat: no-repeat;
background-size: auto;
text-decoration: none;
}

.menu ul li a {
display: inline-block;
padding-right: 4px;
}

[Moody]

Myślisz,ze gdybym przeanalizował kod i by mi się udało dodałbym ten temat?
Próbowałem to rozgryźć,ale nie udało mi się.
Wiem,ze jest użyty tylko jeden plik graficzny do tego czyli tzw sprite.

Ale jak to zrobil,bo są jakby 3 części. Środkowa prostakątna oraz lewa i prawa która jakby nadpisuje lewa i prawa cześć prostokąta i przez to są zaokrąglenia.

[Kartofelek]

Przykład zastosowania:

Kod:

<a href="">
   <span>
        Lorem ipsum
   </span>
</a>

Link ma w tym przypadku tło zajmujące powiedzmy 100%, a span tło niepowtarzalne ustawione na prawo. Tło spanu jest tym końcowym zaokrągleniem które jakby zakrywa tło A które jest pod spanem.
UŻYWAJCIE FIREBUGA. Przecież badając elementy dokładnie widać co tam się dzieje. Nawet macie podświetlane paddingi itp.

Chociaż takie rzeczy spokojnie da się zrobić w css3

[Moody]

Użyłem Firebug'a ale jakoś nie mogłem tego zczaić. No dobra. A co z początkiem elementu? bo ja sądziłem, że na ten przycisk składa się z trzech elementów. Lewego, srodkowego, prawego. Tymczasem powiedziałem mi tylko o prawym i o środkowym.

W dodatku z tego co widzę w Firebug. To element span ma tło odpowiadające ze lewą krwędź. A link z srodek i prawą część? Tak?

[Moody]

Nie, nie interesuje mnie konkretny problem. Inaczej prosiłbym o wskazówki czy da się inaczej. Ale po prostu chcę nauczyć się jak najwięcej więc każdą metodę wolę znać, bo każda ma jakieś swoje wady i zalety.
Poza tym kod wyżej nie ma gradientu (Choć pewnie da się to ustawić w css3 również - ciekawe jak z obsługą w przeglądarkach)

Kartofelek, zauważyłem, że to menu na tej stronie ma wadę, ponieważ nie jest tak na prawdę dostosowujące się w 100%. Dla przycisków z napisem krótkim ok. Ale jak napiszemy zdanie z 3 wyrazów to już nie zadziała, bo obrazek jest za krótki (wiem, że w menu nikt nie będzie miał tak długiego przycisku, natomiast chcę to wszystko pojąć i wiedzieć co i jak działa)

[Kartofelek]

Ale tak to się robi. Musisz brać po prostu teoretyczny max z którego się nie wychodzi. Menu zrobione jest na bazie 2 elementów. Jeden lewy na tło, drugi jako zaokrąglenie na prawo.
Tutaj w połowie masz o tym:
http://doman.art.pl/kursjs/kurs/jquery/tabs.html

[Moody]

Nie no już zrozumiałem. Wiem o co chodzi. To nie lepsza jest metoda (pomijając CSS3) tak by składała się z 3 części? lewa, środkowa i prawa? Przez co możemy mieć jakkolwiek długi tekst w środku.

[Kartofelek]

Jak ci się tam chce. Jest wiele metod.
Już kiedyś było to poruszane. Osobiście np lubię metodę na position:relative i position:absolute (LI ma position:relative, a te boczne pierdołki position:absolute

[Moody]

Nie, że mi zależy. Po prostu chciałem dowiedzieć się jak tamto menu zostało wykonane. Po czym wymieniłem tylko jej wady i zalety.
Umiałbym zrobić takie menu, które wyżej podałeś. Także spokojnie. Ja nie zakładałem tematu by ktoś mi wklejał kod i próbował zrobić za mnie. Chciałem tylko poruszyć temat, wymienić zdania, spostrzeżenia.