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" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="cs"> <head> <title>index</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Language" content="cs"> <link rel="stylesheet" href="css_styl.css" type="text/css"> </head> <body> <div id="obal"> <!-- hlavička --> <div id="logo-banner"></div> <!-- konec hlavičky --> <!-- horizontální menu --> <div id="horizontalni-menu"> <div id="prouzek"> <ul> <li><a href="#" class="aktualni">Domu</a></li> <li><a href="#">novinky</a></li> <li><a href="#">Archiv</a></li> <li><a href="#">Ostatní</a></li> <li><a href="#">Ke stažení</a></li> <li><a href="#">Jine</a></li> </ul> </div> </div> <!-- konec horizontálního menu --> <!-- obal menu --> <div id="obal-menu"> <!-- leve 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-sekce"> <div class="obsah-lista">Text a Text ####</div> <div class="obsah-obrazek"><img src="http://img.djpw.cz/rpb.jpeg" alt="Bb01" width="135" height="98"></div> <p>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 montessrs.</p> </div> <div class="obsah-sekce"> <div class="obsah-lista">Text a Text ####</div> <div class="obsah-obrazek"><img src="http://img.djpw.cz/spb.jpeg" alt="Bb01" width="98" height="135"></div> <p>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 montessrs.</p> </div> <div class="obsah-sekce"> <div class="obsah-lista">Text b Text ####</div> <p>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 montessrs.</p> <div class="tlacitko"><a href="#">Zobrazit více</a></div> </div> <div class="obsah-sekce"> <div class="obsah-lista">Text a Text ####</div> <div class="obsah-obrazek"><img src="http://img.djpw.cz/spb.jpeg" alt="Bb01" width="98" height="135"></div> <p>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 montessrs.</p> </div> <div class="obsah-sekce"> <div class="obsah-lista">Text b Text ####</div> <div class="obsah-obrazek"><img src="http://img.djpw.cz/spb.jpeg" alt="Bb01" width="98" height="135"></div> <p>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 montessrs.</p> <div class="tlacitko"><a href="#">Zobrazit více</a></div> </div> </div> <!-- konec obsahu stránky --> <!-- praví postranní panel --> <div class="pravy-panel"> <div class="novinky">Novinky</div> <div class="posledninovinky"> <div class="text">blandit ipsum, vitae congue</div> <div><span>Duis est eros</span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <br> <div><span>Duis est eros</span> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> </div> </div> <div class="pravy-panel"> <div class="novinky">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 --> <!-- konec obalu menu --> <div class="nadcarou"></div> </div> <!-- patička --> <div id="paticka"> © 2015 <a href="../japajp/index.php">JaPaJP</a></div> <!-- konec patičky --> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
@charset "utf-8"; /* CSS Document */ body { margin: 20px; padding: 0px; line-height: 1.5em; font-family: Arial, Helvetica, sans-serif, Verdana, Tahoma; font-size: 12px; color: #FFFFFF; background-color: #080808; } #obal { width: 980px; margin: 0 auto; } /* hlavička */ #logo-banner { width: 980px; height: 250px; background: url(http://img.djpw.cz/qpb.jpeg) no-repeat; } /* konec hlavičky */ /* horizontalni menu */ #horizontalni-menu { padding-top: 0px; } #prouzek { width: 980px; background-color: #121212; } #horizontalni-menu ul { text-align: center; display: table; margin: auto; padding: 10px; } #horizontalni-menu ul li { display: table-cell; background-color: #121212; border: 1px solid #146fa4; } #horizontalni-menu ul li a { margin: 0px; display: block; height: 21px; padding-top: 5px; padding-right: 30px; padding-left: 30px; padding-bottom: 0px; color: #b5b1b1; text-decoration: none; } #horizontalni-menu li a:hover, #horizontalni-menu li .aktualni { color: #FFFFFF; background-color: #146fa4; } /* konec horizontalni menu */ /* obal menu */ #obal-menu { clear: both; width: 960px; padding-top: 2px; padding-right: 10px; padding-left: 10px; padding-bottom: 0px; background-color: #121212; } /* léve menu */ .menu { float: left; width: 162px; padding-top: 10px; padding-right: 13px; padding-left: 13px; padding-bottom: 10px; background-color: #262626; border: 1px solid #146FA4; 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: #ffffff; text-align: center; } .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: #121212; padding: 5px 0 5px 10px; color: #b5b1b1; text-decoration: none; } .menu ul li a:hover { color: #FFFFFF; background-color: #146fa4; } /* konec léveho menu */ /* obsah stránky */ #obsah-stranky { float: left; width: 560px; } .obsah-sekce { padding-bottom: 10px; margin-bottom: 10px; background-color: #262626; border: 1px solid #146FA4; } .obsah-lista { padding: 0 0 5px 0; margin-top: 10px; margin-right: 10px; margin-left: 10px; margin-bottom: 5px; font-weight: bold; color: #0190F0; padding: 0 0 0 5px; background-color: #121212; font-size: 12px; } .obsah-obrazek { float: left; margin-right: 6px; margin-left: 10px; margin-top: 3px; } p { margin: 0px; padding-right: 10px; padding-left: 10px; text-align: justify; color: #FFFFFF; } img { margin: 1px; padding: 0px; border: none; } a img { margin: 1px; } a:hover img { margin: 0px; border: 1px solid #0072c6; } a:link, a:visited { color: #0198F3; text-decoration: none; font-weight: normal; } a:active, a:hover { color: #009FFF; text-decoration: underline; } .tlacitko { text-align: center; margin-left: 450px; } .tlacitko a { display: block; width: 90px; text-decoration: none; border: 1px solid #146FA4; color: #b5b1b1; background-color: #121212; padding: 2px; } .tlacitko a:hover { color: #fff; background-color: #146fa4; } /* konec obsahu stránky */ /* praví postraní panel */ .pravy-panel { width: 162px; float: right; padding-top: 10px; padding-right: 13px; padding-left: 13px; padding-bottom: 10px; margin-bottom: 10px; background-color: #262626; border: 1px solid #146FA4; } .novinky { margin-bottom: 5px; font-size: 14px; font-weight: bold; color: #ffffff; text-align: center; } .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: #121212; padding: 5px 0 5px 10px; color: #b5b1b1; text-decoration: none; } .pravy-panel ul li a:hover { color: #FFFFFF; background-color: #146fa4; } .posledni-novinky { padding: 0 0 5px 0; font-size: 12px; font-weight: bold; color: #ffffff; } .posledni-novinky a { color: #ffffff; text-decoration: none; } .posledni-novinky a:hover { color: #99FF00; } span { padding: 0 0 5px 0; font-size: 12px; font-weight: 600; color: #0190F0; } /* konec pravého postraního panelu */ /* konec obalu munu */ .nadcarou { clear: both; width: 100%; } /* patička*/ #paticka { width: 978px; height: 18px; margin: 0 auto; padding-top: 9px; padding-bottom: 9px; text-align: center; background-color: #121212; border: 1px solid #146FA4; } /* konec paničky */
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>