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> <html> <head> <meta charset="UTF-8"> <title>RuBa - Květinové a rostlinné dekorace, věnce a svícny ze skeletových listů</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <!-- link na style.css --> </head> <body> <div class="header"> <div> <a href="index.html"><img src="obr/logoupr.jpg" alt="Logo" width="500" height="150"></a> </div> </div> <div class="body"> <div> <div class="header"> <ul> <li class="current"> <a href="index.html">úvod </a></li> <li> <a href="nase_vyrobky.html">naše výrobky</a> </li> <li> <a href="o_nas.html">o nás</a> </li> <li> <a href="kontakty.html">kontakty</a> </li> <li> <a href="vas_nazor.html">váš názor</a></li> <li> <a href="aktuality.html">aktuality</a> </li> </ul> </div> <div class="body"> <div id="content_uvod"> <div> <h3>Vítáme Vás na našich stránkách.</h3> <p>Rxxxxx text e.</p> <p>Pxxx text x.</p> <p>Dxxxx text ř.</p> <p> </p> <p> Ukázky naší práce naleznete pod záložkou <a href="nase_vyrobky.html"><strong>Naše výrobky</strong></a> - <a href="vence.html">věnce</a>, <a href="svicny.html">svícny</a> ... atd </p> <br><a href="index.html"><img src="obr/uvod_svicen – kopie.jpg" alt="Svícen" width="500" height="400" title="Svícen"></a> </div> </div> </div> <div class="footer"> <p> aaa123 </p> </div> </div> </div> <div class="footer"> <div> <p> © Copyright 2015. Created by vladamaca. All rights reserved. </p> </div> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
/* margin - vnější okraj prvku ,,,, padding - vnitřní okraj prvku ,,, (horní, pravá, dolní, levá) ,,, float - obtékání text - pouze left/right */ /*div {border: 1px dashed gray} /* vybarvení rámečků*/ /*td {border: 1px dashed orange} /* vybarvení rámečků*/ /* styly na tlačítka a { padding: 0.3em 1em 0.3em 1em; border: outset 0.5em; font-weight: bold; text-decoration: none } a:link, a:visited { background: #000080; color: #fff } a:hover { background: #00f; color: #ff0; border: inset 0.5em } */ body { background: black url(../obr/bg-body.jpg) repeat; /* pozadí body */ color: #6c5b37; /*barva písma na celých stránkách - body */ font-family: Arial, Helvetica, sans-serif; font-size: 14px; /* velikost písma v body */ width: 960px; margin-left: auto; margin-right: auto; padding: 0; } a { outline: none; } p { margin: 0 50px 0 50px; /* úprava šířky řádku s texty*/ line-height: 24px; /* výška řádku v textu */ } p a { color: #6c5b37; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h5 { margin: 0; } div.header { background: url(../obr/stripe1.jpg) repeat-x hidden; height: 160px; /* výška hlavičky */ margin: 0 auto; overflow: hidden; width: 960px; /* šířka hlavičky - 960px default */ } div.header div { margin: 5px 0 0; /* prostor nad logem */ } div.header div a, div.body div div:first-child a, div.body div:first-child div.body div a { display: inline-block; } div.body { margin: 10px auto 0; /* prostor mezi nabídkou a logem*/ overflow: hidden; width: 960px;/*960*/ } div.body div:first-child { float: left; height: auto; margin: 5px 0 0; width: 960px;/*716 ... body v body*/ } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm VÝŠKA a ŠÍŘKA NABÍDKY mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm */ div.body div:first-child div.header { background: url(../obr/interface1.jpg) no-repeat; height: 35px; /*35 ... header v body - výška nabídky*/ padding: 7px 0 0 8px; margin: 0 0 0 3px; width: 960px;/*702 ... header v body - šířka nabídky*/ } div.body div:first-child div.header ul { overflow: hidden; } div.body div:first-child div.header ul li { float: left; margin: 0 13px; text-transform: uppercase;/* uppercase velké písmo .... lowercase je male pismo*/ } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm TEXT - NABÍDKA mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm */ div.body div:first-child div.header ul li a { color: #fffcdf; /* barva nápisů v nabídce */ display: block; height: 35px;/*29 ... výška tlačítka v nabídce*/ font-size: 12px; letter-spacing: 0.075em; line-height: 35px; /*29 posouvání textu v tlačítku hore dole ... 29- nahoru 29+ dolu*/ padding: 0 10px; text-align: center; text-decoration: none; text-shadow: 1px 1px 1px #81725c; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm BARVA tlačítka SELECTED a NONSELECTED- NABÍDKA mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm */ div.body div:first-child div.header ul li.current a { background: url(../obr/bg-menuselected.jpg) repeat-x; /* barva tlačítka " selected " */ color: #FFD700; /* barva písma na tlačítku selected */ } div.body div:first-child div.header ul li a:hover { color: #FFD700; /* barva ostatních nápisů tlačítek ( nonselected ) když na ně ukážu myší */ } div.body div:first-child div.body { background: none; float: none; height: auto; margin: 0; width: auto; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm OBRÁZKY #content mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm */ div.body div div.body div#content a img { width: 960; margin-left: 50%; /* vnější levý okraj rámečku ..... posouvání obrázku */ margin-right: auto; border: 0; /* rámeček obrázku */ float: left; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm NADPISy H2 a H4 mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm */ div.body div div.body h2 { font-family: "Times New Roman", Times, serif; font-size: 16px; letter-spacing: 0.025em; line-height: 24px; color: #6c5b37; float: none; text-decoration: none; text-transform: none; /* velké písmo ( capslock) */ margin: 0 0 0 0; /* posouvání */ padding: 0 0 0 29%; } div.body div div.body h4 { font-family: "Times New Roman", Times, serif; font-size: 16px; letter-spacing: 0.025em; line-height: 24px; color: #f00853; float: none; text-decoration: none; text-transform: none; /* uppercase - velké písmo ( capslock) */ margin: 0 0 0 0; /* posouvání */ padding: 0 0 0 0; } div.body div:first-child div.footer { background: none; float: none; height: auto; margin: 24px 0 0; /* prostor pod body, resp rozšíření body, směrem dolu */ width: auto; } div.body div { height: auto; width: 215px; } div.body div div { float: none; margin: 20px 0 0; } div.body div div:first-child { float: none; height: auto; margin: 0; width: auto; } div.body div div h3, div.body div div h4 { /* nadpis h4 */ color: #ffa500; font-family: "Times New Roman", Times, serif; font-size: 18px; letter-spacing: 0.05em; line-height: 24px; margin: 0 50px 0 50px; padding: 0; text-transform: uppercase; } div.body div div h4 { margin: 3px 0 5px; text-transform: none; } div.body div div.body div#content { background: url(../obr/bg-content-top.jpg) no-repeat hidden; /* taková ta úzká lištička pod nabídkou */ border-radius: 0; height: auto; margin: 0 0 0 3px; /* posouvání body v body - levo pravo */ padding: 2px 0 0; /* posouvání body v body - hore dole */ width: 960px; /*710 šířka lišty */ } div.body div div.body div#content div { background: #f0e68c url(../obr/bg-content-bottom.jpg) no-repeat center bottom; /* lišta dole pod body ..... na začátku řádku je barva ................ ^^^^^^^ = barva body */ border-radius: 0; height: auto; padding: 13px 0 36px; width: 960px; /*710 šířka lišty*/ } div.body div div.body div#content div div { background: none; padding: 0 25px; width: auto; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm CONTENT_UVOD ( Úvodní strana ) mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm */ div.body div div.body div#content_uvod p { margin: 0 50px 0 50px; /* úprava šířky řádku s texty*/ line-height: 24px; /* výška řádku v textu */ text-align: center; } div.body div div.body div#content_uvod { background: url(../obr/bg-content-top.jpg) no-repeat hidden; /* taková ta úzká lištička pod nabídkou */ border-radius: 0; height: auto; margin: 0 0 0 3px; /* posouvání body v body - levo pravo */ padding: 2px 0 0; /* posouvání body v body - hore dole */ width: 960px; /*710 šířka lišty */ } div.body div div.body div#content_uvod div { background: #f0e68c url(../obr/bg-content-bottom.jpg) no-repeat center bottom; /* lišta dole pod body ..... na začátku řádku je barva ................ ^^^^^^^ = barva body */ border-radius: 0; height: auto; padding: 13px 0 36px; width: 960px; /*710 šířka lišty*/ } div.body div div.body div#content_uvod div h3 { font-family: "Times New Roman", Times, serif; font-size: 16px; letter-spacing: 0.025em; line-height: 24px; color: #6c5b37; float: none; text-decoration: none; text-transform: none; /* velké písmo ( capslock) */ text-align:center; } div.body div div.body div#content_uvod div a img { width:100%; height:100%; } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm #CONTENT2 ( galerie ) mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm */ div.body div div.body div#content2 { background: url(../obr/bg-content-top.jpg) no-repeat hidden; /* taková ta úzká lištička pod nabídkou */ border-radius: 0; height: auto; /* výška */ width: 82%; /* šířka */ float: right; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; } div.body div div.body div#content2 div { background: #f0e68c url(../obr/bg-content-bottom.jpg) no-repeat center bottom; /* lišta dole pod body ..... na začátku řádku je barva ................ ^^^^^^^ = barva body */ border-radius: 0; height: auto; width: 100%; /*710 šířka lišty*/ margin: 3px 0 10px -10px; padding: 0 0 10px 10px; float: rigt; } div.body div div.body div#content2 TD { FONT-SIZE: 11px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif } div.body div div.body div#content2 a:hover { COLOR: #804c4c; BACKGROUND-COLOR: #f0efe3 } div.body div div.body div#content2 H1 { FONT-SIZE: 12px; COLOR: #979797; FONT-FAMILY: Helvetica, Verdana, Arial } div.body div div.body div#content2 H2 { FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif } div.body div div.body div#content2 H3 { FONT-SIZE: 18px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif } div.body div div.body div#content2 div p#fototext { FONT-SIZE: 20px; COLOR: #000000; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; text-align: center; } div.body div div.body div#content2 div p#fototext2 { FONT-SIZE: 12px; COLOR: #666666; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm MALÁ NABÍDKA v content2 mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm */ div.body div div.body div#content2 div div#nabidkamala { height: 35px; /*35 ... header v body - výška nabídky*/ padding: 7px 0 0 8px; margin: 0 0 0 3px; width: 960px;/*702 ... header v body - šířka nabídky*/ } div.body div div.body div#content2 div div#nabidkamala ul { overflow: hidden; } div.body div div.body div#content2 div div#nabidkamala ul li { float: left; margin: 0 13px; text-transform: uppercase;/* uppercase velké písmo .... lowercase je male pismo*/ } /* mmmmmmmmmmmmmmmmmmmmmmmmm text mmmmmmmmmmmmmmmmmmmmm*/ div.body div div.body div#content2 div div#nabidkamala ul li a{ color: #fffcdf; /* barva nápisů v nabídce */ display: block; height: 35px;/*29 ... výška tlačítka v nabídce*/ font-size: 12px; letter-spacing: 0.075em; line-height: 35px; /*29 posouvání textu v tlačítku hore dole ... 29- nahoru 29+ dolu*/ padding: 0 10px; text-align: center; text-decoration: none; text-shadow: 1px 1px 1px #81725c; } div.body div div.body div#content2 div div#nabidkamala ul li.current3 a { background: url(../obr/bg-menuselected.jpg) repeat-x; /* barva tlačítka " selected " */ color: #FFD700; /* barva písma na tlačítku selected */ } div.body div div.body div#content2 div div#nabidkamala ul li a:hover { color: #FFD700; /* barva ostatních nápisů tlačítek ( nonselected ) když na ně ukážu myší */ } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm SIDE ( věnce, svícny, etc. ) mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm */ div.body div div.body div#side { background: url(../obr/side-buttons.jpg) repeat; height: 350px; /*35 ... header v body - výška nabídky*/ padding: 0 0 0 0; margin: 3px 0 0 3px; width: 16%; /*150 ... header v body - šířka nabídky*/ } div.body div div.body div#side ul li a { color: #fffcdf; /* barva nápisů v nabídce */ height: 29px; /*29 ... výška tlačítka v nabídce*/ width: 140px; margin: 0; font-size: 12px; letter-spacing: 0.075em; /* mezera mezi pismenama */ line-height: 29px; /*29 posouvání textu v tlačítku hore dole ... 29- nahoru 29+ dolu*/ padding: 0; text-align: center; text-decoration: none; text-shadow: 1px 1px 1px #81725c; border-style: outset; border-width: 5px; border-color: #ffa500; background: yellow; } div.body div div.body div#side ul li.current a { background: url(../obr/bg-menuselected.jpg) repeat-x; /* barva tlačítka " selected " */ color: #FFD700; /* barva písma na tlačítku selected */ } div.body div div.body div#side ul li a:hover { color: #FFD700; background-color: #000000; /* barva ostatních nápisů tlačítek ( nonselected ) když na ně ukážu myší */ } /* mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm PATIČKA mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm */ div.footer { /*patička */ background: url(../obr/stripe2.jpg) repeat-x hidden; height: auto; margin: 0 auto; width: 960px; } div.footer div { height: 80px; width: 960px; } div.footer div p { color: #aaa292; font-family: Arial, Helvetica, sans-serif; font-size: 13px; letter-spacing: 0.075em; line-height: 70px; text-align: center; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>