1. Kurz XHTML a CSS 叩st 4: CSS layout - tipy a triky
2. Jak udlat: V鱈cesloupcov箪 layout v r哲zn箪ch barv叩ch Ka転d箪 ze sloupc哲 va邸eho layoutu je jinak vysok箪: e邸en鱈: v邸echny sloupce uzaveme 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 udlat: Centrov叩n鱈 str叩nky na sted okna prohl鱈転ee 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 souadnic鱈ch top: 50%; um鱈st鱈me do poloviny str叩nky margin-top: -250px; posun o polovinu v箪邸ky nahoru }
4. Jak udlat: 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; vnitn鱈 okraj width: 100px; 邸鱈ka polo転ky menu } ul#navigace li a:hover { background: red; barva pozad鱈 po najet鱈 my邸i }
5. Jak udlat: V鱈cestupov叩 navigace pomoc鱈 vnoen箪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 udlat: Oteven鱈 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 potebovat, pokud otev鱈r叩me formul叩 pro vkl叩d叩n鱈 njak箪ch dat. <a href=odkaz.html onclick=return !window.open(this.href)> text odkazu</a> Tak a nauili jsme se n叩邸 prvn鱈 JavaScript, kter箪 pracuje s DOM!
7. Jak udlat: Obr叩zkov辿 roleky >>> http://www.wellstyled.com/css-nopreload-rollovers.html Kdy転 chceme zmnit obr叩zek na pozad鱈 nap鱈klad v navigaci a nechceme pou転鱈t skriptov叩n鱈.
8. Jak udlat: 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 nepijdeme o v箪hodu textov辿ho nadpisu.
9. A te zanou probl辿my :-) Jak辿 chyby potk叩te pi ladn鱈 CSS? Va邸e chyba v XHTML: zeptejte se valid叩toru Va邸e chyba v CSS: zeptejte se valid叩toru Chyba prohl鱈転ee: kdy転 nezn叩te bug, zeptejte se Googlu Chyb叩m prohl鱈転e哲 se asto 鱈k叩 bugy. Nejastji se chyby vyskytuj鱈 v MSIE: >>> http://ie-brouci.dero.name/
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 (pipo鱈t叩v叩 vnitn鱈 okraj - padding a r叩meek - 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 vnj邸鱈 okraj (margin) -- zobraz鱈 se tedy 20px. e邸en鱈: k vlastnostem prvku pidejme je邸t: display: inline;
12. Bug 3: Mizej鱈c鱈 text (Peekaboo) Miz鱈 v叩m v MSIE text v njak辿m bloku? Nejastj邸鱈 e邸en鱈: bloku nadefinujte 邸鱈ku. >>> http://ie-brouci.dero.name/peekaboo.html
