Forum PHP.pl

Witam

Otóż mam taki kod:

[HTML] pobierz, plaintext 
<ul id="nav">
                <li id="menu1"><a href="#"><img src="images/menu_01.png"></img></a></li>
                <li id="menu2"><a href="#"><img src="images/menu_02.png"></img></a></li>
                <li id="menu3"><a href="#"><img src="images/menu_03.png"></img></a></li>
                <li id="menu4"><a href="#"><img src="images/menu_04.png"></img></a></li>
                <li id="menu5"><a href="#"><img src="images/menu_05.png"></img></a></li>
</ul>
[HTML] pobierz, plaintext 

i CSS

[HTML] pobierz, plaintext 
li#menu1:hover {
background: url(images/hover_03.png) no-repeat;
}
[HTML] pobierz, plaintext 

Jak najerzdzam na ten przycisk to mi się nie zmienia obrazek. Proszę o pomoc.

A to pewnie zależy w jakiej przeglądarce

hover stosuj do <a/> a nie do <li/>

To jak to by przerobić. Fakt że umieszczenie obrazka bezpośrednio w dokumencie html to pomyłka i chyba musęe to zmienić ale jak?

[CSS] pobierz, plaintext 
#nav li a{
 display: block;
 width: ...; /*szerokość obrazka*/
 height: ...;/*wysokość obrazka*/
 backgorund: ...;
}
#nav li a:hover{
 background: ...;
}
[CSS] pobierz, plaintext 

Usuń te id z li, raczej są zbędne. I usuń obraz z wnętrza odnośnika (bo on ci przykrywa tło).

Ten post edytował t4keda 24.10.2009, 07:50:04

Musi być id ponieważ obrazek ma w sobie treść np. Kontakt itd. I dlatego musze jakoś przez id dojść do tego. Obrazek ma być linkiem.

Nie wiem jak się ta metoda nazywa, ale wstawia się img podwójny i nadaje mu się połowę wysokości. Dla hover poprzez nadanie odpowiedniej wartości marginesu (ujemnej) przesuwa się obrazek, tak, żeby było widać druga polówkę. Może ktoś podpowie jak się ta metoda nazywa.

Jeśli ich potrzebujesz to nie usuwaj. OK, obrazek ma być linkiem, ale jeśli nie dasz go jako tło to będzie ci przykrywał tło, które ustawiasz w CSS.
Możesz przecież zrobić tak, że dla każdego linku masz inne tło:

[CSS] pobierz, plaintext 
#menu1 a{
 display: block;
 width: ...; /*szerokość obrazka*/
 height: ...;/*wysokość obrazka*/
 backgorund: ...;
}
#menu1 a:hover{
 background: ...;
}
[CSS] pobierz, plaintext 

Dla każdego linku możesz coś takiego zrobić.
Wtedy będziesz miał pole nad przyciskiem (co będzie wyglądało jakby grafika była przyciskiem) i będzie działało.

Mam teraz tak:

[HTML] pobierz, plaintext 
#nav li {
display: inline;
}
 
#menu1 a{
display: inline;
width: 59px; /*szerokość obrazka*/
height: 32px;/*wysokość obrazka*/
background: url(images/menu_01.png) no-repeat;
}
 
 
#menu1 a:hover{
background: url(images/hover_03.png) no-repeat;
}
 
#menu2 a{
display: inline;
width: 89px; /*szerokość obrazka*/
height: 32px;/*wysokość obrazka*/
background: url(images/menu_02.png) no-repeat;
}
 
#menu1 a:hover{
background: url(images/hover_04.png) no-repeat;
}
 
#menu3 a{
display: inline;
width: 90px; /*szerokość obrazka*/
height: 32px;/*wysokość obrazka*/
background: url(images/menu_03.png) no-repeat;
}
 
#menu1 a:hover{
background: url(images/hover_05.png) no-repeat;
}
 
 
#menu4 a{
display: inline;
width: 89px; /*szerokość obrazka*/
height: 32px;/*wysokość obrazka*/
background: url(images/menu_04.png) no-repeat;
}
 
#menu1 a:hover{
background: url(images/hover_06.png) no-repeat;
}
 
#menu5 a{
display: inline;
width: 89px; /*szerokość obrazka*/
height: 32px;/*wysokość obrazka*/
background: url(images/menu_05.png) no-repeat;
}
 
#menu1 a:hover{
background: url(images/hover_07.png) no-repeat;
}
 
#nav img {
border: 0px;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
			<ul id="nav">
				<li id="menu1"><a href="#"></a></li>
				<li id="menu2"><a href="#"></a></li>
				<li id="menu3"><a href="#"></a></li>
				<li id="menu4"><a href="#"></a></li>
				<li id="menu5"><a href="#"></a></li>
			</ul>
[HTML] pobierz, plaintext 

No ale nic nie widać. Menu ma iść poziomo wieć inline.

Ten post edytował RifleMan 24.10.2009, 08:23:00

Coś nie za bardzo mi to działa strona z menu . Nie wiem czym to jest związane. Proszę o dalszą pomoc ale i tak daję pomógł bo się wiele nauczyłem. Oczekuję odpowiedzi.