[HTML][CSS]Proste menu z efektem a'la rollover, Jak uzyskać efekt zaokrąglonego rogu ? Opcje

[Bureau]

Witam.
Mój problem dotyczy kodowania, ponieważ jestem grafikiem, który czasem w kodowaniu jest upośledzony (IMG:style_emoticons/default/tongue.gif)

Wykonałem menu, które prezentuje się następująco:
(IMG:http://img26.imageshack.us/img26/7025/menuzj.jpg)

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:
(IMG:http://img651.imageshack.us/img651/3064/menu2y.jpg)

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ś ? (IMG:style_emoticons/default/smile.gif) Zapraszam do dyskusji (IMG:style_emoticons/default/wink.gif)

Pozdrawiam (IMG:style_emoticons/default/smile.gif)

[crocodillo]

css3: border-radius

możesz też przy pomocy background-image

[Bureau]

No to tak krótko mówiąc (IMG:style_emoticons/default/biggrin.gif)
Jednak chcialem sie dowiedziec gdzie dać ten atrybut.

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

Kod

li a:hover { width:100px; height:100px; background-image:url(images/przycisk.jpg); }

Czy jak to dokładnie (IMG:style_emoticons/default/biggrin.gif)

[crocodillo]

No to tak krótko mówiąc (IMG:style_emoticons/default/biggrin.gif)
Jednak chcialem sie dowiedziec gdzie dać ten atrybut.

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>).

[Bureau]

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

(IMG:http://img189.imageshack.us/img189/4958/menutestg.jpg)

Problem tkwi w tym że nie wiem jak to rozszerzyć, ponieważ gdy dam wartości padding to rozwala całe menu po najechaniu (IMG:style_emoticons/default/tongue.gif)

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

Kod

ul, li {
    display:inline;
    float:left;
    padding:11px 8px 5px 8px;
}
.menu a {
    display:inline;
    text-decoration:none;
    color:#979797;
    font-weight:bold;
}
.menu a:hover{
    display:inline;
    -moz-border-radius: 15px;
    border-radius: 15px;
    background-color:#fff;    
    color:#1e1e1e;
    font-weight:bold;
}

[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 ?

Ten post edytował Bureau 18.03.2012, 14:20:40

[crocodillo]

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

[Bureau]

Dziękuje Ci bardzo (IMG:style_emoticons/default/smile.gif) Menu działa perfekcyjnie (IMG:style_emoticons/default/smile.gif)
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 ? (IMG:style_emoticons/default/smile.gif)

[crocodillo]

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