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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> </head> <body> <div id="wrapper"> <div id="header"> <div id="profile-photo"> <a href="uploads/profile/profile-original/{profile_photo}" data-lightbox="{profile_photo}"><img src="uploads/profile/profile-thumb/{profile_photo}" border="2"/></a> </div> <div id="user-photo"> <a href="uploads/profile/profile-original/{profile_user_photo}" data-lightbox="{profile_user_photo}"><img src="uploads/profile/profile-thumb/{profile_user_photo}" border="2"/></a> </div> <div id="headerbar"> Informace o uživateli </div> <div id="navi"> Nějaké udaje </div> <div id="title"> Nadpis </div> </div> <div id="left-column"> <div id="sidepane"> <div id="sidepane-pet"> <p class="style1">Informace v levém sloupci</p> </div> </div> </div> <div id="right-column"> <div id="rightside"> <div style="padding: 5px;"> <p>Informace v pravém sloupci</p> </div> </div> </div> <div id="main-content"> <div id="content"> Informace v postředním sloupci </div> </div> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#wrapper{ margin: 0px auto; width:1100px; min-height:1000px; } #header{ width:1100px; height:210px; } #profile-photo{ float: left; width:260px; background:#D1CCCC; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #profile-photo img{ height: 200px; max-width: 260px; border-color:white; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; display: block; margin: 0 auto; } #user-photo{ float: left; width:110px; background:#D1CCCC; margin-left:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #user-photo img{ height: 85px; max-width: 110px; border-color:white; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; display: block; margin: 0 auto; } #headerbar { background:#36648B; height: 40px; width: 720px; float: right; text-align: right; } #headerbar p{ color: #fff; padding: 10px; font-size: 85% } #headerbar a { color: #fff; padding: 8px; text-decoration:none; } #navi{ height: 50px; width: 720px; margin-left: 380px; padding-top: 38px; background: -webkit-linear-gradient(#BAC8D8, #1e5799); background: -moz-linear-gradient(#BAC8D8, #1e5799); background: -ms-linear-gradient(#BAC8D8, #1e5799); background: -o-linear-gradient(#BAC8D8, #1e5799); background: linear-gradient(#BAC8D8, #1e5799); } #title{ width:500px; height:110px; margin-left: 265px; } #left-column{ width:270px; float: left; min-height:600px; } #sidepane { text-align: justify; width: 265px; left: 82px; margin-top:0px; } #sidepane-pet{ margin: 0 auto; margin-top: 0px; text-align: justify; width: 255px; height: 400px; font-size: 80%; background: -webkit-radial-gradient(#fff, #F3F2F7); background: -moz-radial-gradient(#fff, #F3F2F7); background: -ms-radial-gradient(#fff, #F3F2F7); background: -o-radial-gradient(#fff, #F3F2F7); background: radial-gradient(#fff, #F3F2F7); border-width:4px; border-style:solid; border-color:white } #right-column{ width:230px; min-height:600px; float: right } #rightside{ height: 400px; background:darkBlue; color:white; } #rightside a{ color: #fff; padding: 0px; } #main-content{ width:600px; height:400px; margin-left:270px; background: #F3F2F7 } #content{ width: 555px; min-height: 900px; color: #3D70A3; text-align: justify; z-index: -1; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>