Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wykazy w CSS
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
KrzysiekKCN
14.03.2010, 08:04:36
Witajcie! Mam taki problem, którego nie mogę przeskoczyć.
Otóż potrzebuje stworzyć 2 różne wykazy na stronie o całkiem odmiennej budowie.

Pierwszy wykaz działa:
[HTML] pobierz, plaintext 
  1. ul, ul li {
  2. 	list-style-image: url('images/point.gif');
  3. 	margin: 0;
  4. }
  5.  
  6. ul a:link, ul a:visited {
  7. 	text-decoration: none;
  8. 	padding: 2px;
  9. 	color: #000;
  10. 	font-size: small;
  11. }
  12.  
  13. ul a:hover {
  14. 	text-decoration: overline underline;
  15. 	padding: 2px;
  16. 	color: #000;
  17. 	font-size: small;
  18. }
[HTML] pobierz, plaintext


a w html mam tak:
[HTML] pobierz, plaintext 
  1.  
  2.                   <ul>
  3. 			<li><a href="#">Strona Główna</a></li>
  4. 			<li><a href="#">Aktualności</a></li>
  5. 			<li><a href="#">Kontakt</a></li>
  6. 			<li><a href="#">Przyjaciele</a></li>
  7. 			<li><a href="#">Mapa Strony</a></li>
  8. 	         </ul>
[HTML] pobierz, plaintext


Teraz problem jak stworzyć drugi wykaz. Wczytałem w necie że taki kod:
[HTML] pobierz, plaintext 
  1. p.web {
  2. 	font-weight: bold;
  3. }
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <p class="web">Akapit Akapit Akapit</p>
[HTML] pobierz, plaintext

Jest do określenia innego znacznika niż DIV ale niestety w przypadku wykazu mi nie działa:
[HTML] pobierz, plaintext 
  1. ul.web{
  2. 	list-style-image: url('images/poin2t.gif');
  3. 	margin: 0;
  4. }
  5. li.web{
  6. 	color: blue;
  7. }
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. 	<ul class="web">
  2. 		<li>Lol</li>
  3. 		<li>Lol</li>
  4. 	</ul>
[HTML] pobierz, plaintext


Gdzie robię błąd i jak się określa te 2 wykazy w CSS?
Proszę o pomoc i pozdrawiam KrzysiekKCN
Lion_87
14.03.2010, 08:34:48 
[HTML] pobierz, plaintext 
  1. ul#list{
  2.  
  3. }
  4.  
  5. ul#list li{
  6.  
  7. }
  8.  
  9. ul#list li a{
  10.  
  11. }
  12.  
  13. ul#list li a:hover{
  14.  
  15. }
[HTML] pobierz, plaintext 



[HTML] pobierz, plaintext 
  1. ul#cos{
  2.  
  3. }
  4.  
  5. ul#cos li{
  6.  
  7. }
  8.  
  9. ul#cos li a{
  10.  
  11. }
  12.  
  13. ul#cos li a:hover{
  14.  
  15. }
[HTML] pobierz, plaintext
KrzysiekKCN
14.03.2010, 09:31:16
Ej ale to jakoś nie działa. Dodałem ten twój kod i zmienia mi obydwa wykazy. Ten pierwszy i ten drugi.
Mój kod to:
Wykaz 1
[HTML] pobierz, plaintext 
  1. ul, ul li {
  2. 	list-style-image: url('images/point.gif');
  3. 	margin: 0;
  4. }
  5.  
  6. ul a:link, ul a:visited {
  7. 	text-decoration: none;
  8. 	padding: 2px;
  9. 	color: #000;
  10. 	font-size: small;
  11. }
  12.  
  13. ul a:hover {
  14. 	text-decoration: overline underline;
  15. 	padding: 2px;
  16. 	color: #000;
  17. 	font-size: small;
  18. }
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. 			<ul>
  2. 			<li><a href="#">Strona Główna</a></li>
  3. 			<li><a href="#">Aktualności</a></li>
  4. 			<li><a href="#">Kontakt</a></li>
  5. 			<li><a href="#">Mapa Strony</a></li>
  6. 			</ul>
[HTML] pobierz, plaintext

Wykaz 2:
[HTML] pobierz, plaintext 
  1. ul#web{
  2. 	list-style-image: url('images/pop.gif');
  3. 	margin-left: 5px;
  4. }
  5.  
  6. ul#web li{
  7. 	font-weight: bold;
  8. 	font-size: medium;
  9. 	text-decoration: underline;
  10. }
  11.  
  12. ul#web li a:link, ul a:visited{
  13. 	font-weight: bold;
  14. 	font-size: medium;
  15. 	text-decoration: underline;
  16. }
  17.  
  18. ul#web li a:hover{
  19. 	font-weight: bold;
  20. 	font-size: x-small;
  21. 	text-decoration: overline;
  22. }
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. 	<ul class="web">
  2. 		<li>punkt 1</li>
  3. 		<li>punkt 2</li>
  4. 		<li><a href="#">link 1</a></li>
  5. 		<li><a href="#">link 2</a></li>
  6. 	</ul>	
[HTML] pobierz, plaintext


A i w tym wykazie 2 reagują tylko LINKI. Normalne punkty nawet nie zmieniają kolorów.
Lion_87
14.03.2010, 09:33:29
Bo nie class a id?
krzysztof_kf
14.03.2010, 10:29:09
zapraszam do lektury Kurs HTML

a nie lepiej jak robisz coś nazwać daną zawartość jakąś klasą na przykład

Kod
.wykaz ul, ul li {
    list-style-image: url('images/point.gif');
    margin: 0;
}

.wykaz ul a:link, ul a:visited {
    text-decoration: none;
    padding: 2px;
    color: #000;
    font-size: small;
}

.wykaz ul a:hover {
    text-decoration: overline underline;
    padding: 2px;
    color: #000;
    font-size: small;
}

/* 2 */




</style>
<div class="wykaz">
   <ul>
            <li><a href="#">Strona Główna</a></li>
            <li><a href="#">Aktualności</a></li>
            <li><a href="#">Kontakt</a></li>
            <li><a href="#">Przyjaciele</a></li>
            <li><a href="#">Mapa Strony</a></li>
             </ul>
             </div>


i po tem jak chcesz coś podobnego zrobić to zmieniasz tylko nazwę czyli w tym przypadku

Kod
.drugiwykaz ul, ul li


ja to stosuję z powodzeniem
KrzysiekKCN
14.03.2010, 10:51:29
Niestety obydwie metody zawiodły.

Obojętnie czy nadam kod od "Lion_87" i <ul id="wykaz">, czy też <div class="wykaz" i kod krzysztofa to efekt jest ten sam. Obydwa wykazy przyjmują takie same parametry.

Nie wiem co jest.
krzysztof_kf
14.03.2010, 11:00:17
ale tak ale drugi wykaz zrób zmieniając klase .wykaz na naprzykład coś innego czyli

Kod
.wykaz ul, ul li {

}

.wykaz ul a:link, ul a:visited {

}

.wykaz ul a:hover {

}

/* Drugi wykaz */

.wykaz2 ul, ul li {

}

.wykaz2 ul a:link, ul a:visited {

}

.wykaz2 ul a:hover {

}



</style>
<div class="wykaz">
   <ul>
            <li><a href="#">Strona Główna</a></li>
            <li><a href="#">Aktualności</a></li>
            <li><a href="#">Kontakt</a></li>
            <li><a href="#">Przyjaciele</a></li>
            <li><a href="#">Mapa Strony</a></li>
             </ul>
             </div>

<div class="wykaz2">
   <ul>
            <li><a href="#">Strona Główna</a></li>
            <li><a href="#">Aktualności</a></li>
            <li><a href="#">Kontakt</a></li>
            <li><a href="#">Przyjaciele</a></li>
            <li><a href="#">Mapa Strony</a></li>
             </ul>
             </div>
Lion_87
14.03.2010, 11:02:41
no nie powiesz chyba mi że jak wkleisz takie cos to widzisz to samo?
[HTML] pobierz, plaintext 
  1. <style>
  2.  ul, ul li {
  3. 	list-style-image: url('images/point.gif');
  4. 	margin: 0;
  5. }
  6.  
  7. ul a:link, ul a:visited {
  8. 	text-decoration: none;
  9. 	padding: 2px;
  10. 	color: #000;
  11. 	font-size: small;
  12. }
  13.  
  14. ul a:hover {
  15. 	text-decoration: overline underline;
  16. 	padding: 2px;
  17. 	color: #000;
  18. 	font-size: small;
  19. }
  20.  
  21. ul#web{
  22. 	list-style-image: url('images/pop.gif');
  23. 	margin-left: 15px;
  24. }
  25.  
  26. ul#web li{
  27. 	font-weight: bold;
  28. 	font-size: medium;
  29. 	text-decoration: underline;
  30. }
  31.  
  32. ul#web li a:link, ul a:visited{
  33. 	font-weight: bold;
  34. 	font-size: medium;
  35. 	text-decoration: underline;
  36. }
  37.  
  38. ul#web li a:hover{
  39. 	font-weight: bold;
  40. 	font-size: x-small;
  41. 	text-decoration: overline;
  42. }
  43. </style>
  44.  
  45.  
  46.   <ul>
  47. 		<li><a href="#">Strona Główna</a></li>
  48. 		<li><a href="#">Aktualności</a></li>
  49. 		<li><a href="#">Kontakt</a></li>
  50. 		<li><a href="#">Mapa Strony</a></li>
  51. 	</ul>
  52.  
  53. 	<ul id="web">
  54. 		<li>punkt 1</li>
  55. 		<li>punkt 2</li>
  56. 		<li><a href="#">link 1</a></li>
  57. 		<li><a href="#">link 2</a></li>
  58. 	</ul>	
  59.  
  60.  
  61.  
[HTML] pobierz, plaintext
krzysztof_kf
14.03.2010, 11:04:34
tak jak ci lion_87 pisze najlepiej pokaż www bo inaczej się nie dogadamy ;/
KrzysiekKCN
14.03.2010, 16:00:00
Ja się z tym poddałem i stworzyłem po prostu wykaz a do niego link z osobną klasą. i wygląda całkiem nieźle. Jak wrócę do domu to wam wszystko tu wstawię bo tak nie może to pozostać nierozwiązane =).

krzysztof_kf
14.03.2010, 16:03:23
przecież jest wyżej rozwiązane najlepiej jak byś pokazał www z problemem smile.gif
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.