Izrada CSS predloška

Osnovna struktura

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="stil.css" /> </head> <body> </body> </html>

Wrapper, header i footer

<div id="wrapper"> <div id="header"> <h1>Web dizajn</h1> <p id="slogan">Slogan vaše tvrtke</p> </div> <div id="footer"> <p>Footer</p> </div> </div>

HTML u dva stupca

<div id="container"> <div id="article"> <p>Article</p> </div> <div id="sidebar"> <p>Sidebar</p> </div> </div>

CSS zadane postavke

* { margin: 0; padding: 0; } body { font-size: 62.5%; font-family: Tahoma, sans-serif; background: #264057 url('slike/pozadina.gif') repeat-x; } #wrapper { margin: 0 auto; width: 80em; }

Vodoravni izbornik

#header { background: transparent url('slike/svjetionik.jpg') center right; width: 40em; height: 10em; padding: 3em 0 3em 40em; border-top: 0.2em solid #5a8cca; border-bottom: 0.2em solid #5a8cca; }

CSS naslov i podnaslov

h1 { font-size: 6em; font-weight: lighter; } #slogan { font-size: 1.5em; letter-spacing: 0.623em; }

Članci i desni stupac

#article { float: left; background-color: #1D4C83; width: 75%; } #sidebar { float: left; width: 25%; background: #1D4C83 url("slike/prijelaz.gif") top repeat-x; }

Tekst i podnaslov

p { font-size: 1.4em; padding: 1% 2%; text-align: justify; line-height>: 1.3; letter-spacing: 0.08em; } h2 {/ font-size: 2.8em; color: #A65121; padding: 2% 5%; font-weight: lighter; }

Okvir sa slikom

.slike { float: left; margin: 0.3em 0.5em 0.3em 0; border: 0.1px solid black; } h3 { margin: 1% 2% 0; font-size: 2.8em; padding: 1% 5%; line-height: 1.3; font-weight: lighter; background: url("slike/iza-naslova.gif") repeat-x; }



Hvala na pozornosti!


Pitanja?