http://sierratech.us/paradiseapartments
I had to lay the menu out like this which makes it not validate because if I do it any other way it screws everything up!! Why??
Code: Select all
<div id="left_nav_bar">
<ul id="left_nav_menu">
<li><a href="shadowbrook.php" id="top"><p>Shadowbrook<br />Apartments</p></a></li>
<li><a href="camino.php"><p>Camino<br />Apartments</p></a></li>
<li><a href="nunnely.php"><p>Nunnely<br />Properties</p></a></li>
<li><a href="elliot.php"><p>Elliot<br />Court</p></a></li>
<li><a href="sawmill.php"><p>Sawmill<br />Villas</p></a></li>
</ul>
<div id="below_menu"></div>
</div>Code: Select all
/* This is the menu on the left side of the screen */
#left_nav_bar{
position: absolute;
top: 80px;
left: 0;
width: 101px;
height: 100%;
padding-right: 30px;
}
#left_nav_menu{
margin: 0;
padding: 0;
}
#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;
height: 100%;
width: 97px;
background-color: #696;
border: 2px solid #363;
}