CSS – ładne zawijanie LI

Dosyć często na różnych stronach można spotkać taki widok:

Chodzi o odpowiednie formatowanie listy nieposortowanej, tak, aby była w 2 lub więcej kolumnach.

Mimo wszystko, jest z tym mały kłopot.

Oto jak ludkowie z ks-ekspert pomogli mi to rozwiązać:

<style type=”text/css”>
ul li{
float:left;
width:100px;
}
#kontener{
float:letf;
width:300px;
}
</style>

<div id=”kontener”>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
<li>Element 4</li>
<li>Element 5</li>
<li>Element 6</li>
</ul>
</div>

Optymalizacja

Jako że skończyłem praktycznie moją stronę domową, zabrałem się za jej optymalizację, którą podzieliłem na kilka etapów (w nawiasach podane ile dało się zaoszczędzić):
- code cleanup (10kb)
- optymalizacja kodu php (2 kb)
- optymalizacja kodu mysql (zyskałem trochę na czasie)
- optymalizacja kodu css (2kb: http://iceyboard.no-ip.org/projects/css_compressor)
- optymalizacja obrazków (z 1024 kb zrobiło się 18kb!)
- optymalizacja obrazków dzieliła się na:
-znalezienie punktów wspólnych obrazków, zmniejszenie ich rozmiarów
-kompresja z użyciem optipng (7 poziom kompresji)
-tam, gdzie był mały/praktycznie żaden spadek jakości, użyłem jpg

Cała strona, waży teraz dokładnie 24kb.

CSS i ramka wokół URL

Często nieporządanym efektem jest, zwłaszcz w czasach gdy sporo aplikacji używa Ajaxa, tworzenie brzydkiej ramki wokół linka, po jego naduszeniu.
Możemy to łatwi naprawić, wklepując w css, bądź podając jako styl:
a {outline: none;}