Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque, mi cursus vehicula mattis, ligula tortor aliquet metus, a convallis ante eros sed tortor. Proin tincidunt sem nec quam suscipit imperdiet. Nam dapibus est quis nunc tincidunt euismod. Ut vitae sapien in massa suscipit pulvinar ac vitae libero. Proin tempor rutrum tellus. Sed ac turpis eros, a pellentesque lorem. Donec a lectus vitae ligula egestas ultricies a at odio. Aliquam erat volutpat. Sed faucibus iaculis turpis. Sed molestie leo quis nulla faucibus quis gravida lectus tempus. Quisque dapibus nibh a sapien tristique vehicula. Donec urna magna, rutrum sit amet pulvinar.

bold italic underline Linkki

Asennus

IMG:

sora.jpg | sora2.jpg | sora3.jpg

CSS:

Name your CSS-folder kingdom.css.

body { background: url('sora2.jpg') repeat-y 100px 0px #152034; font-family:Century gothic, Tresbuchet MS; font-size: 11px; color: #FDFAF3; text-align: justify; } a:link, a:visited { letter-spacing: 1px; color: #FFFFFF; text-decoration: underline; cursor: default; } a:hover { color: #FFFFFF; text-decoration: none; cursor: pointer; } h1 { color: #CCCCCC; text-decoration: none; font-size: 23px; font-weight: normal; text-align: center; border-bottom: 1px solid #3A5B64; } h2 { color: #FDFAF3; text-align: center; text-decoration: none; border-top: 1px solid #3A5B64; font-size: 16px; font-weight: normal; letter-spacing: 1px; padding-top: 4px; } h3 { font-weight: normal; border-bottom: 1px solid #3A5B64; text-align: center; } #kuva { position: absolute; top: 0; left: 100px; width: 850px; height: 600px; background: url('sora.jpg') no-repeat; } #tausta { position: absolute; top: 0; left: 0; width: 100%; height: 185px; background: url('sora3.jpg') repeat-x; } #tekstit { position: absolute; top: 520px; left: 210px; width: 445px; padding-bottom: 50px; } #tekstit .copyt { text-align: center; font-size: 10px; color: #AAA; } #tekstit a:link, a:visited, a:hover { color: #AAA; } #boksi { text-align: justify; width: 235px; height: 140px; position: absolute; top: 365px; left: 375px; overflow: auto; padding-right: 9px; background: #3F4B5B; padding-left: 4px; } #linkit { position: absolute; top: 365px; left: 130px; } .navi { display: block; width: 215px; height: 20px; padding-top: 5px; padding-bottom: 3px; padding-left: 10px; text-align: left; text-decoration: none; letter-spacing: 2px; } a:link.navi, a:visited.navi { background: transparent; color: #FFFFFF; text-decoration: none; } a:hover.navi { background: #566D7B; text-decoration: none; color: #FFFFFF; border-right: 5px solid #FFFFFF; width: 210px; } B {color: #3A5B64;} U { color: #BF8EA1; text-decoration: none; border-bottom: 1px solid #3A5B64; letter-spacing: 2px; } I { color: #3A5B64; background: #152034;} input, select, textarea { border: 1px solid #FFF; background: transparent; font-family: Tahoma, Sans-serif; font-size: 11px; color: #FFFFFF; padding: 10px; } input:focus, select:focus, textarea:focus { color: #708F91; }

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" lang="fi" xml:lang="fi"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Kingdom Hearts</title> <link href="kingdom.css" type="text/css" rel="stylesheet" /> </head> <body> <a name="alku"></a> <div id="tausta"></div> <div id="kuva"> </div> <div id="linkit"> <a href="linkki.htm" class="navi">Linkki</a> <a href="linkki.htm" class="navi">Linkki</a> <a href="linkki.htm" class="navi">Linkki</a> <a href="linkki.htm" class="navi">Linkki</a> <a href="linkki.htm" class="navi">Linkki</a> </div> <div id="boksi"> <h3>Se olis otsikkopahainen~</h3> <p>Tähän voi pistellä itsestään tietoja, vaikkapa näin:</p> <p> <u>Name:</u> Esimerkki Elli <br /> <u>Age:</u> Iäkäs sellainen <br /> <u>Gender:</u> Aikuinen Nainen <br /> <u>Likes:</u> Shoppailu ja meikit <br /> <u>Dislikes:</u> Ötökät </p> </div> <div id="tekstit"> <h1>Lorem Ipsum</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque, mi cursus vehicula mattis, ligula tortor aliquet metus, a convallis ante eros sed tortor. Proin tincidunt sem nec quam suscipit imperdiet. Nam dapibus est quis nunc tincidunt euismod. Ut vitae sapien in massa suscipit pulvinar ac vitae libero. Proin tempor rutrum tellus. Sed ac turpis eros, a pellentesque lorem. Donec a lectus vitae ligula egestas ultricies a at odio. Aliquam erat volutpat. Sed faucibus iaculis turpis. Sed molestie leo quis nulla faucibus quis gravida lectus tempus. Quisque dapibus nibh a sapien tristique vehicula. Donec urna magna, rutrum sit amet pulvinar. </p> <p><b>bold</b> <i>italic</i> <u>underline</u> <a href="#">Linkki</a></p> <h2>Lorem Ipsum</h2> <hr color="#3A5B64" size="1" width="300px"></hr> <div class="copyt"> Layot ©<a href="http://tierran.net/dewymorning">Namuless</a> Image ©<a href="http://aethereality.net/gallery/">Aethereality Gallery</a> <br /> - <a href="#alku">Top</a> - </div> </div> </body> </html>