![]() |
![]() ![]() |
![]() |
![]()
Post
#1
|
|
Grupa: Zarejestrowani Postów: 26 Pomógł: 0 Dołączył: 18.03.2012 Ostrzeżenie: (0%) ![]() ![]() |
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: *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ś ? ![]() ![]() Pozdrawiam ![]() |
|
|
![]()
Post
#2
|
|
Grupa: Zarejestrowani Postów: 215 Pomógł: 44 Dołączył: 31.07.2011 Skąd: wrocław Ostrzeżenie: (0%) ![]() ![]() |
css3: border-radius
możesz też przy pomocy background-image |
|
|
![]()
Post
#3
|
|
Grupa: Zarejestrowani Postów: 26 Pomógł: 0 Dołączył: 18.03.2012 Ostrzeżenie: (0%) ![]() ![]() |
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 Kod li a:hover { width:100px; height:100px; background-image:url(images/przycisk.jpg); } Czy jak to dokładnie ![]() |
|
|
![]()
Post
#4
|
|
Grupa: Zarejestrowani Postów: 215 Pomógł: 44 Dołączył: 31.07.2011 Skąd: wrocław Ostrzeżenie: (0%) ![]() ![]() |
|
|
|
![]()
Post
#5
|
|
Grupa: Zarejestrowani Postów: 26 Pomógł: 0 Dołączył: 18.03.2012 Ostrzeżenie: (0%) ![]() ![]() |
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): 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; } 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 |
|
|
![]()
Post
#6
|
|
Grupa: Zarejestrowani Postów: 215 Pomógł: 44 Dołączył: 31.07.2011 Skąd: wrocław Ostrzeżenie: (0%) ![]() ![]() |
ustaw padding dla .menu a, wtedy nie będzie Ci się zmieniała wielkość przy najechaniu
|
|
|
![]()
Post
#7
|
|
Grupa: Zarejestrowani Postów: 26 Pomógł: 0 Dołączył: 18.03.2012 Ostrzeżenie: (0%) ![]() ![]() |
Dziękuje Ci bardzo
![]() ![]() 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 ? ![]() |
|
|
![]()
Post
#8
|
|
Grupa: Zarejestrowani Postów: 215 Pomógł: 44 Dołączył: 31.07.2011 Skąd: wrocław Ostrzeżenie: (0%) ![]() ![]() |
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
|
|
|
![]() ![]() |
![]() |
Aktualny czas: 21.08.2025 - 15:21 |