od zera do webmastera

CSS LISTA

typ 01
  • lista1
  • lista zagniezdżona stąd
    • pio11
    • pio22
    • pio33
  • lista2
  • lista zagniezdżona stąd
    • poz44
    • poz55
    • poz66
  • lista3


<div id="lista-typ01">
<ul>
<li>lista1</li>
<li>lista zagniezdżona stąd<ul>
<li>pio11</li>
<li>pio22</li>
<li>pio33</li></ul></li>
<li>lista2</li>
<li class="poziom">lista zagniezdżona stąd<ul>
<li>poz44</li>
<li>poz55</li>
<li>poz66</li></ul></li>
<li>lista3</li>
</ul>
</div>

Tak wygląda lista w stanie naturalnym. Teraz dodajmy jej CSS cechy, zmniejszmy ten odstep z lewej, a drugą liste zagniezdzoną, wbrew naturalnemu układowi listy ustawmy poziomo.


typ 02
  • lista1
  • lista zagniezdżona stąd
    • pio11
    • pio22
    • pio33
  • lista2
  • lista zagniezdżona stąd
    • poz44
    • poz55
    • poz66
  • lista3


#lista-typ02 ul {margin-left:-20px !important;
margin:auto auto auto 20px;}
#lista-typ02 .poziom li {display:inline; padding:10px;}

Ustawienie listy by przysunęła się do marginesu, wbrew pozorom okazuje się trudne. Trudność polega oczywiście, że Internet Explorer wszystko robi po swojemu. Zastosowałem tu "sposobik" ktory wymusza na przeglądarkach jakąś wartość !IMPORTANT i napisaniu jeszcze raz wartości tylko dla IE która zignoruje !IMPORTANT. Takie sztuczki maja wadę wrodzoną, pojawią się przeglądarki które inaczej zinterpretują kod i może to nie być ta interpretacja którą pragnelibyśmu ujrzeć. Na razie jednak FF i IE pogodzone. 

Proszę tu zwrócić uwagę że gdy lista ustwia sie poziomo to traci te kropki przed napisami, tak charakterystyczne dla list. Teraz dalej zlikwidujemy ich jeszcze więcej, gdyż spróbujemy przerobić liste na przyciski menu. zmodyfikujmy troche HTML wprowadzając dla pozycji menu zagnieżdżonych udawany odnośnik (może być i nieudawany) <a href="#">jakiś tekst</a>

typ 03


#lista-typ03 ul {margin-left:-20px !important;
margin:auto auto auto 20px;}
#lista-typ03 li li {list-style-type: none; padding:4px;}
#lista-typ03 .poziom li {display:inline; padding-left:10px; list-style-type: none;}
#lista-typ03 a{ background-color: #BCC2A9; text-decoration: none; border-top: 1px solid #fff; border-bottom: 1px solid #b0c000; }
#lista-typ03 a:hover { background-color: #eee; border-top: 1px solid #BCC2A9; border-bottom: 1px solid #fff; }

Spójrzmy na kod, w drugiej pozycji mamy taki zapis dla klasy LISTA-TYP03 LI LI, to nie pomyłkowe powtórzenie, to taki zapis ktory mówi przeglądarce, że chodzi nam o LI zagnieżdżone w LI, dało to że usunęły się kropki w liście zagnieżdżonej a pozostały w nadrzędnej. Przy pojedynczym LI w tym zapisie, zlikwidowały by się kropki wszędzie. Można było to samo osiągnąć nadając CLASS zagnieżdżonej liście, ale taki sposób z podwójnym LI LI jest oszczędniejszy w pisaniu
Taka lista już może działać jako menu, ale chciałbym by przyciski, były szersze. Teraz napisy mają podobną długość i to dobrze wygląda, ale gdy w menu będą raz dłuższe raz krótsze, będzie chyba gorzej. Gdy próbowałem dodać WIDTH, to okazało się to bezcelowe ponieważ wcześniej dałem DISPLAY: INLINE, zadziała tylko na elementy blokowe. Dodanie DISPLAY:BLOCK popsuło ten fragment listy wyświetlany w poziomie. Trzeba było inaczej...zamieniając DISPLAY:INLINE na DISPLAY:BLOCK i dodając by utrzymać ten poziom FLOAT:LEFT. FLOAT jednak zadziałał roównież na ostatni element listy "lista3", musiałem więc dodać CLASS CZYSC i dać mu cechę CLEAR:BOTH przypisując to do ostatniego elementu listy.
Kod się troszkę już skomplikował, bo starałem się jakoś upiększyć te przyciski i daś im ten kuszący wygląd 3D.

typ 04


#lista-typ04 ul {margin-left:-20px !important; margin:auto auto auto 20px;}
#lista-typ04 li li {list-style-type: none; padding-bottom:1px; border:1px solid green; width:90px;}
#lista-typ04 .poziom li {float:left; padding-right:1px; list-style-type: none; border:1px solid green;}
#lista-typ04 a{ background-color: #BCC2A9; color:#475; text-decoration: none; border-top: 1px solid #fff; border-bottom: 1px solid #b0c000; display:block; width:90px; text-align: center; }
#lista-typ04 a:hover { background-color: #eee; color: #c6c; border-top: 1px solid #BCC2A9; border-bottom: 1px solid #fff; }
.czysc{ clear:both;}

Naprawde dużo o listach na stronie maxdesign lecz takiego rozwiązania jak powyżej tam nie ma :-)