Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Pod¶wietlenie
Forum PHP.pl > Forum > Przedszkole
pemko11
24.02.2011, 14:31:32
Witam. Mam problem, bo nie mogę ogarn±ć pod¶wietlenia menu.
CSS menu to:

[PHP] pobierz, plaintext 
  1. #nav {
  2. 	background-image: url(../images/nav.png);
  3. 	height: 43px;
  4. 	width: 1000px;
  5. 	margin: 0px auto;
  6. 	padding: 0px;
  7. 	clear:both;
  8. 	    -moz-border-radius: 6px;
  9.     -webkit-border-radius: 6px;
  10.     border-radius: 6px;
  11. }
[PHP] pobierz, plaintext

Chciałbym kolor na przykład niebieski po najechaniu na linka

Co trzeba dodać do tego kodu?
Dzięki.
matyskiewicz
24.02.2011, 14:36:54
poczytaj: http://csshover.pl/css/csshover/
pemko11
24.02.2011, 14:40:13
Czytałem to, ale nie rozumiem.. Jaki kod mam wkleić?
askone
24.02.2011, 14:56:56
Cytat
http://csshover.pl/css/csshover/

W powyższym artykule jest wszystko dokładnie opisane. Wystarczy przeczytać... ze zrozumieniem smile.gif
matiz123
24.02.2011, 15:04:08
Cytat(pemko11 @ 24.02.2011, 14:31:32 ) *
Witam. Mam problem, bo nie mogę ogarn±ć pod¶wietlenia menu.
CSS menu to:

[PHP] pobierz, plaintext 
  1. #nav {
  2. 	background-image: url(../images/nav.png);
  3. 	height: 43px;
  4. 	width: 1000px;
  5. 	margin: 0px auto;
  6. 	padding: 0px;
  7. 	clear:both;
  8. 	    -moz-border-radius: 6px;
  9.     -webkit-border-radius: 6px;
  10.     border-radius: 6px;
  11. }
[PHP] pobierz, plaintext

Chciałbym kolor na przykład niebieski po najechaniu na linka

Co trzeba dodać do tego kodu?
Dzięki.


wystarczy że dodasz :hover do nav
czyli #nav:hover

i zmienisz niektóre parametry np:
[PHP] pobierz, plaintext 
  1. #nav:hover {
  2. 	background-image: url(../images/nav1.png);
  3. 	height: 43px;
  4. 	width: 1000px;
  5. 	margin: 0px auto;
  6. 	padding: 0px;
  7. 	clear:both;
  8. 	    -moz-border-radius: 6px;
  9.     -webkit-border-radius: 6px;
  10.     border-radius: 6px;
  11. }
[PHP] pobierz, plaintext


Mam nadzieje że pomogłem smile.gif
pemko11
24.02.2011, 15:36:59
Wkleiłem, lecz nie ma pod¶wietlenia..
matiz123
24.02.2011, 15:52:45
Cytat(pemko11 @ 24.02.2011, 15:36:59 ) *
Wkleiłem, lecz nie ma pod¶wietlenia..


ale obrazek nav.png co przedstawia ? ja dałem tam nav1.png po najechaniu na niego obrazek nav.png zmieni sie na nav1.png



a żeby dodać

pod¶wietlenie tego obrazka nav.png musisz w tej kolumnie w css w selektorze #nav:hover {
..
dodaj tutaj kod który da podswietlenie
..
}
pemko11
24.02.2011, 15:56:30
Ja chce, aby te pozycje z menu się pod¶wietlały..

matiz123
24.02.2011, 16:11:42
a teraz rozumiem jeżeli masz obrazek

[PHP] pobierz, plaintext 
  1.  
  2. #nav a {
  3. 	font: normal 11px Tahoma;
  4. 	color: #FFFFFF;
  5. 	text-decoration: none;
  6. 	margin-left: 30px;
  7. }
  8.  
  9. #nav ul {
  10. 	display: inline;
  11.  
  12.  
  13. }
  14. #nav li {
  15. 	display: inline;
  16. 	margin-left: 25px;
  17.  
  18. }
  19.  
  20. #nav ul {
  21.  
  22. 	position:relative;
  23.       top:13px;
  24. 	(-bracket-:hack;
  25.         top:10px;
  26.     );
  27. }
  28.  
  29. #nav ul, x:-moz-any-link, x:default {
  30.  
  31.  
  32. 	position:relative;
  33.       top:10px;
  34.  
  35.  
  36.  } 
[PHP] pobierz, plaintext


wytłumacze ci to tak:

[PHP] pobierz, plaintext 
  1. #nav a {
  2. 	font: normal 11px Tahoma;
  3. 	color: #FFFFFF;
  4. 	text-decoration: none;
  5. 	margin-left: 30px;
  6. }
[PHP] pobierz, plaintext


na razie pokaże ci na linku w nawigacji bo nie wiem jak jest to podzielone na pola

jezeli masz link w nawigacji
i zrobisz aby po najechaniu na niego myszk± zmienił się jej kolor
zrobisz tak:

[PHP] pobierz, plaintext 
  1. #nav a:hover {
  2. 	font: normal 11px Tahoma;
  3. 	color: red;
  4. 	text-decoration: none;
  5. 	margin-left: 30px;
  6. }
[PHP] pobierz, plaintext


dodaj to do swoich stylów to zobaczysz że zadziała a jezeli chcesz aby to konkretny kwadracik z napisem zminieł kolor(pod¶wietlił sie ) musisz podzielić to całe menu więc lepiej spróbuj narpierw z czcionka a póĽniej dodasz do

[PHP] pobierz, plaintext 
  1. #nav a:hover {
  2. 	font: normal 11px Tahoma;
  3. 	color: red;
  4. 	text-decoration: none;
  5. 	margin-left: 30px;
  6.         background-image: url(../¶cieżka do obrazka który bedzie jako pod¶wietlenie);
  7. }
[PHP] pobierz, plaintext


rozumiesz?
pemko11
24.02.2011, 16:19:46
Wkleiłem ten pierwszy kod i powstało co¶ takiego:
[PHP] pobierz, plaintext 
  1. #nav a:hover {
  2. 	font: normal 11px Tahoma;
  3. 	color: red;
  4. 	text-decoration: none;
  5. 	margin-left: 30px;
  6. 	background-image: url(../images/nav.png);
  7. 	height: 43px;
  8. 	width: 1000px;
  9. 	margin: 0px auto;
  10. 	padding: 0px;
  11. 	clear:both;
  12. 	    -moz-border-radius: 6px;
  13.     -webkit-border-radius: 6px;
  14.     border-radius: 6px;
  15. }
[PHP] pobierz, plaintext

Zrobiło się co¶ takiego jak na screenie niżej:

A ja nie chce zadnych komórek tylko, chce aby napis Strona główna, dodaj ogłoszenie itd po najechaniu z białego podswietlał się na niebiesko. I to tyle.
matiz123
24.02.2011, 16:23:21
ale masz te dwa selektory

#nav

i #nav:hover


?
pemko11
24.02.2011, 16:25:07
Nie rozumiem tego w ogóle, podesłałem Ci na PW plik css, to je¶li możesz to zerknij,
Dziękuję.
To jest wersja lo-fi głównej zawarto¶ci. Aby zobaczyć pełn± wersję z większ± zawarto¶ci±, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.