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">Nadpis</div> <div class="obsah-obrazek"><img src="http://img.djpw.cz/rpb.jpeg" alt="Bb01" width="135" height="98"></div> <p>Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském průmyslu. Lorem Ipsum je považováno za standard v této oblasti už od začátku 16. století, kdy dnes neznámý tiskař vzal kusy textu a na jejich základě vytvořil speciální vzorovou knihu. Jeho odkaz nevydržel pouze pět století, on přežil i nástup elektronické sazby v podstatě beze změny. Nejvíce popularizováno bylo Lorem Ipsum.</p> <div class="mezera"></div> <div class="tlacitko"><a href="#">Zobrazit více</a></div> </div> <div class="obsah-sekce"> <div class="obsah-lista">Nadpis</div> <div class="obsah-obrazek"><img src="http://img.djpw.cz/spb.jpeg" alt="Bb01" width="98" height="132"></div> <p>Je obecně známou věcí, že člověk bývá při zkoumání grafického návrhu rozptylován okolním textem, pokud mu dává nějaký smysl. Úkolem Lorem Ipsum je pak nahradit klasický smysluplný text vhodnou bezvýznamovou alternativou s relativně běžným rozložením slov. To jej dělá narozdíl od opakujícího se "Tady bude text. Tady bude text..." mnohem více čitelnějším. V dnešní době je Lorem Ipsum používáno spoustou DTP balíků a webových editorů coby výchozí model výplňového textu. Ostatně si zkuste zadat frázi "lorem ipsum" do vyhledavače a sami uvidíte. Během let se objevily různé varianty a odvozeniny od klasického Lorem Ipsum, někdy náhodou, někdy účelně (např. pro pobavení čtenáře).</p> <div class="mezera"></div> <div class="tlacitko"><a href="#">Zobrazit více</a></div> </div> <div class="obsah-sekce"> <div class="obsah-lista">Nadpis text 2</div> <div class="obsah-obrazek"><img src="http://img.djpw.cz/spb.jpeg" alt="Bb01" width="135" height="96"></div> <p>Lorem Ipsum je demonstrativní výplňový text používaný v tiskařském a knihařském průmyslu. Lorem Ipsum je považováno za standard v této oblasti už od začátku 16. století, kdy dnes neznámý tiskař vzal kusy textu a na jejich základě vytvořil speciální vzorovou knihu. Jeho odkaz nevydržel pouze pět století, on přežil i nástup elektronické sazby v podstatě beze změny. Nejvíce popularizováno bylo Lorem Ipsum v šedesátých letech 20. století, kdy byly vydávány speciální vzorníky s jeho pasážemi a později pak díky počítačovým DTP programům jako Aldus PageMaker.</p> <div class="mezera"></div> <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">New</div> <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 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 --> <div class="nadcarou"></div> </div> <!-- konec obalu menu --> <!-- patička --> <div id="paticka"> Copyright © 20015 <a href="#">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: #1e1f22; } #obal { width: 980px; margin: 0 auto; } /* hlavička */ #logo-banner { width: 980px; height: 150px; background: url(http://img.djpw.cz/pqb.jpeg) no-repeat; } /* konec hlavičky */ /* horizontalni menu */ #horizontalni-menu { padding-top: 0px; } #prouzek { width: 980px; background-color: #37383c; } #horizontalni-menu ul { text-align: center; display: table; margin: auto; padding: 10px; } #horizontalni-menu ul li { display: table-cell; background-color: #121212; } #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: #f26222; } /* 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: #37383c; } /* léve menu */ .menu { float: left; width: 164px; padding-top: 10px; padding-right: 13px; padding-left: 13px; padding-bottom: 10px; background-color: #e6e0d0; 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: #000; 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: #f26222; } /* konec léveho menu */ /* obsah stránky */ #obsah-stranky { float: left; width: 562px; } .obsah-sekce { padding-bottom: 10px; margin-bottom: 10px; background-color: #e6e0d0; padding-top: 5px; } .obsah-lista { padding: 0 0 5px 0; margin-top: 10px; margin-right: 10px; margin-left: 10px; margin-bottom: 5px; font-weight: bold; color: #fff; padding: 0 0 0 5px; background-color: #f26222; font-size: 12px; } .obsah-obrazek { float: left; margin-right: 6px; margin-left: 10px; margin-bottom: 0; padding: 0px; margin-top: 5px; } p { margin: 0px; padding-right: 10px; padding-left: 10px; color: #333333; text-align: justify; font-weight: bold; } .galerie { margin-left: 10px; margin-right: 10px; } 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: #fff; text-decoration: none; font-weight: normal; } a:active, a:hover { color: #fff; text-decoration: underline; } .tabulka { margin-left: 10px; margin-right: 10px; } .tlacitko { text-align: center; margin-left: 450px; } .tlacitko a { display: block; width: 92px; text-decoration: none; color: #b5b1b1; background-color: #121212; padding: 2px; } .tlacitko a:hover { color: #fff; background-color: #f26222; } .mezera { clear: both; width: 100%; height: 5px; } /* konec obsahu stránky */ /* praví postraní panel */ .pravy-panel { width: 164px; float: right; padding-top: 10px; padding-right: 13px; padding-left: 13px; padding-bottom: 10px; margin-bottom: 10px; background-color: #e6e0d0; color: #000000; font-weight: bold; } .novinky { margin-bottom: 5px; font-size: 14px; font-weight: bold; color: #000; 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: #fff; text-decoration: none; } .pravy-panel ul li a:hover { color: #FFFFFF; background-color: #f26222; } .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; } span { padding: 0 0 5px 0; font-size: 12px; font-weight: 600; color: #000; } /* konec pravého postraního panelu */ /* konec obalu munu */ .nadcarou { clear: both; width: 100%; } /* patička*/ #paticka { width: 980px; height: 20px; margin: 0 auto; padding-top: 9px; padding-bottom: 9px; text-align: center; background-color: #121212; } /* 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>