ipsace i tiskace

Máte? Tak se soustřeďte.
Jak vidíte, boxíky vlevo jsou orámovány a vybarveny jednotně v rámci celé navigace. "Navigace" je id toho největšího chléva (boxu) vlevo, uvnitř kterého ty menší boxíky jsou. Protože jsem chtěl, aby všechny boxíky uvnitř navigace měly stejný rámeček, udělal jsem to pravidlem: #navigace div {border: 4px solid #469;} Jenže uvnitř těch menších boxíků jsou ještě další vnořené divy, na které se dědí uvedené pravidlo. Takže každý odkaz v menu by měl okolo sebe stejně tlustý rámeček, z čehož by se vám asi dělalo nevolno.

Snadná pomoc, CSS nabízí selektor omezující pravidlo na potomka, malé divy zůstanou neovlivněny. Jednoduché, jasné, sláva! #navigace > div {border: 4px solid #469;} Úsměv ovšem ztuhne, když zjistíme, že všivý IE si s tím vůbec neporadí.
Takže po krátkém nadávání věc řešíme jinak. Nadefinujeme selektor, který odstraní rámečky z malých divů vnořených ve druhé a vyšší úrovni (viz druhý řádek): #navigace div {border: 4px solid #469; margin: 20px 3px;} #navigace div div {border: none; margin: 0;} Tohle pochopí a zobrazí i exploder. Nač to dělat jednoduše, když to jde složitě. Na čas je klid, ale zádrhel se objevuje u chléva s počítadlem, všechno je na sebe namačkané, vypadá to ohavně. Přícinou je nulový margin, který jsem předepsal pro výše řečené malé divy. Taktéž počítadlo je z hlediska toho pravidla malým divem, vnořeným ve druhé úrovni. Kromě toho je černými číslicemi, potřebuje nastavit pozadí na světlé.

Jelikož všechny tyto objeky mají jedinečné ID, není problém každý samostatně předefinovat. To bude brnkačka: #pocitadlo {background-color: #acd;} #sluzby div {margin: 10px 0;} Ha! Zrada! Žádná změna. Exploder trucuje, zkusím mozillu... mozilla taky!! Jak to? Zkouším tam narvat kilometrový margin. Nic. Vylučuju chybu v syntaxi, překlep, cache, kabel k bedýnkám... po určité době jsem blízko stavu bezohledného mlácení do monitoru.

V poslední chvíli se mi rozsvítilo: kaskáda!!

Vyšší prioritu má počet id a počet atributů v selektoru, takže ty dřívější definice, zvláště pak ta z druhého řádku nahoře, jsou "silnější".
Chvíli si nevím rady, co s tím, přemýšlím o !important, což je ale čuňárna! Pak mi dochází, jak je to jednoduché. Tady je to celé: #navigace {position: absolute; top: 340px; width:170px; padding: 10px; border-right:5px solid #001; border-bottom:5px solid #001;} #navigace div {margin: 13px 3px 28px; border: 4px solid #469; padding: 0px 2px 10px 6px; background-color: #2c4060;} #navigace div div {border:none; padding:0; margin: 0;} #navigace #sluzby {font-size:smaller; margin: 16px 3px 4px} #navigace #sluzby div {margin: 10px 0;} #navigace #sluzby #pocitadlo {background-color: #acd; margin: 14px auto 18px 2px; width: 6em; padding: 3px 8px;} Sledujte poslední řádek. Prostě stačí do selektoru narvat všechny "idéčka", co k danému objektu vedou.

Pocit osvícení patří k tomu nejlepšímu, co lze zažít :-)