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
<html> <base href='http://fabiar5.cz/test/1.php'> <head> <title>Test</title> <charset="utf-8"> </head> <body> <div class="posuvnik"> <a href="#" title="1" target="_blank"> <img src="../test/obr.png"> <div>Prosím vás</div> </a> <a href="#" title="2" target="_blank"> <img src="../test/obr.png"> <div>dokáže mi někdo pomoct</div> </a> <a href="#" title="3" target="_blank"> <img src="../test/obr.png"> <div>jak udělat popisky</div> </a> <a href="#" title="4" target="_blank"> <img src="../test/obr.png"> <div>pod jednotlivými obrázky</div> </a> <a href="#" title="5" target="_blank"> <img src="../test/obr.png"> <div>když je tam ten posuvníkf</div> </a> <a href="#" title="6" target="_blank"> <img src="../test/obr.png"> <div>Zkoušel jsem už kde co</div> </a> <a href="#" title="7" target="_blank"> <img src="../test/obr.png"> <div>ale nedaří se mi :-( díky moc</div> </a> <a href="#" title="8" target="_blank"> <img src="../test/obr.png"> <div>Není zač</div> </a> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.posuvnik img { border: 1px solid #111; display: block; } .posuvnik a { display: inline-block; margin: 0 2px; background: #eee; } .posuvnik a:hover { background: #def; } .posuvnik div { text-align: center; } .posuvnik { width: 960px; height: 220px; white-space: nowrap; overflow: auto; margin-left: 50px; margin-top: 50px; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>