[CSS] Problem ze stylowaniem listy <ul> Opcje

[Lepikur]

O to kod mojej listy

[HTML] pobierz, plaintext 
<ul class="lista1">
<li class="lista2">aaa</li>
<li class="lista2">bbb</li>
<li class="lista2">ccc</li>
</ul>
[HTML] pobierz, plaintext 

I styl css

[HTML] pobierz, plaintext 
ul.lista1
{
background-image:url("foty/krycie50.png");
background-repeat:repeat;
list-style:circle inside;
margin: 40px 5px 5px 5px;
padding:0px;
clear:left;
width
}
li.lista2
{
clear:left;
margin:5px 5px 0px 5px;
padding:2px 2px 2px 2px;
text-align:left;
font-size: 13px;
line-height:15px;
color:black;
}
[HTML] pobierz, plaintext 

Lista ładnie się styluje itd, ale problem pojawią się gdy na końcu strony (w stopce) dodaje drugą listę <ul> (pare linków w poziomie) wtedy cały styl powyższej listy się gubi (natomiast styl listy z linkami w stopce jest zachowany i wszystko gra)

kod html listy w stopce

[HTML] pobierz, plaintext 
<div id="stopka">
		<ul>
			<li><a href="#">KONTAKT</a></li>
			<li><a href="#">WYNAJEM</a></li>
			<li><a href="#">GALERIA</a></li>
			<li><a href="#">O NAS</a></li>
		</ul> 
		</div>
[HTML] pobierz, plaintext 

oraz css

[HTML] pobierz, plaintext 
#stopka
{
margin: 0px auto; 
padding: 0px; 
width:950px;
height:164px;
background-image: url(foty/stopka.jpg);
background-repeat: no-repeat;
}
 
#stopka ul, ul li {
	display: inline;
	list-style: none;
	margin: 80px 5px 5px 5px;
	padding: 0;
}
 
#stopka ul li {
	float: right;
[HTML] pobierz, plaintext 

W czy może być problem gubienia się stylu tej pierwszej listy (ma ona przecięz zadeklarowaną swoją klase i znajduje się w innym DIV'ie)

[Damonsson]

#stopka ul, ul li {
display: inline;
list-style: none;
margin: 80px 5px 5px 5px;
padding: 0;
}

=

#stopka ul {
display: inline;
list-style: none;
margin: 80px 5px 5px 5px;
padding: 0;
}

&

ul li {
display: inline;
list-style: none;
margin: 80px 5px 5px 5px;
padding: 0;
}

(IMG:style_emoticons/default/withstupidsmiley.gif)

[Lepikur]

Faktycznie, głupi błąd... ale mimo wszystko ta emotikona zbędna, dopiero zaczynam zabawę z css.

Dzieki za kolejną pomoc

Ten post edytował Lepikur 14.01.2011, 22:22:37

[Damonsson]

Ale Ty teraz na poważnie?
A więc tak, zacznijmy lekcję 1:

To co zapisałeś jako:
#stopka ul, ul li {}
można zapisać jako:
#stopka ul {}
ul li {}

ul li {} - oznacza przypisz dla KAŻDEGO 'li' występującego po 'ul' dane wartości np.: display:inline , jeżeli nie ma nadrzędnych takich samych poleceń dla danego li, na przykład jakiegoś #id albo .class

więc jeżeli każdy li ma być inline, no to jest inline. Bo w .lista2 nie definiujesz display, więc jest pobierany z tamtego wpisu.


edit na @up edit:To ja tu się produkuję, a Ty już zrozumiałeś, ehh (IMG:style_emoticons/default/winksmiley.jpg)

Ten post edytował Damonsson 14.01.2011, 22:28:12