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> </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 { display: table; } #left, #right, #content { display: table-cell; vertical-align: top; } #left, #right { width: 200px; } #left div { height: 100px; background: red; } #right { 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>