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=obal> <span class=ciara></span> <span class="obrazok img1"></span> <span class="obrazok img2"></span> <span class="obrazok img3"></span> <span class="obrazok img4"></span> <span class="obrazok img5"></span> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.obal { position: relative; width: 60px; height: 400px; } span { display: block; } .ciara { width: 2px; position: absolute; top: 0; bottom: 0; left: 50%; margin-left: -1px; /* Aby bola čiara presne v strede, musí mať táto hodnota polovičnú hodnotu šírky so znamienkom mínus */ background-color: blue; } .obrazok { position: absolute; background: url(i/60x60) center center no-repeat #000; width: 60px; height: 60px; border-radius: 50%; } .img1 {top: 0%;} .img2 {top: 25%;} .img3 {top: 50%;} .img4 {top: 75%;} .img5 {top: 100%;}
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>