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.
9.
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="print.css" rel="stylesheet" type="text/css" media="print" /> CSS: body { width: 90%; zúžíme šířku dokumentu } #navigace { display: none; nezobrazujeme prvky, které nechceme }