Ostatnio rozmyślam, jak zrobić o to taki myk. Mam link, chcę mieć tło dla niego (a wymiary obrazka to załóżmy 100w i 50h) - by tego dokonać robię o tak:
Kod
#left ul li a {
display: block;
background: url(images/menu.gif) no-repeat;
margin: 0;
padding: 0;
width: 100px;
height: 50px;
line-height: 50px; / <- użyłem tego sposobu, by i IE dobrze wyświetlało całość.
font-size: 12px;
text-decoration: none;
color: white;
}
display: block;
background: url(images/menu.gif) no-repeat;
margin: 0;
padding: 0;
width: 100px;
height: 50px;
line-height: 50px; / <- użyłem tego sposobu, by i IE dobrze wyświetlało całość.
font-size: 12px;
text-decoration: none;
color: white;
}
A teraz, czas na a:hover. - po najechaniem kursorem myszy ma być inny obrazek w tle - robimy to tak!
Kod
#left-1 ul li a:hover {
background: url(images/menuh.gif) no-repeat;
margin: 0;
padding: 0;
width: 100px;
height: 50px;
line-height: 50px;
font-size: 12px;
color: white;
}
background: url(images/menuh.gif) no-repeat;
margin: 0;
padding: 0;
width: 100px;
height: 50px;
line-height: 50px;
font-size: 12px;
color: white;
}
Działa!, ale chwila. Tekst dokładnie nasz link, przylega max. do lewego boku
. Dając margin, przesunę wszystko; tekst i tło - wniosek: nie mogę wyśrodkować tekstu względem tła.Ok, w porządku - myślałem nad li:hover itd. jednak wiadomo IE tego nie obsługuje
. Jakiś pomysł? obejście? inne rozwiązanie? Proszę o pomoc.