summerholiday
?<!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" xml:lang="en" lang="en">
<head>
<title>Summer Holiday</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*******************************************************
TITLE: Summer Holiday v1.0
DATE: 20060424
AUTHOR: rayk web design - http://www.raykdesign.net
*******************************************************/
body {
margin:.5em;
padding:0;
height:100%;
background-color:#ffffff;
background-image:url(summerholiday-img/body-bg.jpg);
background-position:top;
background-repeat:repeat-x;
color:#000000;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
}
a {
color:#547699;
text-decoration:underline;
}
a:hover {
color:#999999;
text-decoration:none;
}
img {
border:none;
}
img.left {
float:left;
margin:0 .5em 0 .2em;
padding:.2em;
border:1px solid #eeeeee;
}
img.right {
float:right;
margin:0 .2em 0 .5em;
padding:.2em;
border:1px solid #eeeeee;
}
blockquote.warning {
margin:1em;
padding:.5em;
padding-left:5em;
background-color:#ffffff;
background-image:url(summerholiday-img/blockquote-bg-warning.jpg);
background-position:left top;
background-repeat:no-repeat;
border-top:1px solid #eeeeee;
}
blockquote.question {
margin:1em;
padding:.5em;
padding-left:5em;
background-color:#ffffff;
background-image:url(summerholiday-img/blockquote-bg-question.jpg);
background-position:left top;
background-repeat:no-repeat;
border-top:1px solid #eeeeee;
}
blockquote p {
font-size:.8em;
margin:.2em;
color:#616161;
}
#centerColumn {
margin:0 auto;
padding:1em;
width:38em;
text-align:left;
vertical-align: middle;
background-color:#ffffff;
border:1px solid #BBD1E2;
}
#centerColumn h2 {
margin:0 0 -.5em 0;
padding:.75em 0 0 0;
font-size:1em;
letter-spacing:.1em;
color:#DA8619;
}
#header {
margin:0 0 0 0;
padding:0 0 0 0;
height:10em;
background-color:#ffffff;
background-image:url(summerholiday-img/header-bg.jpg);
background-position:bottom right;
background-repeat:no-repeat;
border:1px solid #EBCD48;
}
#header h1 {
margin:0 0 -.6em 0;
padding:1em 0 0 1em;
font-size:1.5em;
letter-spacing:.1em;
color:#ffffff;
}
#header h2 {
margin:0 0 0 0;
padding:1em 0 0 1.75em;
font-size:.9em;
font-weight:300;
letter-spacing:.1em;
color:#000000;
}
#navtabs {
margin:0 0 0 0;
float:left;
width:100%;
height:6em;
font-size:93%;
line-height:normal;
}
#navtabs ul {
margin:0;
padding:4.1em 0 0 .2em;
list-style:none;
}
#navtabs li {
display:inline;
margin:0;
padding:0;
}
#navtabs a {
float:left;
background-image:url(summerholiday-img/tableftB.gif);
background-position:left top;
background-repeat:no-repeat;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#navtabs a span {
float:left;
display:block;
background-image:url(summerholiday-img/tabrightB.gif);
background-position:right top;
background-repeat:no-repeat;
padding:5px 15px 4px 6px;
color:#9E8100;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#navtabs a span {float:none;}
/* End IE5-Mac hack */
#navtabs a:hover span {
color:#000;
}
#navtabs a:hover {
background-position:0% -42px;
}
#navtabs a:hover span {
background-position:100% -42px;
color:#000000;
}
#fauxRightColumn {
position:relative;
float:right;
margin:.5em 0 0 .5em;
padding:0 .7em .7em .7em;
width:11em;
font-size:.9em;
background-color:#ffffff;
background-image:url(summerholiday-img/fauxrightcolumn-bg.jpg);
background-position:top;
background-repeat:repeat-x;
border-bottom:1px solid #eeeeee;
}
#fauxRightColumn h2 {
margin-bottom:-1em;
font-size:.9em;
color:#DA8619;
}
#fauxRightColumn a {
font-size:.9em;
text-decoration:none;
color:#559449;
}
#fauxRightColumn a:hover{
text-decoration:none;
color:#cccccc;
}
#footer {
position:relative;
bottom:0;
margin:5em 0 0 0;
padding:0;
height:4em;
line-height:4em;
text-align:center;
font-size:.7em;
background-color:#ffffff;
border-top:1px solid #eeeeee;
}
</style>
</head>
<body>
<div id="centerColumn">
<div id="header">
<h1>summer holiday</h1>
<h2>getting sand and sunburns in odd places</h2>
<div id="navtabs">
<ul>
<li><a href="http://www.free-css.com/"><span>Home</span></a></li>
<li><a href="http://www.free-css.com/"><span>About</span></a></li>
<li><a href="http://www.free-css.com/"><span>Gallery</span></a></li>
<li><a href="http://www.free-css.com/"><span>Contact</span></a></li>
<li><a href="http://www.free-css.com/"><span>Link 5</span></a></li>
<li><a href="http://www.free-css.com/"><span>Link 6</span></a></li>
<li><a href="http://www.free-css.com/"><span>Link 7</span></a></li>
</ul>
</div>
<!--//end #navtabs//-->
</div>
<!--//end #headern//-->
<div id="fauxRightColumn">
<h2>Links & Resources</h2>
<p>Be sure to visit these sites fof more open source goodies:</p>
<p><a href="http://www.free-css.com/">›› Open Web Desgin</a><br />
<a href="http://www.free-css.com/">>›› OSWD</a><br />
<a href="http://www.free-css.com/">›› Bulletproof Links</a><br />
<a href="http://www.free-css.com/">›› CSS Tinderbox</a></p>
</div>
<!--//end #fauxRightColumn//-->
<h2>Just In Time For Summer!</h2>
<p>This sporty little fixed-width, one-column design was built on a CSS Tinderbox
template. It was tested on a Windows machine in Firefox 1.5, Internet Explorer
6.0, Netscape 8.1 and Opera 7.54 and should hold its own in a text browser.</p>
<p>It's using valid XHTML 1.0 (strict) and CSS with a WCAG-A rating.</p>
<p>This design is released under the <a href="http://creativecommons.org/licenses/by/1.0/">creative
commons license</a>, so do what you want with it and have fun!</p>
<h2>Header 2</h2>
<p><a href="http://www.free-css.com/">Link Item</a></p>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item
<ul>
<li>List Item</li>
<li>List Item</li>
</ul>
</li>
</ul>
<blockquote class="warning">
<p><strong>Like School In Summer...</strong><br />
No Class. This is my obligitory rant about how Internet Explorer is the
worst browser you can ever use. Please use <a href="http://www.free-css.com/">Firefox</a>!</p>
</blockquote>
<blockquote class="question">
<p><strong>What The Hell Is That?</strong><br />
If you have any questions or comments about this design, feel free to contact
me through <a href="http://www.free-css.com/">OWD</a> or
my <a href="http://www.free-css.com/">web site</a>.</p>
</blockquote>
<div id="footer">
<p>Copyright, 2006 <a href="http://www.free-css.com/">Your Name</a> | <a href="http://validator.w3.org/">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/validator-uri.html">CSS</a> | <a href="http://www.w3.org/TR/WCAG10/">WCAG</a> | <a href="http://www.csstinderbox.com">The
CSS Tinderbox</a></p>
</div>
<!--//end #footer//-->
</div>
<!--//end #centerColumn//-->
</body>
</html>
Related examples in the same category