Jak zrobić menu za pomocą css’a?
Poradnik “krok po kroku”
Przeładuj CSS’y – CSS Cachebuster
Przeładowywanie arkuszy, bez przeładowania strony. Potrzebne?
CSS Cachebuster
Jak zwykle z bookmarkletem, kliknij prawym klawiszem na powyższym odnośniku i wybierz j “zapisz jako” lub po prostu przeciągnij do do bookmarków.
Zakurzony CSS, czas to wyczyścić
Czy nie zdarzyło ci się, że wieloletnie budowanie strony nie doprowadza do zaśmieconych cssów, z którymi do końca nie wiadomo co zrobić. Bo albo żmudne czesanie zbędnych selektorów, albo pisanie od nowa. Albo:
XRAY – przejrzyj stronę
XRAY to malutkie narzędzie zwane bookmarklet’tem. Działa w przeglądarkach: Safari, Firefox, Camino oraz Mozilla. Bardzo proste użycie:
- umieszczamy w bookmarkach
- wybieramy stronę
- klikamy w zakładkę XRAY
- klikamy w element który chcemy prześwietlić
Przejdź na stronę produktu: http://westciv.com/xray/
Code Beautifier
Chciałbyś zaoszczędzić na zbędnych znakach w swoich arkuszach CSS?
Rozwiązaniem jest Code Beautifier.
Ostrożnie, kompresując maksymalnie może się troszkę strona rozjechać.
CSSTidy – program do optymalizacji arkuszy CSS
CSSTidy to opensource’owe oprogramowanie do optymalizacji arkuszy CSS. Można pobrać program (dostępność dla Windows, Linuxa i OSX) którym potem testujemy i optymalizujemy arkusze.
Instalacja na debianowatych jest trywialna :
sudo apt-get install csstidy
70 Expert Ideas For Better CSS Coding
Dokument pełen trików, podpowiedzi, metod, technik i rozwiązań.
Tworzenie layoutu – krok po kroku
Creating a CSS Layout from scratch – bardzo przyjaźnie opisane, krok po kroku jak wytworzyć layout oparty o box-model.
ciekawe zachowanie IE
W czasie pracy nad jednym z serwisów pojawił się dość ciekawy błąd IE.
Mianowicie dla kodu:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
html,body,ul,ol,li{margin:0;padding:0}
ul{list-style-type:none}
a{text-decoration:none}
#menumain{width:185px}
#menumain ul{background-color:#455}
#menumain a,#menumain .first li a{color:#fff}
#menumain a,#menumain .first li a{display:block}
#menumain a,#menumain .first li a{border-top:1px solid #fff}
#menumain a,#menumain .first li a{padding:4px}
#menumain ul ul{background-color:#678}
#menumain ul ul .on{background-color:#f13}
#menumain .on ul a{padding-left:17px}
</style>
</head>
<body>
<div id="menumain">
<ul>
<li class="on first"><a href="#">Wybory samorządowe</a>
<ul>
<li class="on"><a href="#">Geografia</a></li>
<li><a href="#">Komitety</a></li>
</ul>
<li><a href="#">Dokumenty wyborcze</a></li>
<li><a href="#">Akty prawne</a></li>
<li><a href="#">Mapa serwisu</a></li>
</ul>
</div>
</body>
</html>
Mozecie sobie pobrać spakowane źródło tego przypadku.
W dość nieoczekiwany sposób, IE zaczął kolorwać następne LI kolorem tła nadrzędnego UL.
wygląd w ie
W firefox’ie oczywiście wszystko ok:
wygląd w ff
Generalnie okazało się, że to nadrzędne li po prostu “spada” niżej. Co oczywiście nie powinno mieć miejsc.
Rozwiązanie
- nadać dokładne reguły koloryzujące LI
- nadać dokładną długość elementu LI