restauracyjne menu w css

Jak zrobić menu za pomocą css’a?

Poradnik „krok  po kroku”

CSS – A Recipe for Success

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.

Kategorie
Bez kategorii

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:

http://www.sitepoint.com/dustmeselectors/

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:

  1. umieszczamy w bookmarkach
  2. wybieramy stronę
  3. klikamy w zakładkę XRAY
  4. 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ć.

Kategorie
Bez kategorii

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.

CSSTidy

Instalacja na debianowatych jest trywialna :

sudo apt-get install csstidy

Kategorie
Bez kategorii

70 Expert Ideas For Better CSS Coding

Dokument pełen trików, podpowiedzi, metod, technik i rozwiązań.

Kategorie
Bez kategorii

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.

Kategorie
Bez kategorii

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

  1. nadać dokładne reguły koloryzujące LI
  2. nadać dokładną długość elementu LI