Zamień:
na:
Co do "migających" obrazków: obrazek "miga", bo się ładuje. CSS pobiera i wczytuje ten obraz dopiero po najechaniu myszką, bo klasa jest ustawiona na Hover. To normalne. Ale... można się tego pozbyć. Musisz jednak edytować grafikę, mianowicie wrzucić (przykład) "menu-oferta.png" oraz "menu-oferta-on.png" do jednego obrazka... Zrób sobie dokument o wymiarach 120x84 px. (120px to szerokośc elementu menu, pozostaje bez zmian, a 84px to podwojona wysokość elementu menu). Otwórz "menu-oferta.png" i "menu-oferta-on.png". Wrzuć je obydwa do dokumentu, który przed chwilą utworzyłeś (120x84) i ułóż jeden pod drugim, ale tak, żeby na siebie nie nachodziły. Wrzuć "menu-oferta.png" na górę, pozostały na dół. Zapisz jako "menu-oferta.png" i wyślij na serwer. Teraz w CSS, zamiast podawać nowy obraz dla #oferta:hover, zmieniasz mu po prostu sposób wyświetlania, a zatem:
Kod:
#menu ul {
list-style-type: none;
overflow: auto;
margin: 0px;
padding: 0px;
}
na:
Kod:
#menu ul {
list-style-type: none;
overflow: hidden;
width:490px;
margin: 0 auto;
padding: 0;
}
Co do "migających" obrazków: obrazek "miga", bo się ładuje. CSS pobiera i wczytuje ten obraz dopiero po najechaniu myszką, bo klasa jest ustawiona na Hover. To normalne. Ale... można się tego pozbyć. Musisz jednak edytować grafikę, mianowicie wrzucić (przykład) "menu-oferta.png" oraz "menu-oferta-on.png" do jednego obrazka... Zrób sobie dokument o wymiarach 120x84 px. (120px to szerokośc elementu menu, pozostaje bez zmian, a 84px to podwojona wysokość elementu menu). Otwórz "menu-oferta.png" i "menu-oferta-on.png". Wrzuć je obydwa do dokumentu, który przed chwilą utworzyłeś (120x84) i ułóż jeden pod drugim, ale tak, żeby na siebie nie nachodziły. Wrzuć "menu-oferta.png" na górę, pozostały na dół. Zapisz jako "menu-oferta.png" i wyślij na serwer. Teraz w CSS, zamiast podawać nowy obraz dla #oferta:hover, zmieniasz mu po prostu sposób wyświetlania, a zatem:
Kod:
#oferta {
margin: 0px auto;
display: block;
height: 42px;
width: 120px;
background: url('menu-oferta.png')no-repeat top center;
}
#oferta:hover {
background: url('menu-oferta.png')no-repeat bottom center;
}