My teddybear~

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum mattis elit, ultrices commodo dolor tincidunt eu. Curabitur a ligula mauris, id vehicula erat. Mauris rutrum mattis massa quis accumsan. Donec vestibulum porta mi, vitae porttitor sem porttitor volutpat. Ut a dolor quis velit convallis venenatis in sit amet mauris. Fusce turpis quam, posuere ut elementum ut, congue et tortor. Suspendisse non mauris nec quam sagittis fermentum. Duis vulputate hendrerit risus vel condimentum. Cras nec orci sem.

Aenean ut sapien quis odio blandit sagittis sed sed quam. Aliquam gravida turpis sed risus rutrum aliquam. Etiam sollicitudin tellus in lorem gravida facilisis. Cras feugiat lacus suscipit nisl molestie volutpat molestie enim varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque mauris id elit dapibus sed facilisis magna bibendum. Ut sit amet mauris nibh, sit amet volutpat lorem. Duis risus nibh, placerat nec pellentesque eget, ornare eu nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris nisi sem, faucibus vel cursus ac, placerat ac turpis. Sed a ante et urna semper ullamcorper. Nullam ac orci nec erat porttitor tempor sit amet sed tellus. Donec at lacus velit. Fusce augue lacus, dapibus quis interdum vitae.

Asennus

IMG:

nalle.jpg

CSS:

Name your CSS-folder teddy.css.

body {  
	background: url('nalle.jpg') no-repeat 0 0 #8DC07D;  
	font-family: Arial, Sans-serif;  
	font-size: 13px;  
	color: #163339;  	
	text-align: right;
}

a:link, a:visited {  
	color: #4E826C;  
	text-decoration: none;  
	letter-spacing: 2px;
}

a:hover {color: #FFFFFF;}

h1 {  
	font-family: 'Book Antiqua', Serif;  
	font-size: 20px;  
	letter-spacing: 2px;  
	color: #163339;  
	text-align: center;  
	text-transform: uppercase;
}

h2 {  
	font-family: 'Book Antiqua', Serif;  
	font-size: 15px;  
	font-weight: normal;  
	text-align: center;  
	border-top: 1px solid #71BAA7;  
	padding: top: 3px;
}

#tekstit {  
	position: absolute;  
	top: 80px;  
	left: 415px;  
	width: 380px;
	padding-bottom: 50px;
}

#linkit {  
	position: absolute;  
	top: 420px;  
	left: 210px;  
	width: 100px;  
	text-align: left;
}

#linkit a:link, a:visited {color: #FFFFFF;}
#linkit a:hover {  color: #4E826C;}

input, select, textarea {
	border: 1px solid #FFF;
	background: transparent;
	font-family: Tahoma, Sans-serif;
	font-size: 12px;
	color: #4E826C;
	padding: 10px;
}

input:focus, select:focus, textarea:focus {
	color: #163339;
}

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>Teddybear</title>
	<link href="teddy.css" type="text/css" rel="stylesheet" />

</head>
<body>

<div id="linkit">
<p>
	<a href="oso">» Linkki </a> <br />
	<a href="oso">» Linkki </a> <br />
	<a href="oso">» Linkki </a> <br />
	<a href="oso">» Linkki </a> <br />
	<a href="oso">» Linkki </a> 
</p>

<p>
	<a href="http://www.flickr.com/photos/macieklew/">©Macieklew</a> <br />
	<a href="http://swimchick.net/">©Swimchick</a> <br />
	<a href="http://tierran.net/dewymorning">©Namuless</a> 
</p>
</div>

<div id="tekstit">
	<h1> My teddybear~ </h1>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum mattis elit, ultrices commodo dolor tincidunt eu. Curabitur a ligula mauris, id vehicula erat. Mauris rutrum mattis massa quis accumsan. Donec vestibulum porta mi, vitae porttitor sem porttitor volutpat. Ut a dolor quis velit convallis venenatis in sit amet mauris. Fusce turpis quam, posuere ut elementum ut, congue et tortor. Suspendisse non mauris nec quam sagittis fermentum. Duis vulputate hendrerit risus vel condimentum. Cras nec orci sem.
</p>

<p>
Aenean ut sapien quis odio blandit sagittis sed sed quam. Aliquam gravida turpis sed risus rutrum aliquam. Etiam sollicitudin tellus in lorem gravida facilisis. Cras feugiat lacus suscipit nisl molestie volutpat molestie enim varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque mauris id elit dapibus sed facilisis magna bibendum. Ut sit amet mauris nibh, sit amet volutpat lorem. Duis risus nibh, placerat nec pellentesque eget, ornare eu nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris nisi sem, faucibus vel cursus ac, placerat ac turpis. Sed a ante et urna semper ullamcorper. Nullam ac orci nec erat porttitor tempor sit amet sed tellus. Donec at lacus velit. Fusce augue lacus, dapibus quis interdum vitae.
</p>

<h2>Lorem Ipsum</h2>

</div>

</body>
</html>