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
<div class=pozadi><div> <h1><img src="http://kod.djpw.cz/i/200x120" width=200 height=120 alt="Název stránky"></h1> <a href="#" target="_blank" class=leto> <img src="http://kod.djpw.cz/i/320x120" width=320 height=120 alt="léto"></a><br> <a href="#" target="_blank" class=zima> <img src="http://kod.djpw.cz/i/320x112" width=320 height=112 alt="zima"></a> <p>Klikněte na roční období a zobrazte si verzi, o kterou máte zájem.</p> </div></div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
html, body { margin: 0; padding: 0; } img { vertical-align: middle; } a img { border: 0; } .pozadi { font: 12px/1.2 Verdana, Arial, Helvetica, sans-serif; color: #000; background: #fff url(http://img.djpw.cz/qob.jpeg) center top no-repeat; min-width: 744px; } .pozadi div { width: 744px; height: 681px; margin: 0 auto; position: relative; } .pozadi .leto, .pozadi .zima, .pozadi h1, .pozadi p { position: absolute; left: 230px; margin: 0; } .pozadi .leto { top: 280px; } .pozadi .zima { top: 408px; } .pozadi h1 { left: 0; top: 60px; } .pozadi p { left: 72px; bottom: 24px; width: 600px; font-size: 14px; line-height: 24px; background: #fff; text-align: center; border-radius: 12px; opacity: 0.85; filter: alpha(opacity=85); } /* priblizne svisle vystredeni ve vyssim okne prohlizece */ @media (min-height: 740px) { .pozadi { margin-top: 30px; } } @media (min-height: 800px) { .pozadi { margin-top: 60px; } } @media (min-height: 920px) { .pozadi { margin-top: 120px; } } @media (min-height: 1040px) { .pozadi { margin-top: 180px; } }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>