pills
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pills</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-color: #CCCCCC;
background-image: url('pills-images/pillscolumnbackground.jpg');
background-position: center;
background-repeat: repeat-y;
color: #FFFFFF;
font-family:"Gill Sans", sans-serif;
font-size: 12px;
}
h2 {
color: #FFFFFF;
font-size: 16px;
text-align: right;
}
#shell {
width: 756px;
margin-left: auto;
margin-right: auto;
}
#topimage {
width: 756px;
height: 240px;
background-image: url('pills-images/pills.jpg');
margin-top: -9px;
}
#navigation {
margin-left: 91px;
margin-right: 536px;
width: 132px;
position: absolute;
margin-top: -80px;
text-align: center;
}
hr {
color:#FFFFFF;
border:thin dashed;
height: 1px;
}
#content {
margin-left: 321px;
margin-right: 99px;
width: 338px;
margin-top: -45px;
}
a:link {
color: #FFCCFF;
text-decoration: none;
}
a:visited {
color: #CC99CC;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="shell">
<div id="topimage"></div>
<div id="navigation">
» Navigation «
<hr />
<a href="index.html">A link</a><br />
<a href="index.html">Another link</a><br />
<a href="index.html">Further</a><br />
<a href="index.html">Linkage</a><br />
<br />
<br />
» Credits «
<hr />
<a href="http://walkintherain.com">Layout</a><br />
<a href="http://sxc.hu/browse.phtml?f=view&id=321829">Photo</a><br />
<br />
<br />
» Validity «
<hr />
<a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0</a><br />
<a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a><br />
</div>
<div id="content">
<h2>Note</h2>
If you are using this design for commercial purposes, the photographer must be contacted and credited, as per the instructions on <a href="http://sxc.hu/browse.phtml?f=view&id=321829">this page</a>.<br />
<br />
<h2>*insert title here*</h2>
Convallis commy non con endio, nim senisl eugiat autat niamcon ero consectetuer nulluptatie nos. Ex loreetue numsan nibh feuguerit, mus praesed nullam iril eumsandre velisit quis minit magnis. Consequat et ros faccumsan id niscidu minciliquat ed; vullandigna obor inciduipit tio. Praessequate iuscing vel autat augiam miniat praesed, augiam sequam aliquip euguer ultricies feugiam. Duis accumsan id, utpat praesent quisi enim od semper, velent erat alisi. <br />
<br />
</div>
</div>
</body>
</html>
Related examples in the same category