Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS]Podświetlenie
pemko11
post
Post #1





Grupa: Zarejestrowani
Postów: 98
Pomógł: 0
Dołączył: 5.10.2010

Ostrzeżenie: (0%)
-----


Witam. Mam problem, bo nie mogę ogarnąć podświetlenia menu.
CSS menu to:

  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. }

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

Co trzeba dodać do tego kodu?
Dzięki.
Go to the top of the page
+Quote Post
matyskiewicz
post
Post #2





Grupa: Zarejestrowani
Postów: 184
Pomógł: 3
Dołączył: 6.10.2006
Skąd: Poznań

Ostrzeżenie: (0%)
-----


poczytaj: http://csshover.pl/css/csshover/


--------------------
eclipse :)
Go to the top of the page
+Quote Post
pemko11
post
Post #3





Grupa: Zarejestrowani
Postów: 98
Pomógł: 0
Dołączył: 5.10.2010

Ostrzeżenie: (0%)
-----


Czytałem to, ale nie rozumiem.. Jaki kod mam wkleić?
Go to the top of the page
+Quote Post
askone
post
Post #4





Grupa: Zarejestrowani
Postów: 654
Pomógł: 121
Dołączył: 27.10.2007
Skąd: Poznań, Łódź

Ostrzeżenie: (0%)
-----


Cytat

W powyższym artykule jest wszystko dokładnie opisane. Wystarczy przeczytać... ze zrozumieniem smile.gif


--------------------
Kliknij jeśli moja odpowiedź Ci pomogła.
askone.pl
Go to the top of the page
+Quote Post
matiz123
post
Post #5





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 22.02.2011

Ostrzeżenie: (0%)
-----


Cytat(pemko11 @ 24.02.2011, 14:31:32 ) *
Witam. Mam problem, bo nie mogę ogarnąć podświetlenia menu.
CSS menu to:

  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. }

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:
  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. }


Mam nadzieje że pomogłem smile.gif
Go to the top of the page
+Quote Post
pemko11
post
Post #6





Grupa: Zarejestrowani
Postów: 98
Pomógł: 0
Dołączył: 5.10.2010

Ostrzeżenie: (0%)
-----


Wkleiłem, lecz nie ma podświetlenia..
Go to the top of the page
+Quote Post
matiz123
post
Post #7





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 22.02.2011

Ostrzeżenie: (0%)
-----


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
..
}
Go to the top of the page
+Quote Post
pemko11
post
Post #8





Grupa: Zarejestrowani
Postów: 98
Pomógł: 0
Dołączył: 5.10.2010

Ostrzeżenie: (0%)
-----


Ja chce, aby te pozycje z menu się podświetlały..



Ten post edytował pemko11 24.02.2011, 16:07:30
Go to the top of the page
+Quote Post
matiz123
post
Post #9





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 22.02.2011

Ostrzeżenie: (0%)
-----


a teraz rozumiem jeżeli masz obrazek

  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. }


wytłumacze ci to tak:

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


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:

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


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

  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. }


rozumiesz?

Ten post edytował matiz123 24.02.2011, 16:14:18
Go to the top of the page
+Quote Post
pemko11
post
Post #10





Grupa: Zarejestrowani
Postów: 98
Pomógł: 0
Dołączył: 5.10.2010

Ostrzeżenie: (0%)
-----


Wkleiłem ten pierwszy kod i powstało coś takiego:
  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. }

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.
Go to the top of the page
+Quote Post
matiz123
post
Post #11





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 22.02.2011

Ostrzeżenie: (0%)
-----


ale masz te dwa selektory

#nav

i #nav:hover


?
Go to the top of the page
+Quote Post
pemko11
post
Post #12





Grupa: Zarejestrowani
Postów: 98
Pomógł: 0
Dołączył: 5.10.2010

Ostrzeżenie: (0%)
-----


Nie rozumiem tego w ogóle, podesłałem Ci na PW plik css, to jeśli możesz to zerknij,
Dziękuję.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 21.08.2025 - 23:53