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
<body> <div id="header"> <div id="nav"> <ul> <li>Položka</li> </ul> <ul> <li>Položka</li> </ul> <ul> <li>Položka</li> <li>Položka</li> <li>Položka</li> <li>Položka</li> <li>Položka</li> </ul> <div id="banner"> </div> </div> <div id="info"> <div> <h2>Aktuality</h2> <p>Pellentesque pretium lectus id turpis. Sed ac dolor sit amet purus malesuada congue. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Etiam bibendum elit eget erat. In rutrum. Fusce tellus. Nullam at arcu a est sollicitudin euismod. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo.</p> <p>Pellentesque pretium lectus id turpis. Sed ac dolor sit amet purus malesuada congue. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Etiam bibendum elit eget erat. In rutrum. Fusce tellus. Nullam at arcu a est sollicitudin euismod. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo.</p> <p>Pellentesque pretium lectus id turpis. Sed ac dolor sit amet purus malesuada congue. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Etiam bibendum elit eget erat. In rutrum. Fusce tellus. Nullam at arcu a est sollicitudin euismod. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo.</p> </div> </div> </div> <div id="content"> <h2>Obsah</h2> <p>Pellentesque pretium lectus id turpis. Sed ac dolor sit amet purus malesuada congue. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Etiam bibendum elit eget erat. In rutrum. Fusce tellus. Nullam at arcu a est sollicitudin euismod. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo.</p> <p>Pellentesque pretium lectus id turpis. Sed ac dolor sit amet purus malesuada congue. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Etiam bibendum elit eget erat. In rutrum. Fusce tellus. Nullam at arcu a est sollicitudin euismod. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo.</p> <p>Pellentesque pretium lectus id turpis. Sed ac dolor sit amet purus malesuada congue. Morbi leo mi, nonummy eget tristique non, rhoncus non leo. Etiam bibendum elit eget erat. In rutrum. Fusce tellus. Nullam at arcu a est sollicitudin euismod. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo.</p> </div> </body>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html, body, #header, #nav { height: 100%; } body { margin: 0; } #header, #nav { position: relative; } #nav { display: table; width: 75%; } #nav ul { display: table-row; } #nav ul li { display: table-cell; height: 33%; width: 20%; background: green; text-align: center; vertical-align: middle; } #banner { position: absolute; right: 0; top: 0; width: 80%; height: 66%; background-image: url(i/600x300); background-size: 100%; } #info { position: absolute; right: 0; top: 0; bottom: 0; overflow: auto; width: 25%; } #info div { padding: 10px; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>