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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=ISO-8859-2" http-equiv="content-type"> <title>MS Dyjakovice</title> <style> #obalovaci {margin: 0px auto; position: relative; width:1319px;} #obsah {position: absolute; width: 1080px; top: 433px; left: 0px} #hlavicka {position: absolute; width: 662px; height: 283px; top: 124px; left: 359px} #logo {position: absolute; width: 75px; height: 277; top: 124px; left: 40px} #menu {position: absolute; width: 160px; height: 34px; top: 380px; left: 0px} #menu1 {position: absolute; width: 160px; height: 34px; top: 380px; left: 164px} #menu2 {position: absolute; width: 160px; height: 34px; top: 380px; left: 328px} #menu3 {position: absolute; width: 160px; height: 34px; top: 380px; left: 492px} #menu4 {position: absolute; width: 160px; height: 34px; top: 380px; left: 656px} #menu5 {position: absolute; width: 160px; height: 34px; top: 380px; left: 820px} </style> </head> <body style="color: rgb(0, 0, 0); background-color: rgb(255, 102, 0); background-image: url(pozadi.jpg);" alink="#000099" link="#000099" vlink="#990099"> <div id="hlavicka"><img style="border: 0px solid ; width: 662px; height: 283px;" alt="" src="slideshow.gif" align="middle"></div> <div id="logo"><img style="border: 0px solid ; width: 302px; height: 283px;src="logo.gif"></div> <div id="menu"> <ul class="menu"> <li><a href="../html/">O NÁS</a> <ul style="z-index: 1;"> <li><a href="../html/text.php">Informace</a></li> <li><a href="../html/seznamy.php">Kontakty</a></li> <li><a href="../html/seznamy.php">Zaměstnanci </a></li> </ul> </li> </ul> </div> <div id="menu1"> <ul class="menu"> <li><a href="../css/">AKTUALITY</a></li> </ul> </div> <div id="menu2"> <ul class="menu"> <li><a href="../css/">DOKUMENTY</a> <ul style="z-index: 1;"> <li><a href="../css/border/">Provoz</a></li> <li><a href="../css/margin/">Organizace dne</a></li> <li><a href="../css/font/">Školní řád</a></li> <li><a href="../css/color/">Přijmání dětí</a> <ul style="background-color: rgb(51, 204, 255); position: absolute; left: 160px; top: 108px; width: 191px;"> <li><a href="#">Podmínky</a> </li> <li><a href="#">Kritéria pro přijetí dítěte</a> </li> <li><a href="#">Žádost o přijetí dítěte</a></li> </ul> </li> </ul> </li> </ul> </div> <div id="menu3"> <ul class="menu"> <li><a href="../php/">ŠKOLNÍ JÍDELNA</a> <ul style="z-index: 1;"> <li><a href="../php/kniha_navstev.php">Jídelníček</a></li> <li><a href="../php/generovani-formulare.php">Odhlašování stravy</a></li> <li><a href="../php/generovani-formulare.php">Provozní řád</a></li> </ul> </li> </ul> </div> <div id="menu4"> <ul class="menu"> <li><a href="/php/">FOTOGALERIE</a> </li> </ul> </div> <div id="menu5"> <ul class="menu"> <li><a href="../php/">KE STAŽENÍ</a></li> </ul> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
<rozbalovací menu> .menu { color: #000000; padding: 0; margin: 0; list-style-type: none; display:block} .menu ul { margin-top: 0px; position: absolute; visibility: hidden; background-color: #A72135; margin: 0; padding: 0; list-style-type: none; } .menu li { float: left; padding: 20px 2px 0 2px; width: 160px; white-space: nowrap; } .menu a { padding: 8px; text-align: left; padding-left: 15px; color: #fff; background-color: rgb(51,204,255); display: block; text-decoration: none; font-weight: bold; } .menu ul a:link { color: #fff; border-bottom: none; padding-left: 15px; _padding-left: 19px; } .menu ul a:visited { color: #fff; border-bottom: none; padding-left: 15px; _padding-left: 19px; } .menu ul a:hover { color: #4f4f4f; background-color: rgb(70,130,180) } .menu li:hover >ul, ul.menu li.hover ul { visibility: visible; } .menu li li { float: none; border: none; padding: 0; margin: 0;width: 160px; white-space: nowrap; } .menu ul li li { float: none; border: none; padding: 0; margin: 0;width: 191px; white-space: nowrap; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>