Witam.
Mój problem dotyczy kodowania, ponieważ jestem grafikiem, który czasem w kodowaniu jest upośledzony

Wykonałem menu, które prezentuje się następująco:


Potrafię to pociąć, ułożyć w HTML/CSS poprzez:

[HTML] pobierz, plaintext 
<ul><li></li></ul>
[HTML] pobierz, plaintext 

*oczywiście odpowiednio dobierając style do tychże znaczników.

Wszystko wygląda ładnie, pięknie. Menu działa. Jednakże problem tkwi w hover.

Jak musiałbym zmodyfikować swój kod, aby uzyskać efekt takiego menu:


Najbardziej zastanawia mnie jak zrobić zaokrąglone rogi bez użycia CSS3.
W ostateczności mógłbym użyć CSS3.

Pomógłby mi ktoś ? Zapraszam do dyskusji

Pozdrawiam

css3: border-radius

możesz też przy pomocy background-image

No to tak krótko mówiąc
Jednak chcialem sie dowiedziec gdzie dać ten atrybut.

nie chce zeby caly przycisk mi sie zmieniał. Mam zrobić klase

Czy jak to dokładnie

Dokładnie to Ci nie powiem, bo moja magiczna kula właśnie service packa ściąga, ale tak ogólniej to dajesz to do elementu, który chcesz zmienić (nie musi być koniecznie <a>).

Wstawiam to co zrobiłem (w css3 narazie).
Menu przedstawia się w htmlu następująco:



Problem tkwi w tym że nie wiem jak to rozszerzyć, ponieważ gdy dam wartości padding to rozwala całe menu po najechaniu

Mój kod HTML/CSS jaki tam zastosowałem na szybko (skupmy się tylko na pierwszym linku START):

[HTML] pobierz, plaintext 
<div class="grid_5 omega" id="menu">
 
        <ul>
        	<li class="menu"><a href="#">Start</a></li>
            <li>Portfolio</li>
            <li>Oferta</li>
            <li>Kontakt</li>
        </ul>
 
        </div>
[HTML] pobierz, plaintext 

Da się to jakoś zrobić by było jak na powyższym przykładzie z 1 postu ?

ustaw padding dla .menu a, wtedy nie będzie Ci się zmieniała wielkość przy najechaniu

Dziękuje Ci bardzo Menu działa perfekcyjnie
Ale to jest jeśli chodzi o CSS3.

Teraz jakbym to chciał zrobić w CSS2 to ?

Mowiles o background-image. No rozumiem jak to działa, ale z zaokraglonymi rogami pierwsza droga jaka pomyslalem jest do kazdego linka przypisać nowy obrazek w h:over, bo nie kazdy napis jest równej długości.

Widziałem że ludzie jakoś to kiedyś określali position'em czy cos...
Może wiesz coś na ten temat ?

Różnie to można zrobić, możesz dla każdego ustawić inne tło, możesz też ustalić stałą szerokość dla każdego elementu i wtedy jedno tło, możesz też dodać elementy pomocnicze (przed i za, lewa i prawa strona z zaokrąglonymi rogami). Poszukaj w google: css rounded corners, wiele jest sposobów. Ja osobiście pozostał bym przy css3, tylko ie8- bodajże nie obsługuje