judgement
<!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="en">
<head>
<title>Judgement</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<style type='text/css'>
html
{
overflow: auto;
}
body
{
margin: 0;
padding: 0;
background: #2E2E2E url('judgement-images/background.jpg');
font-size: 70%;
font-family: verdana;
color: #DDD;
}
#centrecontainer
{
position: absolute;
top: 50%;
left: 0px;
width: 100%;
}
#outercontainer
{
margin-left: -450px;
position: absolute;
top: -250px;
left: 50%;
}
#container
{
width: 900px;
height: 500px;
background: #444;
}
#headercont
{
width: 870px;
height: 50px;
background: #9C0 url('judgement-images/headercont-background.jpg') repeat-x;
letter-spacing: -1px;
color: #FFF;
padding: 0 15px;
}
#headercont ul, #footercont ul
{
margin: 0;
padding: 18px 0 0 0;
list-style-type: none;
text-align: right;
}
#headercont ul li, #footercont ul li
{
display: inline;
margin: 0 0 0 10px;
}
#headercont ul li a, #footercont ul li a
{
color: #E8FF9F;
text-decoration: none;
}
#headercont ul li a:hover, #footercont ul li a:hover
{
color: #FFF;
text-decoration: none;
}
#maincont
{
width: 900px;
height: 325px;
background: #444;
}
#mainleft
{
float: left;
width: 420px;
height: 295px;
padding: 15px;
background: #333;
}
#mainleft h1
{
margin: 0;
padding: 0;
font-weight: normal;
font-family: arial;
font-size: 300%;
letter-spacing: -2px;
color: #AAA;
}
#mainleft h1 span
{
color: #9C0;
}
#mainright
{
float: left;
width: 420px;
height: 310px;
padding: 15px 15px 0 15px;
overflow: auto;
line-height: 150%;
}
#mainright p
{
margin: 0 0 15px 0;
padding: 0;
}
#mainright h1, h2, h3
{
margin: 0 0 10px 0;
padding: 0 0 5px 0;
font-size: 180%;
letter-spacing: -1px;
font-weight: normal;
font-family: arial, verdana;
border-bottom: 1px solid #777;
}
#menucont
{
width: 900px;
height: 75px;
background: #8FBF00;
border-bottom: 1px solid #A6DD00;
}
#menucont ul
{
margin: 0;
padding: 19px 0 0 22px;
list-style-type: none;
}
#menucont ul li
{
display: inline;
}
#menucont ul li a
{
float: left;
padding: 10px 15px;
margin: 0 10px 0 0;
background: #8FBF00;
color: #E7FF9B;
border: 2px solid #8FBF00;
text-decoration: none;
}
#menucont ul li a.active
{
color: #FFF;
text-decoration: none;
border: 2px solid #7EA800;
background: #8FBF00;
}
#menucont ul li a:hover
{
background: #83AE00;
color: #FFF;
text-decoration: none;
border: 2px solid #A6DD00;
}
#footercont
{
width: 870px;
height: 48px;
background: #9C0 url('judgement-images/headercont-background.jpg') repeat-x;
color: #E8FF9F;
border-top: 1px solid #7EA800;
letter-spacing: -1px;
padding: 0 15px;
}
</style>
</head>
<body>
<div id="centrecontainer">
<div id="outercontainer">
<div id="container">
<div id="headercont">
<ul>
<li><a href="http://www.free-css.com/">valid xhtml</a></li>
<li>|</li>
<li><a href="http://www.free-css.com/">valid css</a></li>
</ul>
</div>
<div id="maincont">
<div id="mainleft">
<h1>Lorem ipsum dolor sit amet, consectetuer <span>adipiscing elit</span>. Morbi at urna.</h1>
</div>
<div id="mainright">
<h1>lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi at urna. Curabitur et urna. In et massa a lorem
pharetra sodales. Pellentesque non pede. Phasellus tincidunt
pede pellentesque leo. Nunc congue, ligula sed auctor
pretium, odio libero accumsan sem, vitae accumsan lorem nisi
sed odio. Morbi at purus. Cras auctor mollis enim.
Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Sed euismod mollis mi. Ut
tempor leo id eros. Integer dapibus rutrum eros. Sed feugiat
mollis erat. Integer non lorem. Phasellus nibh ante,
imperdiet non, facilisis vel, ultricies in, nulla. Praesent
sapien dolor, tempor in, eleifend aliquet, tincidunt at,
nisl. Cras nec sem sed est condimentum placerat.</p>
<h2>maecenas malesuada.</h2>
<p>Maecenas malesuada. Phasellus ante est, convallis id,
condimentum a, interdum non, augue. Ut dapibus leo. Donec id
nunc. Nullam sit amet velit. Aenean ultricies est eu sapien.
Suspendisse ac sem et pede aliquam egestas. Aenean odio.
Suspendisse potenti. Duis eget leo lobortis felis accumsan
facilisis. Ut pharetra lobortis magna.</p>
<h3>mauris arcu lacus.</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque condimentum, est et facilisis luctus, sem nisl
scelerisque felis, eget bibendum erat tortor sed tortor.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas. Maecenas nec quam. Cum
sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Mauris arcu lacus, fermentum ac,
porttitor sed, suscipit non, eros. Nullam lectus.
Pellentesque et diam. Duis sit amet nisi. Mauris
pellentesque metus in felis. Vivamus eleifend aliquet urna.
Vivamus non pede. Nulla nec augue ac metus tincidunt
vehicula. Curabitur quis sapien sit amet ligula imperdiet
pretium. Suspendisse neque lorem, hendrerit eu, ultricies
ac, luctus vel, nibh. Nulla urna. Phasellus risus.</p>
</div>
</div>
<div id="menucont">
<ul>
<li><a class="active" href="http://www.free-css.com/">home</a></li>
<li><a href="http://www.free-css.com/">portfolio</a></li>
<li><a href="http://www.free-css.com/">services</a></li>
<li><a href="http://www.free-css.com/">free xhtml templates</a></li>
<li><a href="http://www.free-css.com/">contact us</a></li>
</ul>
</div>
<div id="footercont">
<ul>
<!-- please leave this link in place - thank you -->
<li>design by <a title="derby uk web design" href="http://www.tristarwebdesign.co.uk"><b>tristar web design</b></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category