PattyMcFatPat03
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type='text/css'>
/*************************************************************
* page layout *
*************************************************************/
body {
font-family:Arial, Helvetica, sans-serif;
color:#fff;
background:#000;
font-size:small;
}
a{
text-decoration:none;
color:#00cccc;
}
a:hover{
text-decoration:none;
color:#fff;
}
#wrap{
width:800px;
background:transparent;
margin:0 auto;
}
/***header***/
#header {
width:800px;
height:100px;
background: url('PattyMcFatPat03-images/header.gif') no-repeat;
}
/***left***/
#leftcol {
float:left;
width:150px;
text-align:left;
}
/***content***/
#topimg {
background:url(PattyMcFatPat03-images/content.gif);
}
#bottomimg {
background:url(PattyMcFatPat03-images/contentbottom.gif);
height:43px;
}
#container {
float:right;
background:#282828;
text-align:left;
width:645px;
border:#fff;
margin-top:5px;
}
#container p{
margin:5px 5px 5px 5px;
}
.box1 {
margin-left:50px;
background:url(PattyMcFatPat03-images/announcement.gif);
text-align:left;
width:550px;
height:150px;
margin-top:5px;
}
.box2 {
margin-left:50px;
background:url(PattyMcFatPat03-images/announcement2.gif);
text-align:left;
width:550px;
height:150px;
margin-top:5px;
}
#footer {
width:800px;
height:100px;
background: url('PattyMcFatPat03-images/footer.gif') no-repeat;
text-align: center;
}
/*************************************************************
* menu *
*************************************************************/
#menutop {
background:url(PattyMcFatPat03-images/menutop.gif) no-repeat;
height:45px;
margin: 5px 0 0 0;
}
#menubottom {
background:url(PattyMcFatPat03-images/menubottom.gif) no-repeat;
height:45px;
}
#navcontainer {
width:150px;
background:#212121;
}
#navcontainer ul {
margin: 0 0 0 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
color:#fff;
}
#navcontainer a {
display: block;
width: 150px;
text-align:center;
font-weight:bold;
}
#navcontainer a:link, #navlist a:visited {
color:#fff;
text-decoration: none;
}
#navcontainer a:hover {
background-color: #fff;
color: #000;
}
/*************************************************************
* headers *
*************************************************************/
h1 {
color:#000;
text-align:right;
font-size:2em;
padding:30px 10px 0 0;
}
h2 {
margin: 0 50px auto;
color:#fff;
text-align:left;
height:43px;
}
h3 {
height:45px;
padding: 0;
margin: 0 50px auto;
color:#fff;
text-align:left;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>PattyMcFatPat03</title>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>PattyMcFatPat 03</h1>
</div>
<div id="leftcol">
<div id="menutop"></div>
<div id="navcontainer">
<ul id="navlist" title="menu">
<li><a href="#">page 1</a></li>
<li><a href="#">page 2</a></li>
<li><a href="#">page 3</a></li>
<li><a href="#">page 4</a></li>
</ul>
</div><!-- End of "navcontainer" div -->
<div id="menubottom"></div>
</div>
<div id="container">
<div id="topimg">
<h2>Page 1 </h2>
</div>
<p>Checkout this page. This could be used for any sort of "hip" site...probably not a professional (corporate) site, but hey, it's up to you. Take this site and work with it. I'd also really like your comments, as this is my first open source site. Visit <a href="http://developdaly.com">Develop Daly</a> and check me out. </p>
<div class="box2">
<h3>Announcement</h3>
<p>This is the accouncement box to make your announcements...duh.</p>
</div>
<p>This is my content and it could be your content if you download this! Wouldn't that be great?! This is my content and it could be your content if you download this! Wouldn't that be great?!</p>
<div class="box2">
<h3>Announcement</h3>
<p>This is the accouncement box to make your announcements...duh. This is the accouncement box to make your announcements...duh. This is the accouncement box to make your announcements...duh. This is the accouncement box to make your announcements...duh.</p>
</div>
<div id="bottomimg"></div>
</div>
</div>
</body>
</html>
Related examples in the same category