Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam massa nec odio malesuada at varius nibh faucibus. Etiam dapibus pellentesque justo vitae cursus. Nulla nunc urna, pretium nec egestas ut, iaculis vitae purus. Suspendisse potenti. Donec felis elit, feugiat porta gravida eu, laoreet ut lorem. Nulla sagittis laoreet neque, et porttitor dui venenatis at. Donec dui quam, facilisis non pharetra ornare, aliquet in mi. Etiam vitae metus turpis, sed sagittis dui.

Curabitur a enim aliquam nunc rutrum porttitor. Nam ligula quam, imperdiet ac varius ac, blandit faucibus nunc. Vivamus ullamcorper est non lacus feugiat dapibus. Morbi commodo sodales dui, ut luctus risus convallis at. Proin lobortis lectus ut sapien luctus ut pulvinar ante pretium. Morbi rhoncus ornare egestas. Pellentesque aliquet dui eu dui interdum eleifend. Integer porttitor tortor vel massa pulvinar vitae hendrerit magna pharetra. Donec vel erat vel est gravida porta.

Asennus

IMG:

95.jpg | Twilightta.jpg | twilight-1.jpg

CSS:

Name your CSS-folder twi.css.

body { background: url('95.jpg') repeat 0 0; color: #FFFFFF; font-family: Century Gothic; font-size: 12px; } a:link, a:visited { color: #BE946C; text-decoration: none; letter-spacing: 1px; } a:hover { text-decoration: underline; } h1 { font-family: Georgia, Serif; font-style: italic; font-size: 20px; text-align: center; color: #CFA57A; border-bottom: 1px solid #FFFFFF; padding-bottom: 3px; } h2 { font-family: Georgia, Serif; font-style: italic; font-size: 15px; text-align: center; color: #CFA57A; border-top: 1px solid #FFFFFF; padding-top: 3px; } #tausta { position: absolute; top: 100px; left: 0; width: 100%; height: 400px; background: url('twilightta.jpg') repeat-x; } #kuva { position: absolute; left: 0; top: 100px; width: 800px; height: 400px; background: url('twilight-1.jpg') no-repeat; } #otsikko { position: absolute; left: 20px; top: 65px; } #otsikko h1 { font-size: 40px; font-style: normal; border-bottom: 0; color: #FFFFFF; text-transform: uppercase; text-align: right; letter-spacing: 3px; margin: 0; } #linkit { position: absolute; top: 505px; right: 30px; } #linkit a:link { background: #FFF; text-decoration: none; padding: 5px 20px 6px; color: #7F4A18; font-family: Georgia, Serif; font-style: italic; font-size: 15px; letter-spacing: -1px; } #linkit a:visited { background: #FFF; text-decoration: none; padding: 5px 20px 6px; color: #7F4A18; font-family: Georgia, Serif; font-style: italic; font-size: 15px; letter-spacing: -1px; } #linkit A:hover { border-bottom: 5px solid; } #tekstit { position: absolute; left: 600px; top: 110px; width: 520px; height: 368px; text-align: left; overflow: auto; padding-right: 9px; padding: 6px; text-align: justify; } #tekstit .copyt { text-align: center; font-size: 10px; padding-top: 10px; } input, select, textarea { background: transparent; border: 1px solid #CFA57A; font-family: Arial, Sans-serif; font-size: 10px; color: #CFA57A; padding: 10px; }

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>TWILIGHT</title> <link href="twi.css" type="text/css" rel="stylesheet" hreflang="fi" /> </head> <body> <div id="tausta"></div> <div id="kuva"></div> <div id="otsikko"> <h1>Site's Title</h1> </div> <div id="linkit"> <a href="#">Linkki</a> <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> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam massa nec odio malesuada at varius nibh faucibus. Etiam dapibus pellentesque justo vitae cursus. Nulla nunc urna, pretium nec egestas ut, iaculis vitae purus. Suspendisse potenti. Donec felis elit, feugiat porta gravida eu, laoreet ut lorem. Nulla sagittis laoreet neque, et porttitor dui venenatis at. Donec dui quam, facilisis non pharetra ornare, aliquet in mi. Etiam vitae metus turpis, sed sagittis dui. </p> <p> Curabitur a enim aliquam nunc rutrum porttitor. Nam ligula quam, imperdiet ac varius ac, blandit faucibus nunc. Vivamus ullamcorper est non lacus feugiat dapibus. Morbi commodo sodales dui, ut luctus risus convallis at. Proin lobortis lectus ut sapien luctus ut pulvinar ante pretium. Morbi rhoncus ornare egestas. Pellentesque aliquet dui eu dui interdum eleifend. Integer porttitor tortor vel massa pulvinar vitae hendrerit magna pharetra. Donec vel erat vel est gravida porta. </p> <h2>Lorem Ipsum</h2> <div class="copyt"> Ulkoasu ©<a href="http://tierran.net/dewymorning">Namuless</a> Kuva ©<a href="http://www.sweetandtalented.com/index.php">SweetandTalented</a> Brush ©<a href="http://moargh.de/">Moargh.de</a> & ©<a href="http://fractured-sanity.org/">Fractured Sanity</a> </div> </div> </body> </html>