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="timeline"> <div class="casovaosa"> <div class="hodina">10:00</div> <div class="hodina">11:00</div> <div class="hodina">12:00</div> <div class="hodina">13:00</div> <div class="hodina">14:00</div> <div class="hodina">15:00</div> </div> <ul class="mistnost101"> <li> <a href="#" class="a1">10:00 - 11:30</a> </li> <li> <a href="#" class="a2">12:00 - 13:30</a> </li> </ul> <ul class="velkysal"> <li> <a href="#" class="a1">11:00 - 12:00</a> </li> <li> <a href="#" class="a2">12:00 - 13:30</a> </li> </ul> <ul class="malysal"> <li> <a href="#" class="a1">14:00 - 15:00</a> </li> </ul> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.timeline { margin-left: -50px; font-size: 1.6em; } .hodina { display: table-cell; min-width: 180px; text-align: center; } .timeline ul { position: relative; list-style: none; height: 6em; margin-left: 90px; } .timeline a { position: absolute; padding: 2em 0; text-align: center; box-sizing: border-box; border: 4px solid #000; color: black; } .mistnost101 .a1 { left: 0; width: 270px; background: #f33; } .mistnost101 .a2 { left: 360px; width: 270px; background: #3f3; } .velkysal .a1 { left: 180px; width: 180px; background: #3f3; } .velkysal .a2 { left: 405px; width: 315px; background: #f33; } .malysal .a1 { left: 720px; width: 180px; background: #33f; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>