1. Kurz XHTML a CSS Část 4: CSS layout - tipy a triky

2. Jak udělat: Vícesloupcový layout v různých barvách Každý ze sloupců vašeho layoutu je jinak vysoký: Řešení: všechny sloupce uzavřeme do bloku, který bude na pozadí zobrazovat opakující se obrázek s barevným schématem. Navigace (id=“navigace“) Obsah (id=“obsah“)

3. Jak udělat: Centrování stránky na střed okna prohlížeče Centrování na šířku: #obal { margin-left: auto; margin-right: auto; } Centrování na výšku: jen když známe výšku prvku! #obal { height: 500px; musíme znát výšku position: absolute; umístíme prvek na souřadnicích top: 50%; umístíme do poloviny stránky margin-top: -250px; posun o polovinu výšky nahoru }

4. Jak udělat: Horizontální navigace pomocí seznamu ul#navigace { background: blue; } ul#navigace li { margin: 0; padding: 0; } ul#navigace li a { float: left; řadí se zleva display: block; je to blokový prvek padding: 5px; vnitřní okraj width: 100px; šířka položky menu } ul#navigace li a:hover { background: red; barva pozadí po najetí myši }

5. Jak udělat: Vícestupňová navigace pomocí vnořených seznamů >>> http://www.jsdesign.cz/tipy/horizontalni-menu.php Využívá CSS, a „behaviors“ -- definici chování vzhledu stránky v MSIE.

6. Jak udělat: Otevření odkazu do nového okna Odkazy do nového okna není vhodné v běžném užití otevírat. Můžeme to ale například potřebovat, pokud otevíráme formulář pro vkládání nějakých dat. <a href=„odkaz.html“ onclick=”return !window.open(this.href)”> text odkazu</a> Tak a naučili jsme se náš první JavaScript, který pracuje s DOM!

7. Jak udělat: Obrázkové rolečky >>> http://www.wellstyled.com/css-nopreload-rollovers.html Když chceme změnit obrázek na pozadí například v navigaci a nechceme použít skriptování.

8. Jak udělat: Obrázek místo textu >>> http://www.wellstyled.com/css-replace-text-by-image.html Když nám dostupné fonty nestačí a pro nadpisy chceme použít text s efektem. Tímto řešením navíc nepřijdeme o výhodu textového nadpisu.

10. Bug 1: Velikost boxu MSIE 6 má 2 módy: standardní a nestandardní (quirk) V nestandardním módu špatně počítá velikost boxu (připočítává vnitřní okraj - padding a rámeček - border). Řešení: Vždy svůj XHTML dokument definujte jako XHTML Sctrict. MSIE bude ve standardním módu -- a máte klid!

11. Bug 2: Dvojitý margin div { float: left; margin-left: 10px; } V MSIE 6 tato definice zdvojnásobuje vnější okraj (margin) -- zobrazí se tedy 20px. Řešení: k vlastnostem prvku přidejme ještě: display: inline;

12. Bug 3: Mizející text (Peekaboo) Mizí vám v MSIE text v nějakém bloku? Nejčastější řešení: bloku nadefinujte šířku. >>> http://ie-brouci.dero.name/peekaboo.html

13. CSS pro tisk XHTML: <link href=&quot;print.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;print&quot; /> CSS: body { width: 90%; zúžíme šířku dokumentu } #navigace { display: none; nezobrazujeme prvky, které nechceme }

14. Děkuji za pozornost www.vzhurudolu.cz/xhtml-css