Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet tellus a augue eleifend pulvinar at non sem. Quisque velit lacus, pellentesque in placerat vitae, adipiscing vitae nisl. Suspendisse potenti. Curabitur tincidunt elementum neque, sed dictum odio vestibulum sit amet. Phasellus a ligula ac eros dictum imperdiet. Donec laoreet commodo nulla in rhoncus. Nulla facilisi. Nulla ligula elit, porttitor eu pulvinar ut, tempor nec odio. Praesent turpis mauris, aliquet ac porttitor et, imperdiet ut nisl.

Aliquam tristique, magna porttitor ultrices commodo, dui arcu rhoncus felis, vitae gravida lectus felis vel dolor. Sed mi justo, faucibus vel consectetur nec, porttitor eget justo. Nulla faucibus tortor ac eros tempus eu lobortis nibh varius. Nullam ornare, felis non ornare facilisis, magna magna porta ligula, at placerat odio leo eu lacus. Praesent sodales, arcu vel volutpat congue, mauris mauris sollicitudin nisi, et malesuada mi lorem ac purus. Sed ipsum urna, faucibus non aliquet vel, ultricies eu velit. Pellentesque vel felis est.

Praesent imperdiet

Praesent imperdiet dictum semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Suspendisse potenti. Fusce ut erat arcu, vel interdum erat. Donec vehicula nisl eget libero dignissim scelerisque. Sed rutrum, massa sed volutpat lobortis, neque augue cursus urna, non semper mi ligula non augue.

Asennus

Images

valkta.jpg

Codes

CSS

Name your CSS-folder ruoho.css

body { background: url('http://i439.photobucket.com/albums/qq116/Miyande/ulkat/valkta.jpg') repeat-x 0 0 #FFF; font-family: 'Century Gothic', Monospace; font-size: 12px; color: #313131; text-align: justify; } A:link, A:visited { text-decoration: none; letter-spacing: 1px; color: #C2C2C2; } A:hover { color: #A1A1A1; } h1, h2, h3 { font-family: Georgia, Serif; font-style: italic; font-weight: normal; } h1 { font-size: 25px; margin-bottom: -6px; color: #CCC; letter-spacing: 2px; padding-left: 20px; } h2 { font-size: 18px; text-align: right; padding-right: 35px; letter-spacing: 1px; color: #AAA; } h3 { font-size: 15px; text-align: right; padding-right: 40px; color: #AAA; } #otsikko { position: absolute; top: 50px; right: 35px; font-size: 30px; font-family: Georgia, Serif; font-style: italic; } #viiva { background: #EEE; position: absolute; left: 0; top: 278px; width: 100%; height: 10px; } #linkit { position: absolute; right: 35px; top: 290px; word-spacing: 4px; color: #AAA; } #linkit A:link { text-decoration: none; color: #CCC; font-family: Georgia, Serif; font-style: italic; font-weight: bold; } #linkit A:visited { text-decoration: none; color: #CCC; font-family: Georgia, Serif; font-style: italic; font-weight: bold; } #linkit A:hover { color: #A1A1A1; border-top: 10px solid #CCCCCC; padding-top: 3px; } #tekstit { position: absolute; top: 290px; left: 30px; width: 550px; padding-bottom: 50px; } #tekstit .boksi { padding: 10px 10px 10px 10px; border: 1px solid #EBEBEB; color: #B6B6B6; background: #F8F8F8; margin-bottom: 15px; } #tekstit .boksi:hover { color: #313131; } #tekstit .copyt { text-align: center; font-size: 10px; } textarea, input, select { font-family: Arial, Sans-serif; font-size: 11px; color: #B6B6B6; padding: 10px; } textarea:focus, input:focus, select:focus { color: #313131; }

HTML

<!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" lang="fi" xml:lang="fi"> <head> <title>Valkoistaaa</title> <link href="ruoho.css" type="text/css" rel="stylesheet" /> </head> <body> <a name="alku"></a> <div id="viiva"></div> <div id="otsikko"> Site's Title </div> <div id="linkit"> <a href="">Linkki</a> • <a href="">Linkki</a> • <a href="">Linkki</a> • <a href="">Linkki</a> • <a href="">Linkki</a> </div> <div id="tekstit"> <h1>Lorem Ipsum</h1> <div class="boksi"> <h2>Lorem Ipsum</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet tellus a augue eleifend pulvinar at non sem. Quisque velit lacus, pellentesque in placerat vitae, adipiscing vitae nisl. Suspendisse potenti. Curabitur tincidunt elementum neque, sed dictum odio vestibulum sit amet. Phasellus a ligula ac eros dictum imperdiet. Donec laoreet commodo nulla in rhoncus. Nulla facilisi. Nulla ligula elit, porttitor eu pulvinar ut, tempor nec odio. Praesent turpis mauris, aliquet ac porttitor et, imperdiet ut nisl. </p> <p> Aliquam tristique, magna porttitor ultrices commodo, dui arcu rhoncus felis, vitae gravida lectus felis vel dolor. Sed mi justo, faucibus vel consectetur nec, porttitor eget justo. Nulla faucibus tortor ac eros tempus eu lobortis nibh varius. Nullam ornare, felis non ornare facilisis, magna magna porta ligula, at placerat odio leo eu lacus. Praesent sodales, arcu vel volutpat congue, mauris mauris sollicitudin nisi, et malesuada mi lorem ac purus. Sed ipsum urna, faucibus non aliquet vel, ultricies eu velit. Pellentesque vel felis est. </p> <h3>Praesent imperdiet</h3> <p> Praesent imperdiet dictum semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Suspendisse potenti. Fusce ut erat arcu, vel interdum erat. Donec vehicula nisl eget libero dignissim scelerisque. Sed rutrum, massa sed volutpat lobortis, neque augue cursus urna, non semper mi ligula non augue. </p> </div> <h1>Lorem Ipsum</h1> <div class="boksi"> <h2>Lorem Ipsum</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet tellus a augue eleifend pulvinar at non sem. Quisque velit lacus, pellentesque in placerat vitae, adipiscing vitae nisl. Suspendisse potenti. Curabitur tincidunt elementum neque, sed dictum odio vestibulum sit amet. Phasellus a ligula ac eros dictum imperdiet. Donec laoreet commodo nulla in rhoncus. Nulla facilisi. Nulla ligula elit, porttitor eu pulvinar ut, tempor nec odio. Praesent turpis mauris, aliquet ac porttitor et, imperdiet ut nisl. </p> <p> Aliquam tristique, magna porttitor ultrices commodo, dui arcu rhoncus felis, vitae gravida lectus felis vel dolor. Sed mi justo, faucibus vel consectetur nec, porttitor eget justo. Nulla faucibus tortor ac eros tempus eu lobortis nibh varius. Nullam ornare, felis non ornare facilisis, magna magna porta ligula, at placerat odio leo eu lacus. Praesent sodales, arcu vel volutpat congue, mauris mauris sollicitudin nisi, et malesuada mi lorem ac purus. Sed ipsum urna, faucibus non aliquet vel, ultricies eu velit. Pellentesque vel felis est. </p> <h3>Praesent imperdiet</h3> <p> Praesent imperdiet dictum semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Suspendisse potenti. Fusce ut erat arcu, vel interdum erat. Donec vehicula nisl eget libero dignissim scelerisque. Sed rutrum, massa sed volutpat lobortis, neque augue cursus urna, non semper mi ligula non augue. </p> </div> <div class="copyt"> Design ©<a href="http://tierran.net/dewymorning">Namuless</a> | <a href="#alku">Top</a> </div> </div> </body> </html>