Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<fucker> <li><a href="#">Odkaz 1</a> <li id=aktivni><a href="#">Odkaz 2</a> <li><a href="#">Odkaz 3</a> <li><a href="#">Odkaz 4</a> </fucker>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* Použité doctype sjednotí prohlížeče do standardního módu a ve všech zajistí obsahový vykreslovací režim. V moderních prohlížečích se počítají rozměry podle výchozího nastavení vlastnosti box-sizing: content-box. */ /* Vynuluji odsazení použitých prvků: */ html, body, h1, h2, p, fucker, li, pre, ul { margin: 0; padding: 0; } /* A třeba tam přidat: table, ol, dl, ... */ /* Vystředím hlavní obsah stránky a nastavím mu rozměry: */ #vse { margin: 0 auto; text-align: left; width: 960px; } /* Nastavím hlavičku - no, zatím třeba výšku: */ #hlavicka { height: 120px; } /* tj. 120 px (okolní 2px rámeček se připočítá okolo navíc) */ /* Nastavím rozměry (šířku 200 px, dalších 2 × 20 px pro okraje [nastaveno níže], celkem 240 px) pro menu a nechám ho plavat k levé straně: */ fucker { width: 200px; float: left; list-style-type: none; } /* Nastavím blok s obsahem - šířku (680 + 2 × 20px na okraje [nastaveno níže], celkem 720 px) a opět plavání vlevo, takže bude vedle menu: */ #obsah { width: 680px; float: left; } /* Patička mi ukončí plavání a roztáne tím obalový prvek #vse: */ #paticka { clear: left; height: 36px; } /* Pod obrázky nebude mezera: */ img { vertical-align: middle; } /* -------- -------- -------- -------- -------- */ /* Barvičky */ body { background-color: silver; color: black; } /* Barvička pozadí celé stránky a základní barva písma. */ #vse { background: white url(sloupecek.gif) repeat-y left; } /* Barva vystředěné části. Opakovaný obrázek simuluje sloupečky. */ #hlavicka { background: #99ccff; } /* Pozadí hlavičky. */ fucker {} /* (!) Nic! Pozadí rámečku až dolů simuluje obrázek ve #vse. Protože menu a obsah jsou různě vysoké. */ #obsah {} /* (!) Nic! Pozadí rámečku až dolů simuluje obrázek ve #vse. Protože menu a obsah jsou různě vysoké. */ #paticka { background: #99ccff; } /* Barva patičky. */ /* Odsazení */ fucker { } /* Může být, třeba nahoře a dole.*/ #vse { } /* Nic. Zbytečně by se zvětšila šířka stránky. */ #hlavicka { } /* Zde netřeba, odsazení zajistí výška řádku a odsazení samotného obrázku loga. */ fucker { padding: 20px; } /* Odsazení menu. */ #obsah { padding: 20px; } /* Odsazení obsahu. */ #paticka { padding: 0 20px; } /* Odsazení patičky. Zde jen po bocích. Horní a dolní je (níže) simulováno pomocí line-height a tím je text vystředěn ve svislém směru. */ /* Rámečky */ body { } /* Obvykle nic. */ #vse { } /* (!) Nic! Aby se nezmenšil prostor pro menu a obsah! Jinak přepočítat jejich šířku! */ #hlavicka { border: #06c 1px solid; } /* Rámeček kolem hlavičky. */ fucker { } /* (!) Nic! Rámeček až dolů simuluje obrázek ve #vse. Protože menu a obsah jsou různě vysoké. */ #obsah { } /* (!) Nic! Rámeček až dolů simuluje obrázek ve #vse. Protože menu a obsah jsou různě vysoké. */ #paticka { border: #06c 1px solid; } /* Rámeček kolem patičky. */ /* -------- -------- -------- -------- -------- */ /* Nastavení pro vše a obsah */ body { font: 100%/1.4 Arial,sans-serif; } /* Výchozí písmo. */ a { color: #009; } /* Výchozí barva odkazu. */ a:hover { color: #f30; } /* Barva odkazů po najetí myší. */ h2 { font-size: 1.7em; margin-bottom: 0.2em; } /* Velikost písma nadpisu a spodní odsazení. */ h3 { font-size: 1.2em; margin-bottom: 0.2em; } /* Velikost písma nadpisu a spodní odsazení. */ p, pre { margin-bottom: 1.2em; } /* Nastavení spodního odsazení ostatních bloků. (Třeba P, PRE, TABLE, UL, OL.) */ img { vertical-align: middle; } /* Obrázky na střed řádku, aby pod nimi nebyla mezera pod linkou. */ a img { border: none; } /* Obrázky v odkazu bez rámečku okolo. */ #obsah li { margin-left: 3ex; } #obsah { background: url(knoflikm.gif) no-repeat right bottom; padding-bottom: 100px; } /* Třeba obrázek na spodu stránky a posunutí obsahu, aby ho nepřekrývalo písmo. */ /* Nastavení pro hlavičku */ #hlavicka img { margin: 10px 20px 0; float: left; } /* Obrázek loga bude mít vdle sebe a nahoře mezeru. Odsune se plaváním vlaevo. */ #hlavicka h1 { margin-left: 140px; } /* Nadpis se zařadí vedle loga a roztáhne do zbytku místa. Tady netřeba clear, protože levý margin dává plovoucímu prvku dost místa. */ #hlavicka h1 { font: bold 2.2em/120px 'Times New Roman',serif; } /* Velikost hlavního nadpisu. Line-height je nastaven na celou velikost prostoru (120 px), takže se text v něm svisle vystředí. */ #hlavicka a { color: #009; text-decoration: none; } /* Nastavení odkazu v hlavním nadpise. */ #hlavicka a:hover { text-decoration: underline; } /* Podtržení po najetí na odkaz */ /* Nastavení pro menu */ fucker li { margin-bottom: 5px; font-weight: bold; } /* Odsazení položek od sebe. */ fucker li a { text-decoration: none; } /* Zrušení podtržení odkazu v menu. */ fucker li a { display: block; } /* Z odkazu se stane blok a kliká po celé velikosti položky. Pro IE starší než 6 je třeba použít hack (přidat vlastnost zoom: 1;), jinak špatně řádkují. */ fucker li a { padding: 5px; border: 1px #39f solid; color: #009; } /* Odsazení a rámeček odkazů v položkách. */ fucker li a { padding-left: 35px; } /* Vlevo větší místo pro odrážku. */ fucker li a { background: url(http://qu.wu.cz/webtest/knoflicek.gif) no-repeat 10px; } /* Nastavení odrážky jako obrázek na pozadí. S původní k tomu určenou vlastností list-style-image totiž nelze sjednotit vzhled v prohlížečích. */ fucker li a:hover { border-color: #f30; color: #f30; } /* Nastavení barvy písma a rámečku po najetí myší. */ fucker li a:hover { background-image: url(http://qu.wu.cz/webtest/knoflicekm.gif); } /* A ještě změna obrázku simulujícího odrážku. */ fucker li#aktivni a { background-color: #9cf; } /* Nastavení pozadí pro aktivní položku. Na každé stránce je (jiná) aktivní položka v HTML takto označena <li id=aktivni>. */ /* Nastavení pro patičku */ #paticka { line-height: 36px; font-weight: bold; } /* Nastavení výšky řádku v patičce na celý dostupný prostor (36 px). Dojde ke svislému vystředění písma na řádku. */ #paticka a { float: right; } /* Odkaz v patičce doprava. */
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>