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> <meta charset="UTF-8"> <div class="container"> <div class="nav"> <div class="cell"> <div class="page_menu_wrapper"> <nav class='page-menu' role='navigation'> <ul> <li><a href='/' title='XXX'><img alt='logo blog' class='image-logo' height='70' src='http://o.png' width='171'/></a></li> <li><a href='about.php' title='About'><span itemprop='name'>About</span></a></li> <li><a href='privacy.php' title='Privacy'><span itemprop='name'>Privacy</span></a></li> <li><a href='sitemap.php' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li> <li><a href='galery.php' title='Galery'><span itemprop='name'>Galery</span></a></li> <li><form class="searchform"> <input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" /> <input class="searchbutton" type="button" value="Go" /> </form></li> </ul> </nav> <div class='clear'></div> </div> </div> </div> <div class="content"> <div class="cell"> <p>Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum. </p> </div> </div> <div class="footer"> <div class="cell"> <p>Výška prispôsobivá obsahu</p> </div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html, body { height: 100%; margin: 0; } .container { display: table; height: 100%; border-spacing: 10px; } .nav, .content, .footer { display: table-row; } .cell { display: table-cell; } .nav div, .footer div { background-color: #1565C0; } .content div { height: 100%; /* Nutné, aby obsah dominantne zaberal všetko voľné miesto. */ border: 1px solid; } p { padding: 1em; margin: 0; } .page_menu_wrapper { width:100%; max-width:1100px; margin:0 auto; } .clear { clear:both } .page-menu ul li { list-style:none; } .page-menu ul li { display:inline-block; background-color:green; transition:all 400ms ease-in-out} .page-menu { float:left; width:100%; height:auto; padding:0!important; margin:0 5px; font-size:100%; font-weight:400} .page-menu ul { margin:0 auto!important; text-align:center; display: block; width:100%; padding:0!important; line-height:3em} .page-menu ul li a:hover { background: #00f; color:#e8554e!important} .page-menu ul li a { color:white!important; padding:0 40px 0 0; text-decoration:none; } .page-menu ul li a img { vertical-align:middle!important} /* Pravidla se aplikují při šířce 800px (1000) a menší */ @media screen and (max-width:1000px){ .page-menu,.search-box { width:100%; margin:0 } .page-menu ul li { width:33.3%; float:left} .page-menu ul li:first-child { width:100%; float:none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-top:10px} .page-menu ul li:last-child { width:100%; float:none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} .page-menu ul li { text-align:center} .page-menu ul li a { margin:0 auto; padding:0} .page_menu_wrapper { padding-bottom:10px} } /* Pravidla se aplikují při šířce 480px a menší */ @media screen and (max-width:480px){ .page-menu ul {line-height:2em} } /* Pravidla se aplikují při šířce 240px a menší */ @media screen and (max-width:240px){ .page-menu ul li{width:50%} } .searchform { display: inline-block; zoom: 1; /* ie7 hack for display:inline-block */ *display: inline; border: solid 1px #d2d2d2; padding: 3px 5px;} .searchform input { font: normal 12px/100% Arial, Helvetica, sans-serif;} .searchform .searchfield { background: #fff; padding: 6px 6px 6px 8px; width: 202px; border: solid 1px #bcbbbb; outline: none; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); box-shadow: inset 0 1px 2px rgba(0,0,0,.2);} .searchform .searchbutton { color: #fff; border: solid 1px #494949; font-size: 11px; height: 27px; width: 27px; text-shadow: 0 1px 1px rgba(0,0,0,.6); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; background: #5f5f5f; background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545)); background: -moz-linear-gradient(top, #9e9e9e, #454545); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */ }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>