Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]obrazek w hover
Forum PHP.pl > Forum > Przedszkole
GoOx
27.12.2011, 08:08:49
Witam mam oto taki kod.

index.php
[PHP] pobierz, plaintext 
  1.     <!DOCTYPE html PUBLIC>
  2.     <html>
  3.     <head>
  4.     <meta http-equiv=Content-type content=text/html; charset=windows-1250>
  5.     <meta name=Description content= [wstaw tu opis strony] >
  6.     <meta name=Keywords content= [wstaw tu slowa kluczowe] >
  7.  
  8.     <title>Portofilo GoOx</title>
  9.     <link rel=stylesheet href=styl.css type=text/css>
  10.     </head>
  11.  
  12.     <div class="menu">
  13. <ul>
  14. <li><a href="index.php">Strona Główna</a></li>
  15.  
  16.  
  17. <li><a href="index.php?omnie" name="omnie">O mnie</a></li>
  18.  
  19.  
  20. <li><a href="index.php?kontakt" name="kontakt">Kontakt</a></li>
  21. </ul>
  22. </div>
  23.  
  24. <?
  25. $omnie = $_GET['omnie'];
  26. $kontakt = $_GET['kontakt'];
  27.  
  28. if (isset($omnie)) {
  29. echo 'O mnie';
  30. }
  31. else if (isset($kontakt)) {
  32. echo 'Kontakt';
  33. }
  34. else {
  35. echo 'Jajco';
  36. }
  37.  
[PHP] pobierz, plaintext

styl.css
[PHP] pobierz, plaintext 
  1. .menu {
  2. margin-top:50px;
  3. Margin-left:50px;
  4. }
  5.  
  6. .menu:link {
  7. padding-right:5px;
  8. padding-bottom:5px;
  9. padding-left:5px
  10. padding-top:5px;
  11. color: #ffffff;
  12. text-decoration: none;
  13. }
  14.  
  15. .menu:hover {
  16. padding-right:5px;
  17. padding-bottom:5px;
  18. padding-left:5px
  19. padding-top:5px;
  20. color: #ffffff;
  21. background:url('nap.jpg') no-repeat;
  22. text-decoration: none;
  23. }
[PHP] pobierz, plaintext


i nie wiem dlaczego system bierze te linki jako całość i wsadza obrazek taki jak jest

może pokażę demo
http://e-computer.xaa.pl/strony/index.php

Proszę o pomoc.
Volume
27.12.2011, 08:20:13
Bo masz zdefiniowana klase menu dla diva - rodzica ul.

Prosty przyklad przypuszczam tego co chcesz osiagnac (bo w zasadzie nie napisales jaki chcesz miec efekt koncowy):

CSS:
[HTML] pobierz, plaintext 
  1. ul#menu li:hover {
  2. background: url(./ovrazek.jpg) no-repeat yellow;
  3. }
[HTML] pobierz, plaintext


html:
[HTML] pobierz, plaintext 
  1. <ul id="menu">
  2. <li><a href="#">asdsa</a></li>
  3. <li><a href="#">asd</a></li>
  4. </ul>
[HTML] pobierz, plaintext
GoOx
27.12.2011, 09:56:51
to nic nie zmienia.

chcę by nie było widać całego obrazka tylko by w części wchodził pod link

i dlaczego linki nadal są fioletowe a mają być białe?
Damonsson
27.12.2011, 10:35:15
wpis: .menu:hover
zamieniasz na: .menu ul li:hover

a:link a:visited a:blabla ...jeszcze ze 3 są takie wpisy, nie pamiętam nazw, dla wszystkich resetujesz wygląd najlepiej w pliku reset.css

@Volume: podał Ci dobre rozwiązanie, więc nie rozumiem z czym jeszcze masz problem, napisałem więc, co masz zrobić dosłownie, może pomoże.
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.