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
<html> <body> <div id="obal"> <div id="panel"> <div class="odsadenie"> <p>Obsah postranného panelu</p> <ul> <li>1. položka</li> <li>2. položka</li> <li>3. položka</li> <li>4. položka</li> <li>5. položka</li> </ul> <p>Nejaká informácia</p> <h3>Vyhľadávanie</h3> <input type="text"> <p class="info">Ďalšia dôležitá informácia, ktorú nesmieme prehliadnuť.</p> <div class="clear"></div> </div> </div> <div id="obsah"> <div class="odsadenie"> <p>Hlavný obsah</p> <div class="obtekany-obsah"> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> </div> </div> </div> <div class="clear"></div> <div id="pata"> <p>© Autor 2015</p> </div> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html, body { height: 100%; } body { margin: 0; } .clear { clear: both; } .odsadenie { padding: 5px; } #obal { min-height: 100%; width: 960px; margin: 5px auto; position: relative; border: 1px solid black; padding-bottom: 4em; } #panel { float: left; width: 240px; margin: 2px; border: 1px solid black; } #obsah { margin: 2px 2px 2px 246px; border: 1px solid black; } #pata { position: absolute; bottom: 0; margin: 2px; border: 1px solid black; width: 100%; text-align: center; } .info { color: purple; } .obtekany-obsah {overflow: auto;} .obtekany-obsah div { float: left; width: 50%; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>