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 class="header"> <div class="logo header-item"><img src="i/120x40"></div> <form class="search header-item"> <input> </form> <ul class="nav header-item"> <li><a href="#">About</a> <li><a href="#">Privacy</a> <li><a href="#">Sitemap</a> <li><a href="#">Galery</a> </ul> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.header { width: 600px; margin: auto; } .header-item { line-height: 40px; /* zapezpečuje rovnakú výšku všetkych prvkov */ background: red; } .logo { float: left; } .search { float: right; width: 120px; text-align: center; } .nav { margin: 0 130px; padding: 0; list-style: none; text-align: center; } .nav li { display: inline-block; } .nav a { display: block; /* rieši výšku odkazov a ich klikateľnú časť */ padding: 0 .5em; } .nav a:hover {background: blue; color: white;} img {vertical-align: middle;} input {width: 100px;}
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>