Code: Select all
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Paradise Apartments</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<base href="http://localhost/paradiseapartments/" />
</head>
<body>
<div id="contact_bar">
<a href="index.php"><img src="images/home.gif" title="Contact Us" alt="Contact Us" border="0" /></a>
<a href="contactus.php"><img src="images/contactus.gif" title="Contact Us" alt="Contact Us" border="0" /></a>
<p>1234 Address Way - Paradise, CA 95969 - (530) 877-1234</p>
</div>
<div id="container">
<div id="left_nav_bar">
<img src="images/title.gif" alt="Paradise Apartments" id="Paradise Apartments" />
<ul id="left_nav_menu">
<li><a href="index.php" id="top"><p>Shadowbrook<br />Apartments</p></a></li>
<li><a href="index.php"><p>Camino<br />Apartments</p></a></li>
<li><a href="index.php"><p>Nunnely<br />Properties</p></a></li>
<li><a href="index.php"><p>Elliot<br />Court</p></a></li>
<li><a href="index.php"><p>Sawmill<br />Villas</p></a></li>
</ul>
<div id="below_menu">
<p>This is text</p>
<p>This is some more text</p>
</div>
</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla semper. Pellentesque dolor eros, imperdiet ac, semper non, lacinia a, lectus. Aliquam lacinia vehicula arcu. Vestibulum convallis, massa sed tempor imperdiet, ligula sapien tristique velit, mollis laoreet leo quam ac purus. Phasellus quam. Quisque at risus sit amet quam malesuada tincidunt. Phasellus faucibus libero ut orci. Aliquam mattis elit nec pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent pretium enim nec diam. Morbi vehicula tellus et diam. Donec pellentesque consectetuer sapien. Curabitur venenatis. Duis felis. Curabitur interdum ipsum id nulla. Suspendisse faucibus pellentesque mauris.</p>
</div>
</div>
</body>
</html>Code: Select all
html{
height: 100%;
}
body{
font-family: arial, helvetica, sans-serif;
font-size: 10pt;
color: black;
height: 100%;
margin: 0;
padding: 0;
}
#container{
height: 100%;
margin: 0;
padding: 0;
}
/* This is the bar on the top of the site */
#contact_bar{
font-weight: bold;
color: white;
background: transparent url(images/top_bar_bg.gif) repeat-x;
height: 26px;
vertical-align: middle;
text-align: right;
margin: 0;
padding: 0;
}
#contact_bar p{
margin: 0;
padding: 3px ;
}
#contact_bar img{
padding: 2px 0;
margin: 0 10px 0 10px;
float: right;
}
/* This is the menu on the left side of the screen */
#left_nav_bar{
width: 101px;
height: 100%;
float: left;
}
#left_nav_menu{
margin: 0;
padding: 0;
}
#left_nav_menu li{
list-style-type: none;
margin: 2px;
padding: 0;
}
#left_nav_menu p{
padding: 2px;
margin: 0;
}
#left_nav_menu a{
color: white;
font-weight: bold;
text-decoration: none;
display: block;
width: 97px;
height: 39px;
background-color: #696;
border: 2px solid #363;
text-align: left;
}
#left_nav_menu a:hover{
color: white;
font-weight: bold;
text-decoration: none;
display: block;
width: 97px;
height: 39px;
background-color: #7A7;
border: 2px solid #363;
text-align: left;
}
#left_nav_menu a#top{
color: white;
font-weight: bold;
text-decoration: none;
display: block;
width: 101px;
height: 41px;
border: none;
background: transparent url(images/main_menu_top1.gif) no-repeat top left;
text-align: left;
}
#left_nav_menu a#top:hover{
color: white;
font-weight: bold;
text-decoration: none;
display: block;
width: 101px;
height: 41px;
border: none;
background: transparent url(images/main_menu_top2.gif) no-repeat top left;
text-align: left;
}
#below_menu{
margin: 2px;
height: 100%;
width: 97px;
background-color: #696;
border: 2px solid #363;
}
/* This is where content goes*/
#content{
width: 700px;
margin: 0;
padding: 0;
text-align: left;
}
#content p{
border: 1px solid black;
margin-left: 20px;
z-index: 3;
}You can see the site here: http://www.sierratech.us/paradiseapartments