Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] parzyste wiersze <LI>
Forum PHP.pl > Forum > Po stronie przeglądarki
kukix
27.06.2007, 15:37:47
Witam.
W jaki sposób można pogrubic parzyste wiersze listy LI..?

Próbowalem w ten sposób, ale nie chce działać.

Mam liste:
[HTML] pobierz, plaintext 
  1. <UL id=lista_pozycji>
  2. <LI>pozycja 1</LI>
  3. <LI>pozycja 2</LI>
  4. <LI>pozycja 3</LI>
  5. <LI>pozycja 4</LI>
  6. <LI>pozycja 5</LI>
  7. </UL>
[HTML] pobierz, plaintext


styl css:
[HTML] pobierz, plaintext 
  1. #lista_pozycji li:nth-child(even) {
  2. font-weight: bold;
  3. }
  4.  
  5. #lista_pozycji li:nth-child(odd) {
  6. font-weight: none;
  7. }
[HTML] pobierz, plaintext
atomek4
27.06.2007, 16:47:50
Witaj,
przykład, który podałeś korzysta z pseudo-klasy z CSS3. Niestety tego chyba żadna przeglądarka nie wspiera. Najlepiej będzie jeśli utworzysz sobie chyba oddzielna klasę dla parzystych elementów.
abc667
27.06.2007, 17:02:26
możesz też użyć js

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>...</title>
  5. <script type="text/javascript">
  6.  
  7. function $(id)
  8. {
  9. return document.getElementById(id);
  10. }
  11.  
  12. window.onload = function() {
  13.  
  14. lists = new Array('raz', 'dwa', 'trzy');
  15. colors = new Array('red', 'green');
  16.  
  17. 	for(var i=0;i<lists.length;i++)
  18. 	{
  19. 		if($(lists[i]).hasChildNodes())
  20. 		{
  21. 		var elements = $(lists[i]).childNodes;
  22. 		var p = 0;
  23. 			for(var j=0;j<elements.length;j++)
  24. 			{
  25. 				if(elements[j].nodeType == 1)
  26. 				{
  27. 				elements[j].style.backgroundColor = colors[p];
  28. 				p = (p>=colors.length-1 ? 0 : p+1);
  29. 				}
  30. 			}
  31. 		}
  32. 	}
  33.  
  34. }
  35.  
  36.  
  37. </script>
  38. </head>
  39. <body>
  40.  
  41. <ul id="raz">
  42. <li>jeden
  43. <li>dwa
  44. <li>trzy
  45. <li>cztery
  46. <li>piec
  47. <li>szecs
  48. </ul>
  49.  
  50.  
  51. <ul id="dwa">
  52. <li>jeden
  53. <li>dwa
  54. <li>trzy
  55. <li>cztery
  56. <li>piec
  57. <li>szecs
  58. </ul>
  59.  
  60. <ol id="trzy">
  61. <li>jeden
  62. <li>dwa
  63. <li>trzy
  64. <li>cztery
  65. <li>piec
  66. <li>szecs
  67. </ol>
  68.  
  69. </body>
  70. </html>
[HTML] pobierz, plaintext

to tablicy colors mozesz wpisać dowolną liczbę kolorów, które będą się powtarzać
webdice
27.06.2007, 18:42:58
A jak tych elementów będzie dużo więcej? Moim zdaniem pobrać lepiej wszystkie elementy o danej nazwie (name) i wtedy kolorować co druga linie.
abc667
27.06.2007, 20:33:35
podałem tylko przykład, raczej nie trudno sobie dostosować?
Zajec
30.06.2007, 16:40:09
Cytat(atomek4 @ 27.06.2007, 17:47:50 ) *
przykład, który podałeś korzysta z pseudo-klasy z CSS3. Niestety tego chyba żadna przeglądarka nie wspiera.

1) Selektory dokładnie mówiąc :-)
2) nth-child wspiera Konquerora oraz nadchodząca Opera 9.50.
atomek4
30.06.2007, 18:25:26
@zajec

Na jednych stronach piszą, że to pseudo klasa na drugim selektor, nie sprawdziłem dokładnie smile.gif
Zajec
1.07.2007, 09:44:47
Cytat(atomek4 @ 30.06.2007, 19:25:26 ) *
@zajec

Na jednych stronach piszą, że to pseudo klasa na drugim selektor, nie sprawdziłem dokładnie smile.gif


Samo W3C twierdzi że to selectors, więc myślę że można tak to przypisać :-)
abc667
1.07.2007, 12:49:26
ale chyba pseudoklasa to rodzaj selektora? :-)
atomek4
1.07.2007, 15:17:21
Robi się z tego offtopic pomału smile.gif Ja tylko tak napisałem, żeby kolega miał świadomość, że jego kod może i jest dobry, ale jeszcze nie na dzisiaj smile.gif Wiadomo na pewno, że jest to część specyfikacji CSS3.
shpyo
2.07.2007, 14:13:02
Po co kombinować?
Nie możesz nadać wszystkim LI jakiś styl, a potem w kodzie (pętlą którą będzie tworzył listę) w co drugim LI dasz klasę np. parzysty i tą klasę ostylujesz oddzielnie?
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.