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 style="position:absolute;width:25%;height:100%;border: 2px solid #707080;background:#ffffff;"> <div style="max-height:100%;overflow-y:auto;"> <div class="message" style=""> <a href="javascript:foto('close');" class="jmeno">Arnošt Jánský</a>: Lorem ipsum, dolor sit amet. Consectetur adipiscing elit. </div> <div class="message" style=""> <a href="#" class="jmeno">Tadeáš Micuků</a>: Phasellus eget lobortis magna, at pellentesque nulla. Fusce mollis est sit amet condimentum ullamcorper. Donec dui nisi, aliquet id nisl at, imperdiet tempus felis. </div> <div class="message" style=""> <a href="#" class="jmeno">Tadeáš Micuků</a>: Phasellus eget lobortis magna, at pellentesque nulla. Fusce mollis est sit amet condimentum ullamcorper. Donec dui nisi, aliquet id nisl at, imperdiet tempus felis. </div> <div class="message" style=""> <a href="#" class="jmeno">Tadeáš Micuků</a>: Phasellus eget lobortis magna, at pellentesque nulla. Fusce mollis est sit amet condimentum ullamcorper. Donec dui nisi, aliquet id nisl at, imperdiet tempus felis. </div> <div class="message" style=""> <a href="#" class="jmeno">Tadeáš Micuků</a>: Phasellus eget lobortis magna, at pellentesque nulla. Fusce mollis est sit amet condimentum ullamcorper. Donec dui nisi, aliquet id nisl at, imperdiet tempus felis. </div> <div class="message" style=""> <a href="#" class="jmeno">Tadeáš Micuků</a>: Phasellus eget lobortis magna, at pellentesque nulla. Fusce mollis est sit amet condimentum ullamcorper. Donec dui nisi, aliquet id nisl at, imperdiet tempus felis. </div> <div class="message" style=""> <a href="#" class="jmeno">Tadeáš Micuků</a>: Phasellus eget lobortis magna, at pellentesque nulla. Fusce mollis est sit amet condimentum ullamcorper. Donec dui nisi, aliquet id nisl at, imperdiet tempus felis. </div> <div class="message" style=""> <a href="#" class="jmeno">Tadeáš Micuků</a>: Phasellus eget lobortis magna, at pellentesque nulla. Fusce mollis est sit amet condimentum ullamcorper. Donec dui nisi, aliquet id nisl at, imperdiet tempus felis. </div> </div> <div style="border-top:2px dotted #707080;width:100%;position:absolute;bottom:0px;background:white;"> Přidat kometář:<br> <div class="textarea" style="margin:0 5% 0 5%;width:90%;min-height:1em;" contentEditable=true></div> </div> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.textarea {border: 1px solid grey;border-radius:2px;padding:2px} .jmeno {color:#6699ff;text-decoration:none;font-weight:bold;transition:text-decoration 0.5s;} .jmeno:hover {text-decoration:underline;} .message {border:2px solid lightgrey;;margin:10px;width:calc(100% - 26px);padding:2px;} .body{height:100%;}
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>