resizeme
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Resize Me</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document created by Dieter Schneider 2006 for www.csstemplateheaven.com */
* {margin: 0;
padding: 0;}
body {
font-family: "trebuchet MS" Arial, Helvetica, sans-serif;
text-align:center;
background-color: #e6ebf3;
}
#container {
width: 57em;
margin: 1em auto;
background-color: #FFFFFF;
font-size: .8em;
border: 1px solid #75778E;
text-align:left;
padding: 1em;
}
#header {
margin-bottom: 1em;
border: 1px solid #EFEFEF;
height: 12em;
background-color: #FEFDFD;
background-image: url(resizeme-images/header_bg.jpg);
background-repeat: repeat-y;
background-position: right;
}
#content {
float: right;
width: 39.8em;
padding: 0.5em;
border: 1px solid #CCCCCC;
background-image: url(resizeme-images/content_bg.jpg);
background-repeat: no-repeat;
background-position: right top;
margin-top: 1em;
margin-bottom: 1em;
background-color: #FCFCFC;
}
#leftbox{
padding: 0.5em;
margin-right: 42em;
background-color: #fcfcfc;
background-repeat: no-repeat;
background-position: right top;
margin-top: 1em;
border: 1px solid #CCCCCC;
margin-bottom: 1em;
}
#footer {
clear: both;
padding: 0.5em;
background-color: #646675;
color: #FFFFFF;
text-align: center;
font-size: .9em;
border: 1px solid #CCCCCC;
margin-top: 1px;
}
p {
margin-top: 1em;
margin-bottom: 1em;
padding: .5em;
}
h3 {
font-size: 1em;
padding: .5em;
color: #7E0000;
border: 1px dotted #CCCCCC;
background-color: #F3F3F3;
}
h2 {
font-size: 1em;
padding: 0.5em;
margin-bottom: 1em;
color: #798196;
border: 1px solid #EEEEEE;
}
h1 {
font-size: 5.3em!important;
font-size: 3.3em;
padding: 0.5em;
margin-bottom: 1em;
color: #798196;
font-family: "Times New Roman", Times, serif;
font-style: italic;
}
a:link {color: #676D79;}
a:visited {color: #676D79}
a:hover {color: #820606}
a:active {color: #890000}
/********** Top navigation *************/
#navlist
{
height: 2.6em!important;
height: 2.7em;
padding: 1.7em 0em 0.3em 0.4em;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background-repeat: no-repeat;
background-color: #646675;
}
#navlist a, #navlist a:link, #navlist a:visited
{
border: 1px solid #CCCCCC;
padding: 1.2em;
padding-left: 0.5em;
padding-right: 0.5em;
color: #CCCCCC;
text-decoration: none;
}
#navlist a:hover, #navlist a:active, #navlist a:focus
{
border: 1px solid #FFFFFF;
padding: 1.1em;
padding-left: 0.5em;
padding-right: 0.5em;
text-decoration: none;
color: #FFFFFF;
}
#navlist li
{
padding-right: 1px;
display: inline;
font-size: 1em;
}
#navlist ul
{
margin: 0px;
padding: 0px;
}
#navlist #active a {
background-color: #CDCDB3;
color: #000000;
font-size: 1em;
font-weight: bold;
}
dl{
margin-bottom: 1.5em;
margin-left: 2em;
}
dt{
font-style: italic;
color: #7E0000;
font-weight: bold;
}
dd{
margin-bottom: .3em;
text-indent: .5em;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Resize me</h1>
</div>
<div>
<ul id="navlist">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Templates</a></li>
<li><a href="http://www.free-css.com/">Artikler</a></li>
<li><a href="http://www.free-css.com/">Forum</a></li>
<li><a href="http://www.free-css.com/">Galleriet</a></li>
<li><a href="http://www.free-css.com/">Kunstbutikk</a></li>
</ul>
</div>
<div id="content">
<h2>About this template </h2>
<p>This template was created by Dieter Schneider 2006. When you resize the text in your browser window the whole template will fit nice with the the text. If you use Firefox simply hold down Ctrl and push + or - to resize the text to see how it works. Tested in the latest versions of FF, IE and Opera with excelent results. It validates Xhtml 1.1. Please do not remove the link to www.csstemplateheaven.com in the footer unless you have a purchased version which you have bought there. It's only 7 dollars :) Please enjoy. </p>
<h2>This is also heading two </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer iaculis purus. Etiam lobortis dictum massa. Aliquam et ipsum ut mauris convallis aliquam. Ut ut elit sed arcu condimentum molestie. Sed orci. Pellentesque dignissim erat ac massa. Nullam varius varius felis. Aenean sit amet magna. Ut non diam. Quisque ac quam. Vestibulum nisl eros, laoreet id, fermentum eget, adipiscing sed, urna. Morbi suscipit. Duis convallis imperdiet sem. Phasellus aliquam, leo non auctor sodales, nisl lacus ullamcorper dolor, non volutpat justo orci nec est. Fusce nunc diam, tempus sed, aliquet eu, mattis et, neque. Duis luctus. Duis non sapien ullamcorper diam venenatis tristique. Etiam mattis. In nec lorem. Proin vel dolor.</p>
<dl>
<dt>May 27th </dt>
<dd>This is a definiton list, unfortunately is this list not used too often by webdevelopers. </dd>
<dt>May 27th </dt>
<dd>Lists are cool, and search engine spiders loves em too </dd>
<dt>May 27th </dt>
<dd>You can have your ingress here. </dd>
</dl>
<h2>This is heading two as well </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer iaculis purus. Etiam lobortis dictum massa. Aliquam et ipsum ut mauris convallis aliquam. Ut ut elit sed arcu condimentum molestie. Sed orci. Pellentesque dignissim erat ac massa. Nullam varius varius felis. Aenean sit amet magna. Ut non diam.. </p>
</div>
<div id="leftbox">
<h3>Heading three </h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean consectetuer iaculis purus.</p>
<h3>This is also heading three </h3>
<p>Etiam lobortis dictum massa. Aliquam et ipsum ut mauris convallis aliquam. Ut ut elit sed arcu condimentum molestie. Sed orci. Pellentesque dignissim erat ac massa.</p>
<h3>And this is heading three </h3>
<p>Ut ut elit sed arcu condimentum molestie. Sed orci. Pellentesque dignissim erat ac massa.</p>
</div>
<div id="footer">
<p>Created by Dieter Schneider 2006 | <a href="http://www.csstemplateheaven.com">www.csstemplateheaven.com</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category