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
<base href="http://klient.plavacek.net/stejne-vysoke-sloupce/"> <title>Tři sloupce stejně vysoké</title> <body> <h1>Stejně vysoké sloupce</h1> <!-- main block --> <div id="main"> <!-- one box --> <div class="box"> <div class="in"> <h2>Jeden box, kobercovka, strouhanka, fytopuf</h2> <p class="img"><img src="img1.gif" alt="Jejda"></p> <p>Efektu stejné výšky je dosaženo opakováním obrázku na pozadí bloku <code>main</code>. Efekt dokresluje obrázek na pozadí bloku <code>end</code>, který ukončí obtékání plovoucích prvků.</p> <p><strong>Chrochtám blahem</strong></p> </div> <hr> </div> <!-- one box --> <div class="box"> <div class="in"> <h2>Jeden box</h2> <p class="img"><img src="img3.gif" alt="Jejda"></p> <p>Řešení je použitelné všude, kde máme kontrolu nad počtem bloků na stránce.</p> <p><strong>Nechrochtám blahem</strong></p> </div> <hr> </div> <!-- one box --> <div class="box"> <div class="in"> <h2>Nadpis rotažený na více řádků</h2> <p class="img"><img src="img2.gif" alt="Jejda"></p> <p>Box s názvem <code>in</code> je prachobyčejná matrjoška, která obchází problémy s rozdílným boxmodelem.</p> <p><strong>Je mi to buřt</strong></p> </div> <hr> </div> <!-- clear float, bottom background --> <div class="end"> </div> <!-- clear float, bottom background --> <!-- one box --> <div class="box"> <div class="in"> <h2>Jeden box</h2> <p class="img"><img src="img2.gif" alt="Jejda"></p> <p>Testováno na IE6, IE7, FF 2, Safari, Opera 9.22, takže by to mělo šlapat všude. Celý příklad i s obrázky si můžete <a href="stejne-vysoke-sloupce.zip">stáhnout</a>.</p> <p><strong>Chrochtám blahem</strong></p> </div> <hr> </div> <!-- one box --> <div class="box"> <div class="in"> <h2>Jeden box</h2> <p class="img"><img src="img3.gif" alt="Jejda"></p> <p>Ny rás limkřost a kruz doubachůl k žunou s hřouh. Chrocht z bropzoptyno pozaď úkln a táží moveluh hřouzeku darout símez. Přiť ziťmípou mok vrekté na drostaprášt hesi křukto</p> <p><strong>Nechrochtám blahem</strong></p> </div> <hr> </div> <!-- one box --> <div class="box"> <div class="in"> <h2>Jeden box</h2> <p class="img"><img src="img1.gif" alt="Jejda"></p> <p>Malu hrám k ptalu ptym křoháť kry bréluma lemě, chroch z bropzoptyno pozaď úkln a táží moveluh hřouzeku darout símez. Můh lestů luď. Přiť ziťmípou mok vrekté na drostaprášt hesi křukto o tu vobryj ulatu</p> <p><strong>Je mi to buřt</strong></p> </div> <hr> </div> <!-- one box --> <!-- clear float, bottom background --> <div class="end"> </div> <!-- clear float, bottom background --> </div> <!-- main block --> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* tohle bezne nedelejte - jen jsem si usetril praci */ * { margin: 0; padding: 0; text-align:center; } /* tohle bezne nedelejte - jen jsem si usetril praci */ html { font-size: 100.01% } body { font-family:Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.4; padding: 25px 0 50px 0; background: #dadada url("body.gif") } #main { width: 900px; margin: 0 auto; background: #fff url("main.gif"); border-top: 5px solid #fff } .box { width: 300px; display: inline; float: left; overflow:hidden } .in { padding: 10px 15px ; } .end { clear: both; width: 100%; background: #990000 url("end.gif") no-repeat; font-size: 1px; line-height: 1px; height: 10px; border-bottom: 10px solid #fff; } h1 { text-align: center; color: #336699; padding: 0 0 25px 0; font-size:150% } h2 { font-size: 130%; background: #336699; color: #fff; padding: 10px; } p { font-size: 90%; padding: 10px; } p strong { color: #900000; font-size: 110% } p.img { text-align: center; padding: 15px 0 5px 0 } p img { border: 5px solid #fff; } hr { display: none; } a:link { color: #336699 } a:hover { color: #b80000 }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>