Witam,
mam następujący problem. Tak wygląda fragment mojego menu: http://antek.na16.pl/menu.jpg, pomarańczowy kolor to jest tło menu, natomiast fragment z czarnym tłem ma być po najechaniu na niego myszką i mam pytanie, jak najlepiej zakodować podświetlanie w taki sposób jak jest na grafice bo nic sprytnego mi nie przychodzi do głowy.
pozdrawiam
Antek
a {background: blabla url('blabla') ....}
a:hover {background-position: .... (przesuniety wzgledem tego powyzej}
Wszystko na 1 obrazku, wersja hover obok wersji zwykłej.
http://riddle.pl/-/xhtml/css-rollovers/
http://grabun.com/teksty/przyklady/css-rollover/
i wiele więcej
Ale dla każdego linku będę musiał tworzyć nowe tło, bo mają inne szerokości.
Jakiś inny sposób jest może?
Możesz dać wartość stałą czyli jeden obrazek a teksty wycentrowane, wtedy nie będziesz musiał mieć tyle obrazków.
Druga możliwość, czyli szerokość taka jak tekst to nie obrazek a po prostu nadanie background-color blokowi po najechaniu myszką.
Tutaj masz kod:
#menu
{
height:53px;
line-height: 53px;
margin:0 auto;
background: url(images/obrazktla.jpg);
}
#menu ul {
margin: 0 auto;
padding: 8px;
list-style: none;
width:80%;
height: 30px;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
text-decoration: none;
color:#4E4E4E;
margin:0;
border:0px;
}
#menu a:hover {
background: #aabb6b;
color:#fff;
}
Efekt możesz zobaczyć na mojej stronie :)
Stała szerokość mnie nie ustawia, bo odnośniki w menu mają zbyt zróżnicowaną długość.
Drugi sposób się nie nadaję bo po najechaniu na odnośnik tło ma być zaokrąglone na brzegach, a tego w ten sposób nie zrobię.
może ktoś ma jeszcze jakiś pomysł?
możesz zrobić tak jak zrobiło to Allegro.pl :)
podejrzyj sobie źródełko oraz css :)
allegro jako a:hoover ma też zwykłe prostokąty, a nie prostokąty z zaokrąglonymi rogami o jakie mi chodzi..
o coś takiego mi chodziło!
wielkie dzięki! :D