Page 1 of 1

First ever non-tabular layout

Posted: Fri Feb 03, 2006 6:48 pm
by Luke
I have created my first all css laid out design. I would like some critique.
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>
CSS:

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;
}

Posted: Fri Feb 03, 2006 6:54 pm
by John Cartwright
and the css is?