Lorem Ipsum

dolor sit amet...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia risus vel lacus mattis porta. Aenean semper metus vitae turpis placerat quis hendrerit sapien mollis. Nunc varius, tortor nec auctor tristique, massa leo tincidunt enim, vel vulputate dolor neque sed mi. Sed laoreet ipsum et massa aliquam ut laoreet augue dapibus. Proin dignissim euismod dui vitae venenatis. Quisque sed tempor arcu. Nulla ut sapien vel diam accumsan sollicitudin. Vestibulum lorem lectus, porta sed molestie in, dictum sed velit. Curabitur eleifend sollicitudin justo. Etiam et lacus vel turpis ultrices feugiat. Morbi aliquet lectus a mauris convallis volutpat.

Asennus

Bold underline italic link

Images

VF_n29.jpg | shana-6.jpg

CSS

Name your CSS-folder shana.css.

body { background: url(http://i835.photobucket.com/albums/zz275/nameless_X3/layots/VF_n29.jpg) repeat 0 0 transparent; margin: 0; font-size: 12px; font-family: Verdana, Sans-serif; } a:link, a:visited {color: #cfab93;} a:hover {text-decoration: none;} B {color: #58453E;} I { background: #cfab93; color: #58453E; } U { border-bottom: 1px solid #747168; text-decoration: none; color: #AB8262; } h1, h2 { font-family: Georgia, Serif; font-style: italic; } h1 { margin: 0 10px -6px; color: #cfab93; text-align: left; } h2 { margin: 0px 10px 0px; background: #A1785C; padding: 2px; text-align: right; font-size: 13px; font-weight: normal; color: #cfab93; border-bottom: 2px solid #87654e; border-right: 5px solid #87654e; } h3 { text-align: center; color: #cfab93; font-variant:small-caps; border-bottom: 1px solid #747168; padding-bottom: 3px; } #main { margin: 0; background: #AB8262 repeat-y; min-height: 600px; width: 800px; padding-bottom: 20px; } #main .header table { width: 100%; height: 200px; border-collapse: collapse; } #main .text table { width: 100%; text-align: center; border-collapse: collapse; } #main .box { background: #625E55; padding: 10px; margin: 0 10px 15px 10px; border-bottom: 5px solid #58453E; color: #A1785C; text-align: justify; } #main .box:hover { color: #cfab93; } .navi { display: block; width: 150px; margin: 5px 2px; padding: 5px; text-decoration: none; font-size: 11px; } a:link.navi, a:visited.navi { background: #cfab93; border-bottom: 4px solid #bb8d6f; color: #58453E; } a:hover.navi { background: #A1785C; border-bottom: 4px solid #87654e; color: #cfab93; letter-spacing: 1px; } input, select, textarea { color: #cfab93; border-bottom: 1px solid #87654e; border-left: 7px solid #87654e; border-right: 1px solid #87654e; border-top: 1px solid #87654e; background: #A1785C; font-family: Tahoma, Sans-serif; font-size: 12px; 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>Flame of Haze</title> <link href="shana.css" type="text/css" rel="stylesheet" /> </head> <body> <a name="top"></a> <center> <div id="main"> <div class="header"> <table border="0"> <tr><td colspan="2"><br /></td></tr> <tr> <td width="150px" align="left"> <a href="#" class="navi">Linkki</a> <a href="#" class="navi">Linkki</a> <a href="#" class="navi">Linkki</a> <a href="#" class="navi">Linkki</a> <a href="#" class="navi">Linkki</a> <a href="#" class="navi">Linkki</a> </td> <td width="500px" align="center"> <img src="http://i835.photobucket.com/albums/zz275/nameless_X3/layots/shana-6.jpg" alt="shana" title="TÄHÄN OTSIKKO MAX 786px" /> </td> <td width="150px" align="right"> <a href="#" class="navi">Linkki</a> <a href="#" class="navi">Linkki</a> <a href="#" class="navi">Linkki</a> <a href="#" class="navi">Linkki</a> <a href="#" class="navi">Linkki</a> <a href="#" class="navi">Linkki</a> </td> </tr> </table> </div> <div class="text"> <table border="0"> <tr> <td width="500px" valign="top"> <h1>Lorem Ipsum</h1> <h2>dolor sit amet...</h2> <div class="box"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lacinia risus vel lacus mattis porta. Aenean semper metus vitae turpis placerat quis hendrerit sapien mollis. Nunc varius, tortor nec auctor tristique, massa leo tincidunt enim, vel vulputate dolor neque sed mi. Sed laoreet ipsum et massa aliquam ut laoreet augue dapibus. Proin dignissim euismod dui vitae venenatis. Quisque sed tempor arcu. Nulla ut sapien vel diam accumsan sollicitudin. Vestibulum lorem lectus, porta sed molestie in, dictum sed velit. Curabitur eleifend sollicitudin justo. Etiam et lacus vel turpis ultrices feugiat. Morbi aliquet lectus a mauris convallis volutpat. </div> <h1>Asennus</h2> <div class="box"> <p align="center"> <b>Bold</b> <u>underline</u> <i>italic</i> <a href="">link</a> </p> <h3>Lorem ipsum...</h3> </div> </td> <td width="300px" valign="top"> <h1>About Me</h1> <div class="box"> Faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa... </div> <div class="box"> Chitting chatting chitting chatting... </div> </td> </tr> <tr> <td colspan="2"> <div class="box"> <b>Layot</b> ©<a href="">Namuless</a> <b>Image</b> ©<a href="http://kuusou.hayalkarga.com/">Kuusou</a> <b>Pattern</b> ©<a href="">Velvet Factory</a> | <a href="#top">Top</a> </div> </td> </tr> </table> </div> </div> </center> </body> </html>

About Me

Faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa faktaa...

Chitting chatting chitting chatting...