Code: Select all
<ul>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
</ul>
<div id="spantherest">
</div>Code: Select all
#spantherest{
height: 100%;
}Moderator: General Moderators
Code: Select all
<ul>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
<li>Bla</li>
</ul>
<div id="spantherest">
</div>Code: Select all
#spantherest{
height: 100%;
}Take a deep breathe, realize that no one is perfect, and acknowledge that someone else might be able to solve it.The Ninja Space Goat wrote:I am so close to calling it quits on this non-table design. If it is this smurfing hard to make a menu fill up the page, I am beginning to question the point!! I changed it to not be absolute position... I set up a containing div at 100%... NOTHING WORKS!!!
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="" />
</head>
<body onload="setHeight()">
<div id="contact_bar">
<div id="keep_width">
<a href="index.php"><img src="images/home.gif" title="Home" alt="Home" 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>
<div id="title"><a href="index.php"><img src="images/title2.gif" alt="Paradise Apartments" title="Paradise Apartments" border="0" /></a></div>
<div id="whole_page">
<div id="left_nav_bar">
<ul id="left_nav_menu">
<li><a href="property.php?property=shadowbrook" id="top"><p>Shadowbrook<br />Apartments</p></a></li>
<li><a href="property.php?property=camino"><p>Camino<br />Apartments</p></a></li>
<li><a href="property.php?property=nunnely"><p>Nunnely<br />Properties</p></a></li>
<li><a href="property.php?property=elliot"><p>Elliot<br />Court</p></a></li>
<li><a href="property.php?property=sawmill"><p>Sawmill<br />Villas</p></a></li>
<li id="below_menu"> <br/></li>
</ul>
</div>
<div id="content">
<div id="page_title"><h2><span>Paradise Apartments for Rent</span></h2></div>
<div id="image"><img class="main_image" src="images/temp.jpg" alt="Test Image" /></div>
<h3>Units presently available:</h3>
<div class="avail">
<div class="clear">
<img src="images/spacer.gif" width="100" height="100" alt="" class="avail_img" />
<a href="#">Some property</a>
</div>
<p><b>Rent:</b> $400/mo</p>
<p><b>Deposit:</b> $300</p>
</div>
<div class="avail">
<div class="clear">
<img src="images/spacer.gif" width="100" height="100" alt="" class="avail_img" />
<a href="#">Some property</a>
</div>
<p><b>Rent:</b> $400/mo</p>
<p><b>Deposit:</b> $300</p>
</div>
<div class="avail">
<div class="clear">
<img src="images/spacer.gif" width="100" height="100" alt="" class="avail_img" />
<a href="#">Some property</a>
</div>
<p><b>Rent:</b> $400/mo</p>
<p><b>Deposit:</b> $300</p>
</div>
<div class="avail">
<div class="clear">
<img src="images/spacer.gif" width="100" height="100" alt="" class="avail_img" />
<a href="#">Some property</a>
</div>
<p><b>Rent:</b> $400/mo</p>
<p><b>Deposit:</b> $300</p>
</div>
<div class="avail">
<div class="clear">
<img src="images/spacer.gif" width="100" height="100" alt="" class="avail_img" />
<a href="#">Some property</a>
</div>
<p><b>Rent:</b> $400/mo</p>
<p><b>Deposit:</b> $300</p>
</div>
<div class="avail">
<div class="clear">
<img src="images/spacer.gif" width="100" height="100" alt="" class="avail_img" />
<a href="#">Some property</a>
</div>
<p><b>Rent:</b> $400/mo</p>
<p><b>Deposit:</b> $300</p>
</div>
<div id="text">
<p><b>We specialize</b> in well-cared-for, quiet, one and two bedroom apartments in Paradise, CA. We accept one small pet at all locations. We have several non-smoking properties.</p>
<p><b>Our deposits</b> range from $300 to $600 with additional deposits for pets. We require frist month rent and deposit upon move-in.</p>
<p><b>Please contact the property manager(s)</b> listed on each property's respected page to inquire about our application process and to receive a copy of our uniform rental policies statement.</p>
<p><b>Lorem ipsum dolor sit amet,</b> 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 id="footer">
<p><a href="index.php">Home</a> | <a href="property.php?property=shadowbrook">Shadowbrook</a> | <a href="property.php?property=camino">Camino</a> | <a href="property.php?property=nunnely">Nunnely</a> | <a href="property.php?property=elliot">Elliot</a> | <a href="property.php?property=sawmill">Sawmill</a> | <a href="contactus.php">Contact Us</a></p>
</div>
</div>
</body>
</html>Code: Select all
html{
margin:0;
padding: 0;
height: 100%;
}
body{
font-family: arial, helvetica, sans-serif;
font-size: 10pt;
color: black;
margin: 0;
padding: 0;
height: 100%;
}
h1{
font-size: 20pt;
color: #630;
margin: 0;
padding: 0;
}
h2{
color: #630;
font-size: 14pt;
margin: 0;
padding: 0;
}
h3{
color: #630;
font-size: 12pt;
font-weight: bold;
margin: 0;
padding: 0;
}
h4{
font-size: 10pt;
font-weight: bold;
margin: 0;
padding: 0;
}
small{
font-size: 8pt;
}
a:link{
color: #630;
text-decoration: none;
}
a:active{
color: #630;
text-decoration: none;
}
a:visited{
color: #600;
text-decoration: none;
}
a:hover{
color: #630;
text-decoration: underline;
}
/* 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;
}
#keep_width{
float: right;
width: 600px;
}
#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;
padding-right: 30px;
float: left;
height: 100%;
}
#left_nav_menu{
margin: 0;
padding: 0;
height: 100%;
}
#left_nav_menu li{
list-style-type: none;
margin: 2px;
padding: 0;
}
#left_nav_menu p{
width: 97px;
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;
width: 97px;
height: 100%;
background-color: #696;
border: 2px solid #363;
}
/* Sublist information*/
#sublist{
margin: 0;
padding: 0;
}
#sublist li{
color: white;
text-decoration: none;
display: block;
width: 110px;
background-color: #696;
border: 2px solid #363;
margin: 2px 0;
padding-left: 5px;
}
#sublist li h1{
color: #330;
font-size: 10pt;
}
#sublist p{
color: #F3FFE3;
padding: 5px;
}
#page_title{
margin: 12px 0;
width: 600px;
text-align: left;
border-bottom: 2px solid #363;
}
#page_title span{
padding: 2px;
background-color: #696;
color: white;
border-top: 2px solid #363;
border-left: 2px solid #363;
border-right: 2px solid #363;
border-bottom: none;
}
#page_title p{
color: #630;
font-weight: bold;
border-top: 2px solid #363;
}
/* This is where content goes*/
#content{
width: 600px;
margin: 0;
padding: 0;
text-align: left;
margin-left: 140px;
}
#content p{
margin: 0;
padding: 0;
}
#text{
padding-top: 10px;
}
#text p{
margin-top: 10px;
}
.avail{
float: left;
}
.main_image{
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #696;
}
.avail_img{
border: 1px solid black;
margin: 5px;
float: left;
}
.clear{
clear: both;
}
#footer{
padding: 20px;
}
#footer p{
text-align: center;
}