[HTML][CSS] Nawigacja "nie standardowa" Opcje

[Ramzaa]

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
Prosiłbym o jakieś wskazówki, albo najlepiej gotoffca, bo dużo roboty z tym nie ma

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

[wookieb]

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

[askone]

w css daj

#menu li:hover

Powinno działać

[Ramzaa]

askone, niestety ale to już wiedziałem tysiące lat temu, tylko że nie w tym problem

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.

[wookieb]

jak już to

[CSS] pobierz, plaintext 
display: inline-block;
[CSS] pobierz, plaintext 

dla .nav-register

[Ramzaa]

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



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

[wookieb]

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

[Ramzaa]

Dobra, już sobie poradziłem. Dzięki wielkie wookieb