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="header" class="center"> <img id="logo" src="i/100x40" alt="logo"> <ul id="menu"> <li>1. položka</li> <li>2. položka</li> <li>3. položka</li> </ul> <div class="clear"></div> </div> <div id="wrapper" class="center"> <div id="left"><!-- Názov identifikátoru by mal zodpovedať obsahu. --> </div> <div id="content"> </div> <div id="right"><!-- Názov identifikátoru by mal zodpovedať obsahu. --> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.center { margin: auto; width: 80%; max-width: 1024px; } .clear { clear: both; } #logo { float: left; } #menu { margin-left: 120px; /* Šírka loga + okraj */ } #menu li { display: inline-block; /* Iba orientačne */ padding: 5px 20px; } #wrapper { position: relative; /* Obmedzujúci prvok pre vnorené absolútne poziciované objekty */ } #left, #right { position: absolute; top: 0; width: 200px; height: 200px; } #left { left: 0; background: red; } #right { right: 0; background: green; } #content { margin: 0 220px; height: 300px; background: yellow; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>