Protecting

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis facilisis varius. Proin nisl leo, aliquet at adipiscing et, pretium vel lacus. Nunc vitae mauris id dui sagittis rutrum. Vestibulum odio est, lacinia ut dapibus at, molestie eleifend magna. Fusce ac facilisis turpis. Morbi porta consequat velit, a consectetur mauris porttitor ut. Cras nec nisi lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam sed odio non quam sagittis venenatis ac dapibus sem. Nunc ipsum erat, interdum a faucibus sit amet, suscipit eget nulla. Integer ligula ante, dictum a mattis lobortis, feugiat vel eros.

Asennus

IMG:

rumie.jpg | rumieta.jpg

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>Protecting</title> <link href="protect.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="tausta"></div> <div id="kuva"></div> <div id="linkit"> <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> <br /> <a href="http://tierran.net/dewymorning" title="ulkoasu" class="navi">©Namuless</a> <a href="http://gallery.aethereality.net/list/artbook/41/" title="kuva" class="navi">©Aethereality Gallery</a> <a href="http://swimchick.net/" title="brush" class="navi">©Swimchick</a> </div> <h1>Sivusi nimi</h1> <div id="tekstit"> <h2>Lorem Ipsum</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis facilisis varius. Proin nisl leo, aliquet at adipiscing et, pretium vel lacus. Nunc vitae mauris id dui sagittis rutrum. Vestibulum odio est, lacinia ut dapibus at, molestie eleifend magna. Fusce ac facilisis turpis. Morbi porta consequat velit, a consectetur mauris porttitor ut. Cras nec nisi lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam sed odio non quam sagittis venenatis ac dapibus sem. Nunc ipsum erat, interdum a faucibus sit amet, suscipit eget nulla. Integer ligula ante, dictum a mattis lobortis, feugiat vel eros. </p> <h3>Lorem Ipsum</h3> </div> </body> </html>

CSS:

Name your CSS-folder protect.css.

body { background: #FCF7FD; color: #080108; font-family: 'Century Gothic', Monospace; font-size: 11px; } A:link, A:visited { color: #B17F40; text-decoration: none; letter-spacing: 2px; } A:hover { color: #B17F40; text-decoration: underline; } h1 { position: absolute; bottom: 0; left: 20px; color: #E4CdA1; text-transform: uppercase; letter-spacing: 2px; font-weight: normal; font-size: 30px; font-family: Garamond, Georgia; } h2 { text-align: center; text-transform: uppercase; font-size: 15px; font-family: Garamond, Serif; color: #BD9766; padding-bottom: 3px; letter-spacing: 2px; } h3 { font-size: 12px; font-family: Garamond, Serif; text-align: center; text-transform: uppercase; color: #BD9766; letter-spacing: 1px; } #tausta { position: absolute; bottom: 0; left: 0; background: url('rumieta.jpg') repeat-x; width: 100%; height: 282px; } #kuva { position: absolute; bottom: 0; right: 0; width: 800px; height: 602px; background: url('rumie.jpg') no-repeat; } #tekstit { position: absolute; right: 353px; bottom: 175px; width: 394px; height: 370px; text-align: left; overflow: auto; padding: 10px; } #linkit { position: absolute; bottom: 200px; right: 800px; width: 160px; } .navi { display: block; width: 180px; height: 17px; padding-top: 7px; text-align: center; text-decoration: none; text-transform: uppercase; font-family: Garamond, Serif; font-size: 9px; } A:link.navi, A:visited.navi { color: #925F20; background: #E4CdA1; border-left: 4px solid #451D03; } A:hover.navi { color: #6D634A; background: transparent; text-decoration: none; border-left: 4px solid #6D634A; } input, select, textarea { border: 1px solid #451D03; background: #E4CdA1; font-family: Tahoma, Sans-serif; font-size: 11px; color: #925F20; padding: 10px; } input:focus, select:focus, textarea:focus { color: #6D634A; background: transparent; border: 1px solid #6D634A; }