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> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css.css" type="text/css"> <title>Dokument bez názvu</title> </head> <body> <header id="hlavicka"> <div id="logo">JaPaJP</div> <div id="navmenu"> <div id="horizontalni-menu"> <div id="prouzeka"> <ul> <li><a href="#" class="aktualni">Text 1</a></li> <li><a href="#">Text 2</a></li> <li><a href="#">Text 3</a></li> <li><a href="#">Text 4</a></li> <li><a href="#">Text 5</a></li> <li><a href="#">Text 6</a></li> </ul> </div> </div> </div> </header> <div id="obal"> <!-- horizontální menu --> <!-- konec horizontálního menu --> <!-- obal menu --> <div id="obal-menu"> <!-- levé menu --> <div class="menu"> <div class="leve-menu">Hlavní nabídka</div> <ul> <li><a href="#">Text sata</a></li> <li><a href="#">Text fukos</a></li> <li><a href="#">Text was</a></li> <li><a href="#">Text nuda</a></li> <li><a href="#">Text kolo</a></li> <li><a href="#">Text baf</a></li> <li><a href="#">Text der</a></li> <li><a href="#">Text muose</a></li> <li><a href="#">Text usb</a></li> <li><a href="#">Text koule</a></li> </ul> </div> <!-- konec levého menu --> <!-- obsah stránky --> <div id="obsah-stranky"> <div class="obsah"> <div class="obsahsekce"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing</h2> <img src="http://img.geocaching.com/cache/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" alt="popis obrázku" width="135" height="98"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus blandit ipsum, vitae congue mauris pretium eu. Donec aliquam lacinia ipsum congue aliquet. Mauris feugiat vehicula ullamcorper. <a href="#" target="_blank">Proin pretium</a> Proin quis diam dui. Suspendisse vel viverra turpis. Proin pretium, elit scelerisque ultricies aliquam, risus dui fermentum arcu, ut convallis diam ligula sed massa. Nam pellentesque tellus eget varius ornare. Proin non velit vitae elit laoreet egestas. Duis est eros, fringilla sit amet odio fringilla, ullamcorper gravida lacus. Sed facilisis felis at velit condimentum rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <div class="mezera"></div> <div class="tlacitko"><a href="#">více</a></div> </div> </div> <div class="obsah"> <div class="obsahsekce"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing</h2> <img src="http://img.geocaching.com/cache/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" alt="popis obrázku" width="135" height="98"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus blandit ipsum, vitae congue mauris pretium eu. Donec aliquam lacinia ipsum congue aliquet. Mauris feugiat vehicula ullamcorper. Proin quis diam dui. Suspendisse vel viverra turpis. Proin pretium, elit scelerisque ultricies aliquam, risus dui fermentum arcu, ut convallis diam ligula sed massa. Nam pellentesque tellus eget varius ornare. Proin non velit vitae elit laoreet egestas. Duis est eros, fringilla sit amet odio fringilla, ullamcorper gravida lacus. Sed facilisis felis at velit condimentum rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <div class="mezera"></div> <div class="tlacitko"><a href="#">více</a></div> </div> </div> <div class="obsah"> <div class="obsahsekce"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing</h2> <img src="http://img.geocaching.com/cache/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" alt="popis obrázku" width="135" height="98"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus blandit ipsum, vitae congue mauris pretium eu. Donec aliquam lacinia ipsum congue aliquet. Mauris feugiat vehicula ullamcorper. Proin quis diam dui. Suspendisse vel viverra turpis. Proin pretium, elit scelerisque ultricies aliquam, risus dui fermentum arcu, ut convallis diam ligula sed massa. Nam pellentesque tellus eget varius ornare. Proin non velit vitae elit laoreet egestas. Duis est eros, fringilla sit amet odio fringilla, ullamcorper gravida lacus. Sed facilisis felis at velit condimentum rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <div class="mezera"></div> <div class="tlacitko"><a href="#">více</a></div> </div> </div> <div class="obsah"> <div class="obsahsekce"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing</h2> <img src="http://img.geocaching.com/cache/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" alt="popis obrázku" width="135" height="98"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus blandit ipsum, vitae congue mauris pretium eu. Donec aliquam lacinia ipsum congue aliquet. Mauris feugiat vehicula ullamcorper. Proin quis diam dui. Suspendisse vel viverra turpis. Proin pretium, elit scelerisque ultricies aliquam, risus dui fermentum arcu, ut convallis diam ligula sed massa. Nam pellentesque tellus eget varius ornare. Proin non velit vitae elit laoreet egestas. Duis est eros, fringilla sit amet odio fringilla, ullamcorper gravida lacus. Sed facilisis felis at velit condimentum rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <div class="mezera"></div> <div class="tlacitko"><a href="#">více</a></div> </div> </div> <div class="obsah"> <div class="obsahsekce"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing</h2> <img src="http://img.geocaching.com/cache/359d7d93-44ba-4745-95de-f7263e050e9a.jpg" alt="popis obrázku" width="135" height="98"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus blandit ipsum, vitae congue mauris pretium eu. Donec aliquam lacinia ipsum congue aliquet. Mauris feugiat vehicula ullamcorper. Proin quis diam dui. Suspendisse vel viverra turpis. Proin pretium, elit scelerisque ultricies aliquam, risus dui fermentum arcu, ut convallis diam ligula sed massa. Nam pellentesque tellus eget varius ornare. Proin non velit vitae elit laoreet egestas. Duis est eros, fringilla sit amet odio fringilla, ullamcorper gravida lacus. Sed facilisis felis at velit condimentum rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <div class="mezera"></div> <div class="tlacitko"><a href="#">více</a></div> </div> </div> </div> <!-- praví postranní panel --> <div class="pravy-panel"> <div class="novinky">Novinky</div> <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing</div> </div> <div class="pravy-panel"> <div class="novinky">Fotogalerie - Archiv</div> <ul> <li><a href="../2015/12.php">Prosinec 2015</a></li> <li><a href="../2015/11.php">Listopad 2015</a></li> <li><a href="../2015/10.php">Říjen 2015</a></li> <li><a href="../2015/09.php">Září 2015</a></li> <li><a href="../2015/08.php">Srpen 2015</a></li> <li><a href="../2015/07.php">Červenec 2015</a></li> <li><a href="../2015/06.php">Červen 2015</a></li> <li><a href="../2015/05.php">Květen 2015</a></li> <li><a href="../2015/04.php">Duben 2015</a></li> <li><a href="../2015/03.php">Březen 2015</a></li> <li><a href="../2015/02.php">Únor 2015</a></li> <li><a href="../2015/01.php">Leden 2015</a></li> </ul> </div> <!-- konec pravého postranního panelu --> </div> <div class="nadcarou"></div> </div> <div id="paticka"> JaPaJP </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
@charset "utf-8"; /* CSS Document */ body { height: 100%; margin: 0; padding: 0 line-height: 110%; font-family: Arial, Helvetica, Geneva, sans-serif, Verdana, Source Sans Pro, Tahoma; font-size: 14px; color: #111111; background-color: #ccc; } #hlavicka { background: #000; height: 55px; width: 100%; position: static; margin-bottom: 5px; } div#logo { float: left; color: #FFFFFF; font-size: 25px; font-weight: bold; padding-top: 15px; padding-left: 400px; padding-bottom: 15px; } div#navmenu { float: right; padding-top: 5px; padding-right: 333px; padding-left: 5px; padding-bottom: 5px; } #obsah-hlavicky { width: 100%; height: 75px; margin: 0 auto; text-align: center; color: #fff; padding: 15px; } #obal { width: 980px; margin: 0 auto; } /* horizontalni menu */ #horizontalni-menu { padding-top: 0px; } #prouzek { width: 980px; background-color: #FFFFFF; } #horizontalni-menu ul { text-align: center; display: table; margin: auto; padding: 10px; } #horizontalni-menu ul li { display: table-cell; background-color: #000000; } #horizontalni-menu ul li a { margin: 0px; display: block; height: 21px; padding-top: 5px; padding-right: 15px; padding-left: 15px; color: #FFFFFF; text-decoration: none; background-color: undefined; font-weight: bold; } #horizontalni-menu li a:hover, #horizontalni-menu li .aktualni { color: #F3F3F3; background-color: #444; font-weight: bold; } /* konec horizontalni menu */ /* obal menu */ #obal-menu { clear: left; width: 980px; padding-top: 10px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; background-color: #ccc; } /* léve menu */ .menu { float: left; width: 170px; padding-top: 10px; padding-right: 13px; padding-left: 13px; padding-bottom: 10px; background-color: #FFFFFF; margin-bottom: 10px; margin-right: 10px; } .leve-menu { margin-top: 0; margin-right: 0; margin-left: 0; margin-bottom: 5px; font-size: 14px; font-weight: bold; color: #fff; text-align: center; background-color: #000; padding-bottom: 2px; padding-top: 2px; } .menu ul { margin: 0px; padding: 0px; } .menu ul li { margin: 0px; padding: 0 0 0 0; margin-bottom: 5px; list-style: none; } .menu ul li a { display: block; background-color: #000; padding: 5px 0 5px 10px; color: #FFFFFF; text-decoration: none; font-weight: bold; } .menu ul li a:hover { color: #fff; background-color: #444; font-weight: bold; } /* konec léveho menu */ #obsah-stranky { float: left; width: 568px; } .obsah { float: left; width: 568px; } .obsahsekce { background-color: #ffffff; padding: 10px; margin-bottom: 10px; } .obsahsekce h2 { margin: 0 0 5px 0; font-weight: bold; color: #fff; padding: 2px 5px 2px 5px; background: #111111; font-size: 1em; } .obsahsekce img { float: left; margin-top: 3px; margin-right: 5px; } .obsahsekce p { margin: 0; text-align: justify; } .tlacitko { text-align: center; margin-left: 452px; } .tlacitko a { display: block; width: 95px; text-decoration: none; color: #FFFFFF; background-color: #000000; padding: 2px; font-weight: bold; } .tlacitko a:hover { color: #FFFFFF; background-color: #515151; font-weight: bold; } a:link, a:visited { color: #0198F3; text-decoration: none; font-weight: bold; } a:active, a:hover { color: #009FFF; text-decoration: underline; font-weight: bold; } .mezera { clear: both; width: 100%; height: 5px; } /* praví postraní panel */ .pravy-panel { width: 170px; float: right; padding-top: 10px; padding-right: 13px; padding-left: 13px; padding-bottom: 10px; margin-bottom: 10px; background-color: #FFFFFF; color: #000000; font-weight: normal; } .novinky { margin-bottom: 5px; font-size: 14px; font-weight: bold; text-align: center; background-color: #000000; padding-bottom: 4px; color: #FFFFFF; } .pravy-panel ul { margin: 0px; padding: 0px; } .pravy-panel ul li { margin: 0px; padding: 0 0 0 0; margin-bottom: 5px; list-style: none; } .pravy-panel ul li a { display: block; background-color: #000; padding: 5px 0 5px 10px; color: #FFFFFF; text-decoration: none; font-weight: bold; } .pravy-panel ul li a:hover { color: #F3F3F3; background-color: #444; font-weight: bold; } .posledni-novinky { padding: 0 0 5px 0; font-size: 12px; font-weight: bold; color: #000; } .posledni-novinky a { color: #ffffff; text-decoration: none; } .posledni-novinky a:hover { color: #99FF00; } .text { font-weight: bold; font-size: 12px; } span { padding: 0 0 5px 0; font-size: 14px; font-weight: bold; color: #0190F0; } /* konec pravého postraního panelu */ /* konec obalu munu */ .nadcarou { clear: both; } #paticka { max-width: 100%; height: 20px; margin: 0 auto; padding-top: 9px; padding-bottom: 9px; text-align: center; background-color: #000; color: #fff; position: relative; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>