Wykazy w CSS, Problem z określeniem 2 różnych wykazów. Opcje

[KrzysiekKCN]

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 
ul, ul li {
	list-style-image: url('images/point.gif');
	margin: 0;
}
 
ul a:link, ul a:visited {
	text-decoration: none;
	padding: 2px;
	color: #000;
	font-size: small;
}
 
ul a:hover {
	text-decoration: overline underline;
	padding: 2px;
	color: #000;
	font-size: small;
}
[HTML] pobierz, plaintext 

a w html mam tak:

[HTML] pobierz, plaintext 
 
                  <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>
[HTML] pobierz, plaintext 

Teraz problem jak stworzyć drugi wykaz. Wczytałem w necie że taki kod:

[HTML] pobierz, plaintext 
p.web {
	font-weight: bold;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<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 
ul.web{
	list-style-image: url('images/poin2t.gif');
	margin: 0;
}
li.web{
	color: blue;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
	<ul class="web">
		<li>Lol</li>
		<li>Lol</li>
	</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]

[HTML] pobierz, plaintext 
ul#list{
 
}
 
ul#list li{
 
}
 
ul#list li a{
 
}
 
ul#list li a:hover{
 
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
ul#cos{
 
}
 
ul#cos li{
 
}
 
ul#cos li a{
 
}
 
ul#cos li a:hover{
 
}
[HTML] pobierz, plaintext 

[KrzysiekKCN]

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 
ul, ul li {
	list-style-image: url('images/point.gif');
	margin: 0;
}
 
ul a:link, ul a:visited {
	text-decoration: none;
	padding: 2px;
	color: #000;
	font-size: small;
}
 
ul a:hover {
	text-decoration: overline underline;
	padding: 2px;
	color: #000;
	font-size: small;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
			<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="#">Mapa Strony</a></li>
			</ul>
[HTML] pobierz, plaintext 

Wykaz 2:

[HTML] pobierz, plaintext 
ul#web{
	list-style-image: url('images/pop.gif');
	margin-left: 5px;
}
 
ul#web li{
	font-weight: bold;
	font-size: medium;
	text-decoration: underline;
}
 
ul#web li a:link, ul a:visited{
	font-weight: bold;
	font-size: medium;
	text-decoration: underline;
}
 
ul#web li a:hover{
	font-weight: bold;
	font-size: x-small;
	text-decoration: overline;
}
[HTML] pobierz, plaintext 

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

A i w tym wykazie 2 reagują tylko LINKI. Normalne punkty nawet nie zmieniają kolorów.

[Lion_87]

Bo nie class a id?

[krzysztof_kf]

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

Ten post edytował krzysztof_kf 14.03.2010, 10:32:32

[KrzysiekKCN]

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]

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>

Ten post edytował krzysztof_kf 14.03.2010, 11:03:30

[Lion_87]

no nie powiesz chyba mi że jak wkleisz takie cos to widzisz to samo?

[HTML] pobierz, plaintext 
<style>
 ul, ul li {
	list-style-image: url('images/point.gif');
	margin: 0;
}
 
ul a:link, ul a:visited {
	text-decoration: none;
	padding: 2px;
	color: #000;
	font-size: small;
}
 
ul a:hover {
	text-decoration: overline underline;
	padding: 2px;
	color: #000;
	font-size: small;
}
 
ul#web{
	list-style-image: url('images/pop.gif');
	margin-left: 15px;
}
 
ul#web li{
	font-weight: bold;
	font-size: medium;
	text-decoration: underline;
}
 
ul#web li a:link, ul a:visited{
	font-weight: bold;
	font-size: medium;
	text-decoration: underline;
}
 
ul#web li a:hover{
	font-weight: bold;
	font-size: x-small;
	text-decoration: overline;
}
</style>
 
 
  <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="#">Mapa Strony</a></li>
	</ul>
 
	<ul id="web">
		<li>punkt 1</li>
		<li>punkt 2</li>
		<li><a href="#">link 1</a></li>
		<li><a href="#">link 2</a></li>
	</ul>	
 
 
 
[HTML] pobierz, plaintext 

[krzysztof_kf]

tak jak ci lion_87 pisze najlepiej pokaż www bo inaczej się nie dogadamy ;/

[KrzysiekKCN]

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]

przecież jest wyżej rozwiązane najlepiej jak byś pokazał www z problemem