Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Problem ze stylowaniem listy <ul>
Forum PHP.pl > Forum > Po stronie przeglądarki
Lepikur
O to kod mojej listy
  1. <ul class="lista1">
  2. <li class="lista2">aaa</li>
  3. <li class="lista2">bbb</li>
  4. <li class="lista2">ccc</li>
  5. </ul>


I styl css
  1. ul.lista1
  2. {
  3. background-image:url("foty/krycie50.png");
  4. background-repeat:repeat;
  5. list-style:circle inside;
  6. margin: 40px 5px 5px 5px;
  7. padding:0px;
  8. clear:left;
  9. width
  10. }
  11. li.lista2
  12. {
  13. clear:left;
  14. margin:5px 5px 0px 5px;
  15. padding:2px 2px 2px 2px;
  16. text-align:left;
  17. font-size: 13px;
  18. line-height:15px;
  19. color:black;
  20. }


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
  1. <div id="stopka">
  2. <ul>
  3. <li><a href="#">KONTAKT</a></li>
  4. <li><a href="#">WYNAJEM</a></li>
  5. <li><a href="#">GALERIA</a></li>
  6. <li><a href="#">O NAS</a></li>
  7. </ul>
  8. </div>

oraz css
  1. #stopka
  2. {
  3. margin: 0px auto;
  4. padding: 0px;
  5. width:950px;
  6. height:164px;
  7. background-image: url(foty/stopka.jpg);
  8. background-repeat: no-repeat;
  9. }
  10.  
  11. #stopka ul, ul li {
  12. display: inline;
  13. list-style: none;
  14. margin: 80px 5px 5px 5px;
  15. padding: 0;
  16. }
  17.  
  18. #stopka ul li {
  19. float: right;


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;
}

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

Dzieki za kolejną pomoc
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 winksmiley.jpg
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.