CSS LISTA

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.

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>

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.