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="obsah"> <div id="header"> <div id="logo"> <h2>Název webu</h2> </div> <ul id="mainNav"> <li class="aktivni"><a href="">Domů</a></li> <li><a href="">Menu</a></li> <li><a href="">Menu</a></li> <li><a href="">Menu</a></li> <li><a href="">Menu</a></li> </ul> </div> <div id="big-title"> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html, body { margin: 0; padding: 0; } #obsah { width: 960px; margin: 0 auto 0 auto; } #header { margin-top: 30px; overflow: hidden; } /* Logo */ #logo { background: blue; width: 266px; height: 47px; float: left; } /* Navigace */ #mainNav { list-style-type: none; padding: 0; margin: 0; float: right; background: green; } #mainNav li { float: left; padding: 0 8px 0 8px; margin: 0 0 0 25px; } #mainNav a { display: block; text-decoration: none; color: white; padding-bottom: 7px; } #mainNav a:hover { color: #c2151c; text-shadow:0 0 1px #c2151c, 0 0 1px #c2151c, 0 0 1px #c2151c; /* For bold hover effect, because shifting on bold hover*/ } #mainNav li.aktivni { color: #c2151c; font-weight: bold; background: yellow; } #mainNav li.aktivni a { color: #c2151c; } /* Titulek */ #big-title { height: 180px; background: red; margin-top: 50px; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>