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
<div id="stranka"> <div id="hlavicka"> <div id="minilogo">Sem patří obsah pro id "minilogo"</div> <div id="textlogo">Sem patří obsah pro id "textlogo" - text text text text text text text text text text text text text</div> </div> <div id="obsah"> <p>libovolný obsah<br> text text text </p> <p>text text text </p> <p>text text text </p> <p>text text text </p> <p>text text text </p> <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p> <p>text text text </p> <p>text text text </p> <p>text text text </p> <p>text text text <br> </p> text text text </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body, html { margin: 0; padding: 0; } #hlavicka { background: red; /* toto je trik, nastuduj si jak overflow ovlivňuje plavaní */ /* zkus to odstranit a šířku #minilogo nastav na směšně malou, pak by pozadí nebylo celé červené */ overflow: hidden; } #minilogo { /* minilogo bude nalevo a bude mít určitou šířku */ /* preferuji procenta, neboť pak se stránka přizpůsobí velikosti okna */ float: left; width: 33%; } #textlogo { /* zajistíme, aby #textlogo netekl pod #minilogo */ margin-left: 33%; } #obsah { /* jen aby tam něco bylo */ margin: 1em; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>