Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Podświetlanie
Forum PHP.pl > Forum > Przedszkole
Skr3czu
31.08.2007, 13:01:47
Witam

Jak wykonać podświetlanie tak jak na tej stronie po lewej stronie:
http://www.freelayouts.com/

Pozdrawiam
atomek4
31.08.2007, 13:37:51
Cześć


jak na moje oko to jest to zrobione tak:

[HTML] pobierz, plaintext 
  1. div
  2. 	{       
  3.  
  4. 	        background-color: rgb(233,0,0);
  5. 		border: 2px solid rgb(233,0,0);
  6.  
  7. 	}
  8.  
  9. div:hover
  10.        {
  11. 		background-color: rgb(255,255,255);
  12.  
  13. 	}
[HTML] pobierz, plaintext


Tylko, że ta metoda nie działa w IE, ale jak wchodzę za pomocą IE na tą stronę, to też nie działa. Stąd przypuszczenie, że tak właśnie to jest zrobione.
Pozdrawiam!
drPayton
31.08.2007, 13:43:24 
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  3.   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  5. <head>
  6.  
  7.   <title> [tytuł strony] </title>
  8.  
  9.   <style type="text/css">
  10. 	td#c1 {
  11. 		background:green;
  12. 		border:1px solid lightgreen;
  13. 		width:300px;
  14. 		height:50px;
  15. 	}
  16. 	td#c1:hover {
  17. 		background:white;
  18. 	}
  19. 	td#c2 {
  20. 		background:red;
  21. 		border:1px solid pink;
  22. 		width:300px;
  23. 		height:50px;
  24. 	}
  25. 	td#c2:hover {
  26. 		background:white;
  27. 	}
  28. 	td#c3 {
  29. 		background:blue;
  30. 		border:1px solid lightblue;
  31. 		width:300px;
  32. 		height:50px;
  33. 	}
  34. 	td#c3:hover {
  35. 		background:white;
  36. 	}
  37.   </style>
  38. </head>
  39. <body>
  40.  
  41. <table>
  42. <tr><td id="c1">content 1</td></tr>
  43. <tr><td id="c2">content 1</td></tr>
  44. <tr><td id="c3">content 1</td></tr>
  45. </table>
  46.  
  47. </body>
  48. </html>
[HTML] pobierz, plaintext


Działa pod FF, Operą, IE7. Pod IE6 chyba nie, o ile pamiętam nie obsługuje własności hover dla elementów innych niż linki. Wtedy trzeba JS'em zadziałać. np:
[HTML] pobierz, plaintext 
  1. var agt = navigator.userAgent.toLowerCase();
  2. var is_major = parseInt(navigator.appVersion);
  3. var is_minor = parseFloat(navigator.appVersion);
  4. var is_ie   = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
  5. var is_ie6 = (is_ie && (is_major == 4) && (agt.indexOf("msie 6.")!=-1) );
  6. document.getElementById("c1").onmouseover=function() 
  7. {
  8.     if (is_ie6) { 
  9.         document.getElementById("c1").className = "hover";
  10.     }
  11. }
  12. document.getElementById("c1").onmouseout=function() 
  13. {
  14.     if (is_ie6) { 
  15.         document.getElementById("c1").className = "";
  16.     }
  17. }
[HTML] pobierz, plaintext

a w css dopisać:
[HTML] pobierz, plaintext 
  1. (...)
  2. .hover {
  3.     background:white;
  4. }
  5. (...)
[HTML] pobierz, plaintext

Pisane z głowy, więc mogą być jakieś błędy.
Skr3czu
31.08.2007, 13:49:49
dzięki wszystko ładnie działa winksmiley.jpg
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.