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 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <link rel="stylesheet" type="text/css" href="styl.css"> <title>1</title> <script src="javascript.js"></script> </head> <body> <div id="block"> <img src="title.jpg" alt="The Walking Dead" id="title"> <h1 id="main">The Walking Dead</h1> <div id="pozadi"> <div id="levy-menu"> <div class="pole"> <div class="titulek"> <h3>Menu</h3> </div> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Polozka</div></a> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Jina polozka</div></a> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Polozka</div></a> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Polozka</div></a> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Polozka</div></a> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Neco fakt hodne dlouhyho</div></a> <div id="roll" onmouseout="out()"><div class="odrazka" onmouseover="on()"><img src="odrazka.png" alt=">>">Nadpis</div></div> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Polozka</div></a> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Polozka</div></a> </div> <div class="pole"> <div class="titulek"> <h3>Menu</h3> </div> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Polozka</div></a> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Jina polozka</div></a> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Polozka</div></a> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Polozka</div></a> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Polozka</div></a> </div> <div class="pole"> <div class="titulek"> <h3>Info</h3> </div> <div class="text"> Quisque iaculis dui et purus rhoncus dictum. Pellentesque consequat dignissim elementum. Mauris in nulla accumsan, congue velit nec, ultricies dui. Sed maximus tempor odio ut egestas. Cras et bibendum ex. </div> </div> </div> <div id="pravy-menu"> <div class="pole"> <div class="titulek"> <h3>Vyhledáváni</h3> </div> <div id="hledani"> <script> (function() { var cx = '005034056546271182291:hsc3vqirtqa'; var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true; gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//www.google.com/cse/cse.js?cx=' + cx; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s); })(); </script> <gcse:searchbox-only></gcse:searchbox-only> </div> </div> <div class="pole"> <div class="titulek"> <h3>Menu</h3> </div> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Polozka</div></a> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Jina polozka</div></a> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Polozka</div></a> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Polozka</div></a> <a href="1/index.html" class="polozka"><div class="odrazka"><img src="odrazka.png" alt=">>">Polozka</div></a> </div> <div class="pole"> <div class="titulek"> <h3>Info</h3> </div> <div class="text"> Quisque iaculis dui et purus rhoncus dictum. Pellentesque consequat dignissim elementum. Mauris in nulla accumsan, congue velit nec, ultricies dui. Sed maximus tempor odio ut egestas. Cras et bibendum ex. </div> </div> </div> <div id="stred"> <div class="pole"> <div class="titulek"> <h1>Text</h1> </div> <div class="text"> <p> <img src="test-obrazek.jpg" class="vlevo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta, ligula <!-- dictum tristique aliquam, mi risus hendrerit sapien, vitae malesuada arcu lorem at purus. Donec auctor, massa eget venenatis bibendum, velit urna sodales urna, vitae vehicula mi mauris eget metus. Ut commodo non mauris sit amet ornare. Mauris eu neque orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam auctor sit amet eros et dapibus. Praesent congue metus sem, sit amet porta augue eleifend vel. Aliquam a augue et mauris volutpat fringilla eget non metus. Maecenas quis placerat lectus, acefficitur libero. --> </p> <div class="clear"></div> </div> </div> <div class="pole"> <div class="titulek"> <h1>Text</h1> </div> <div class="text"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta, ligula dictum tristique aliquam, mi risus hendrerit sapien, vitae malesuada arcu lorem at purus. Donec auctor, massa eget venenatis bibendum, velit urna sodales urna, vitae vehicula mi mauris eget metus. Ut commodo non mauris sit amet ornare. Mauris eu neque orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam auctor sit amet eros et dapibus. Praesent congue metus sem, sit amet porta augue eleifend vel. Aliquam a augue et mauris volutpat fringilla eget non metus. Maecenas quis placerat lectus, acefficitur libero. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta, ligula dictum tristique aliquam, mi risus hendrerit sapien, vitae malesuada arcu lorem at purus. Donec auctor, massa eget venenatis bibendum, velit urna sodales urna, vitae vehicula mi mauris eget metus. Ut commodo non mauris sit amet ornare. Mauris eu neque orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam auctor sit amet eros et dapibus. Praesent congue metus sem, sit amet porta augue eleifend vel. Aliquam a augue et mauris volutpat fringilla eget non metus. Maecenas quis placerat lectus, acefficitur libero. </p> </div> </div> <div class="pole"> <div class="titulek"> <h1>Text</h1> </div> <div class="text"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta, ligula dictum tristique aliquam, mi risus hendrerit sapien, vitae malesuada arcu lorem at purus. Donec auctor, massa eget venenatis bibendum, velit urna sodales urna, vitae vehicula mi mauris eget metus. Ut commodo non mauris sit amet ornare. Mauris eu neque orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam auctor sit amet eros et dapibus. Praesent congue metus sem, sit amet porta augue eleifend vel. Aliquam a augue et mauris volutpat fringilla eget non metus. Maecenas quis placerat lectus, acefficitur libero. </p> <ul> <li>Neco</li> <li>Neco</li> <li>Neco</li> </ul> </div> </div> <div class="pole"> <div class="titulek"> <h1>Text</h1> </div> <div class="text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porta, ligula dictum tristique aliquam, mi risus hendrerit sapien, vitae malesuada arcu lorem at purus. Donec auctor, massa eget venenatis bibendum, velit urna sodales urna, vitae vehicula mi mauris eget metus. Ut commodo non mauris sit amet ornare. Mauris eu neque orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam auctor sit amet eros et dapibus. Praesent congue metus sem, sit amet porta augue eleifend vel. Aliquam a augue et mauris volutpat fringilla eget non metus. Maecenas quis placerat lectus, acefficitur libero. </div> </div> <!-- Pred tohle vkladej text --> </div> <div class="clear"></div> </div> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* CSS Document */ body { background-color: #c5c4c3; color: #000000; } #block { min-width: 910px; max-width: 974px; margin: auto; } #pozadi { background-color: #7c785f; border-radius: 10px; } #levy-menu { float: left; width: 180px; margin: 10px; } #pravy-menu { float: right; width: 180px; margin: 10px; } #stred { margin: 0px 200px 0px 200px; padding: 10px 0px 10px 0; } #stred img { width: 200px; } h1 { text-align: center; margin: 0px 20px 7px 20px; font-family: Arial, sanf-serif; } h3 { text-align: center; margin: 0px 20px 7px 20px; font-family: Arial, sanf-serif; font-size: 16px; } p { margin-top: 0px; } ul { list-style-image: URL('odrazka10.png'); } .pole { background-color: #dccf81; margin-bottom: 10px; border-radius: 10px 10px 0px 0px; font-family: Arial, sanf-serif; font-size: 14px; } .titulek { border-bottom-style: solid; border-width: 1px; border-color: #e8dd9d; padding-top: 7px; } .odrazka { background-color: #dccf81; border-bottom-style: solid; border-width: 1px; border-color: #e8dd9d; padding: 7px 20px 7px 20px; text-align: center; } .odrazka img{ float: left; height: 12px; margin: 3px 0px 3px 0px; } .odrazka:hover { background: #eee3a4; !important } .text { border-bottom-style: solid; border-width: 0.5px; border-color: #e8dd9d; padding: 7px 20px 7px 20px; overflow: auto; } #hledani { border-bottom-style: solid; border-width: 1px; border-color: #e8dd9d; padding: 3px 7px 3px 7px; } #roll { background-color: #7c785f; } .telo-roll { background-color: #dccf81; margin-left: 14px; } #title { width: 100%; border-radius: 10px 10px 10px 10px; margin-bottom: 3px; } #main { color: #ffffff; text-align: right; margin-top: -1.5em; margin-bottom: 0.5em; } .polozka { color: #000000; text-decoration: none; } .vlevo { float: left; margin-right: 10px; } .vpravo { float: right; margin-right: 10px; } .clear { clear: both; }
CSS
Autoformát
CSS reset
Až na konci
// JavaScript Document /* function h() { this.style.backgroundcolor="#eee3a4"; } function h-end() { this.style.backgroundcolor=""; } */ function on() { document.getElementById("roll").innerHTML="<div class='odrazka' onmouseover='on()' onmouseout='out()'><img src='odrazka.png' alt='>>'>Nadpis</div><div class='telo-roll' onmouseover='on()' onmouseout='out()'><a href='1/index.html' class='polozka'><div class='odrazka'><img src='odrazka.png' alt='>>'>Polozka</div></a><a href='1/index.html' class='polozka'><div class='odrazka'><img src='odrazka.png' alt='>>'>Polozka</div></a><a href='1/index.html' class='polozka'><div class='odrazka'><img src='odrazka.png' alt='>>'>Polozka</div></a></div>"; document.getElementById("roll").style="padding-bottom: 7px;" } function out() { document.getElementById("roll").innerHTML="<div class='odrazka' onmouseover='on()' onmouseout='out()'><img src='odrazka.png' alt='>>'>Nadpis</div>"; document.getElementById("roll").style="padding-bottom: 0px;" }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>