rendered paste body
<html>
<head>
<style type="text/css">
body {
background-image: url(bg1234.png);
background-repeat: no-repeat;
background-size: 100%;
height: 100%;
}
.frame {
/* note: bg.png has resolution 600x400 */
background-colour: grey; /* set background */
padding: 0px 20px 0px; /* padding: 0px at the top and bottom,
* 10px on both left and right */
width: 540px; /* 600px - 2*20px for left/right padding */
height: 500px; /* should be <= the image height */
overflow: auto; /* this makes it not scroll */
}
footer.common {
border-top: 1px solid #DDDDDD;
clear: both;
color: #777;
display: block;
font-size: 12px;
font-family: Arial;
font-weight: bold;
position: relative;
bottom: 0;
z-index: 100;
height: 100px;
min-width: 1000px;
background: #f4f4f4;
background: #EEE; /* old browsers */
background: -moz-linear-gradient(top, #EEEEEE 0%, #fff 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EEEEEE), color-stop(100%,#fff)); /* webkit */
z-index: 100;
background: rgba(110,110,110,.5) !important;
}
p.better{
margin-top: 0px;
margin-bottom: 6px;
margin-left:20px;
margin-right:20px;
}
img.alignLeft { float:left; margin-right: 10px; }
img.alignRight { float:right; margin-left: 10px; }
.metalframe {
background-image: url(metalframe1.png);
background-repeat: no-repeat;
background-position:center;
height:180px;
width:180px;
float:left;
margin-left:5px;
margin-bottom:5px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.frametable {
font-family: "Arabic Typesetting";
font-size:20;
color:#6e6e6e;
text-align:center;
width=80%;
}
</style>
<style href>a {text-decoration: none}
</style>
<title>The Solar Site</title>
</head>
<body>
<div align="center">
<table border="0" width=800px >
<tr>
<td colspan="3" width=800px height="200">
 
 
 
 
<img src="logga12.png" width="875" align="center" height="85"/>
</td>
</tr>
<tr>
<td align="center" width="125" valign="top">
<a href="index.html"><img src="button1.png"/>
</a>
<a href="categorysolen.html"><img src="button2.png"/>
</a>
<a href="categoryenergi.html"><img src="button3.png"/>
</a>
<a href="categorysolugnar.html"><img src="button7.png"/>
</a>
<a href="categorysolpaneler.html"><img src="button6.png"/>
</a>
<a href="categorysolceller.html"><img src="button5.png"/>
</a>
<a href="guestbook.html"><img src="button8.png"/>
</a>
<a href="links.html"><img src="button9.png"/>
</a>
<td class="maintext" width="600" height="800" valign="top">
<table background="sebra.png" width="600" border="0" bordercolor="green" >
<tr><td>
 
 
 
 
<FONT FACE="Arabic Typesetting" color="#6E6E6E" size="10">
<div align="center">
Välkommen till the Solar Site!
</div>
</FACE><FONT FACE="Arabic Typesetting" color="#6E6E6E" size="5">
<p class=better>
Denna sida är till för dig som vill lära dig mer om solen och hur man kan använda
dess energi. På många håll i världen är energi nämligen ett måste
<img src="framedsol.png" width="200" class=alignRight />
för att samhällen ska kunna fungera
, särskilt på de ställen där vintrarna är kalla
och kylan måste hållas borta.
<p class=better >
Välkommen att klicka dig runt bland solsidorna men glöm för allt i världen inte
solskyddet!
</p>
<DIV CLASS="frame" >
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum pellentesque ante eget metus commodo quis aliquet lorem
vestibulum. Etiam facilisis semper felis, vitae dictum ante
tristique eget. Mauris in tellus purus. Proin et nisi sed erat
porttitor auctor. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Donec lobortis, quam
sed bibendum hendrerit, nunc elit viverra mauris, id commodo massa
tortor eu magna. Proin ut turpis odio. Morbi libero justo,
scelerisque vitae feugiat bibendum, euismod non felis. Nam tempor
magna a ligula euismod ut feugiat lacus sodales. Duis id mauris eu
nisi mattis porttitor id sed nulla. Donec nec libero eget felis
accumsan convallis. Etiam hendrerit mi et neque vulputate sit amet
ultrices lacus volutpat. Nulla facilisi. Donec convallis hendrerit
lacinia.</P>
<P>Etiam vitae dui nisl, sit amet semper dui. Nulla interdum felis
non elit pellentesque fringilla. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ultricies rutrum sodales. Proin
libero tortor, ultrices nec placerat id, gravida nec nisi. Mauris
ac velit nec elit luctus blandit. Proin quis diam lacus, nec
tincidunt arcu. Aenean eget turpis felis. Sed nisl eros, interdum
vel pretium a, faucibus ut massa.</P>
<P>Sed ut neque eu lectus semper consectetur nec semper odio.
Aliquam lorem nunc, tempus in commodo posuere, interdum id lectus.
Donec et sem felis, vel gravida lorem. Integer faucibus ante vel
nisi dignissim sit amet suscipit arcu varius. Nulla orci neque,
facilisis posuere gravida vitae, mollis in lorem. Nunc rutrum felis
ut est commodo mattis. Quisque vel tellus vitae urna malesuada
varius. Donec ut quam vel dolor aliquet porttitor nec sed turpis.
Phasellus sollicitudin mollis nulla in auctor.</P>
<P>Pellentesque vitae erat in diam venenatis dictum sed eu arcu.
Mauris auctor mattis risus, eget auctor tellus posuere id. Nunc
vitae interdum est. Phasellus mollis lacus erat. Nunc blandit
libero et risus suscipit ornare ut mattis orci. Phasellus
ullamcorper risus ut magna mollis rhoncus. Mauris dictum pharetra
varius. Phasellus ligula nunc, adipiscing vel consequat nec,
malesuada in felis. Duis pellentesque convallis dolor in imperdiet.
Duis elementum, tortor quis fringilla condimentum, erat lectus
vehicula nibh, at bibendum est nisi quis urna. Etiam sagittis erat
ut elit mattis dictum. Integer cursus elementum erat, id aliquet
ligula tincidunt feugiat.</P>
<P>Fusce porta augue eget orci porttitor lacinia. In at sapien est.
Aenean et quam vel arcu convallis congue. Pellentesque sagittis
laoreet hendrerit. Aenean eleifend dolor vitae libero gravida
porttitor. Proin dapibus, turpis sit amet rhoncus dignissim, sem
odio sagittis justo, ac ultrices enim nisl nec lectus. Nam quis
ligula leo. Morbi pellentesque dolor eget libero fringilla
malesuada. Ut id condimentum justo.</P>
<P>In eget sapien id augue volutpat pharetra. Integer quis massa a
velit porta luctus a id tortor. Nulla arcu mauris, ultricies sit
amet faucibus et, egestas sit amet mauris. Sed lacinia placerat
neque sit amet pretium. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Phasellus
lacinia, arcu sit amet dictum condimentum, enim lacus placerat leo,
sit amet commodo purus urna a nunc. Sed eu pellentesque leo. Aenean
metus quam, porta sit amet consectetur ac, cursus a dolor.</P>
<P>Aenean accumsan tellus consectetur lorem dictum semper. Ut nec
purus ac purus sodales consequat. Sed a ipsum massa, consequat
suscipit sapien. In dignissim turpis nec nisl pellentesque nec
egestas felis volutpat. Sed et nisl ante, quis laoreet velit. Proin
ut sem ipsum. Pellentesque consequat condimentum neque, at
elementum nunc consequat in. Quisque non ante nec mauris gravida
feugiat vel non risus.</P>
<P>Quisque sit amet neque velit. Donec pellentesque, felis ut
cursus iaculis, mauris quam iaculis lacus, sed faucibus mauris leo
sit amet felis. Nunc quis arcu nulla. Donec at turpis quam.
Suspendisse potenti. Donec vehicula ante vitae leo hendrerit
rutrum. Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Vestibulum egestas, nulla sit
amet tempor mollis, nisl nisl ultrices sapien, sit amet luctus
nulla urna in enim. Aliquam id odio nisl, sed tristique nunc. Morbi
ante nisl, tincidunt eu feugiat nec, fermentum at eros. Praesent id
quam a ligula porttitor lacinia at eget nunc. In odio turpis,
consequat quis imperdiet adipiscing, pharetra nec augue. Donec
porta aliquam risus nec mattis. Curabitur posuere, neque eget
feugiat vehicula, leo lacus placerat arcu, ac ornare libero metus
eget sapien. Ut gravida hendrerit massa et fringilla.</P>
<P>Nam auctor mauris quis ipsum vulputate sed ullamcorper augue
eleifend. Phasellus vehicula sodales odio, ut fermentum eros
gravida id. Praesent volutpat dui non neque cursus non elementum
turpis luctus. Nullam molestie arcu sit amet lacus venenatis
cursus. Aliquam erat volutpat. In urna lorem, vulputate ut
tincidunt at, tincidunt at mi. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Etiam
rhoncus felis a nisi elementum non iaculis odio tempor. Cras a diam
eleifend nisl consectetur dignissim nec quis lacus. Nullam rutrum
fermentum mi sit amet adipiscing.</P>
<P>Pellentesque sagittis, quam quis laoreet congue, tellus purus
facilisis enim, non porttitor ipsum lacus et erat. Aenean id massa
eget nulla fringilla lacinia eu sed enim. Vestibulum in dui in urna
euismod facilisis a at erat. In luctus volutpat sem, eget interdum
lacus vehicula nec. Aliquam sagittis nulla et orci rutrum id
aliquam tortor molestie. Integer scelerisque volutpat magna vel
consectetur. Aenean a elit a urna pharetra adipiscing in quis est.
Integer tincidunt ullamcorper gravida. Suspendisse viverra
malesuada imperdiet. Ut nec nisi nec nunc condimentum auctor id
suscipit enim. Curabitur vitae viverra urna. Vestibulum consequat
mi eget justo porta adipiscing. Phasellus sed mi erat.</P>
</DIV>
</td></tr>
</table>
</td>
<br/>
<td width="150" valign="top">
<div align="center">
<!--<div style="background-image: url(metalframe.png); height: 200px; width: 100px; border: 1px solid black;">
Example of a DIV element with a background image:</div>-->
<img src="krasse.png" width="150"/>
<img src="ljudklipp.png" width="150"/>
<img src="kallor.png" width="150"/>
</div>
</td>
</tr>
</table>
 
 
 
 
 
 
 
 
</div>
</form>
 
 
 
 
 
 
 
 
<div align="center">
<footer class="common">
<br>
</br>
© The Solar Site 2012
<p>
</p>
<u1>
<a href="omsidan.html" title="Om sidan">Om sidan</a>
|
<a href="projektarbete.html" title="Projektarbete">Projektarbete</a>
|
<a href="http://www.nola.ornskoldsvik.se/" title="Nolaskolan">Nolaskolan</a>
|
<a href="links.html" title="Länkar">Länkar</a>
|
<a href="kontakt.html" title="Kontakt">Kontakt</a>
</u1>
</footer>
</div>
</body>
</html>