Forum PHP.pl

Siedzę już nad tym dobre 2h i nadal nic nie wykombinowałem. Najgorsze jest to, że jest to prosta sprawa, jednak komletnie wyleciało mi to z głowy - dlatego zwracam się do was.

Próbuję zrobić taką nawigację:



Czyli po najechaniu muszką na jakieś menu w nawigacji, chcę żeby zmienił się kolor, a w zasadzie całe menu na inny kolor. Dla przykładu powiedzmy, że najeżdżam na "stronę główną" w nawigacji, a ten przycisk zmienia się na inny kolor.

Tak wygląda przykładowy przycisk, a obok drugi (:hover):



W zasadzie to nie zrobiłem nic, bo zapomniałem jak to się robi (IMG:style_emoticons/default/sadsmiley02.gif)
Prosiłbym o jakieś wskazówki, albo najlepiej gotoffca, bo dużo roboty z tym nie ma (IMG:style_emoticons/default/aaevil.gif)

Oczywiście będzie nagroda za pomoc, pozdrawiam.

Obrazek półprzezroczysty png i zmieniasz tylko background-color w pseudoklasie :hover
Jeżeli nie chcesz zmieniać tylko kolorów to google -> css rollover

w css daj

#menu li:hover

Powinno działać (IMG:style_emoticons/default/winksmiley.jpg)

askone, niestety ale to już wiedziałem tysiące lat temu, tylko że nie w tym problem (IMG:style_emoticons/default/dry.gif)

zrobiłem coś takiego:

[HTML] pobierz, plaintext 
.navigation {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline;
}
 
	.nav-register {
		background-image: url(images/nav-register.png);
		height: 61px;
		width: 125px;
	}
 
	.nav-register:hover {
		background-image: url(images/nav-register-active.png);
	}
[HTML] pobierz, plaintext 

No i działa, no bo musi i to normalna sprawa. Problem pojawia się gdy dam drugi obrazek do nawigacji, czyli powiedzmy, że kod html strony głównej wygląda tak:

[HTML] pobierz, plaintext 
<ul class="navigation">
	<li class="nav-register"><a href="#">Rejestracja</a></li>
	<li class="nav-rules"><a href="#">Regulamin</a></li>
</ul>
[HTML] pobierz, plaintext 

I zamiast mieć obok drugi obrazek, to pojawia mi się on pod tym poprzednim. Co dziwne, display:inline nic nie pomaga, a przecież powinno (?).

Czekam na dalsze wskazówki.

Prawie super, tylko że w dół ucieka. Sam zobacz:

(IMG:http://img809.imageshack.us/img809/6/beztytuuicf.png)

Po usunięciu tego display: inline-block; pokazuje się normalnie, tylko jedno pod drugim.. próbowałem dać margin i padding na 0, ale to nic nie daje. Co może być przyczyną?

Ten post edytował Ramzaa 18.10.2010, 11:39:26

Wrzuć to gdzieś publicznie bo teraz można tylko wróżyć.

Dobra, już sobie poradziłem. Dzięki wielkie wookieb (IMG:style_emoticons/default/winksmiley.jpg)