Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Podświetlanie
Skr3czu
post
Post #1





Grupa: Zarejestrowani
Postów: 215
Pomógł: 0
Dołączył: 12.03.2007

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

Witam

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

Pozdrawiam
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 3)
atomek4
post
Post #2





Grupa: Zarejestrowani
Postów: 179
Pomógł: 1
Dołączył: 8.03.2007
Skąd: Łódź

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

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!
Go to the top of the page
+Quote Post
drPayton
post
Post #3





Grupa: Zarejestrowani
Postów: 890
Pomógł: 65
Dołączył: 13.11.2005
Skąd: Olsztyn

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

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

Ten post edytował drPayton 31.08.2007, 14:00:18
Go to the top of the page
+Quote Post
Skr3czu
post
Post #4





Grupa: Zarejestrowani
Postów: 215
Pomógł: 0
Dołączył: 12.03.2007

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

dzięki wszystko ładnie działa winksmiley.jpg
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 19.08.2025 - 03:57
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn