<span> necessary for validation, but only <p> wi
Posted: Fri Feb 10, 2006 5:33 pm
I am wondering why when I use span instead of p, I cannot get margin or padding to work where my page links in the list called "left_nav_menu". The page won't validate how it is currently, but it looks stupid otherwise.
HTML:
CSS:
HTML:
Code: Select all
<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>Paradise, CA 95969 - (530) 877-8237</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">
<a href="../paradiseapartments/property.php?property=nunnely"><img src="http://localhost/paradiseapartments/images/nunnely_new_01_sm.jpg" width="100" height="100" alt="Nunnely Properties" class="avail_img" border="0" /></a>
<a href="../paradiseapartments/property.php?property=nunnely">Nunnely Properties</a>
</div>
<p><b>Description:</b> This is a description for this property. It can only be 100 characters in length.</p>
</div>
<div class="avail">
<div class="clear">
<a href="../paradiseapartments/property.php?property=elliot"><img src="http://localhost/paradiseapartments/images/elliot_1b_01_sm.jpg" width="100" height="100" alt="Elliot Court" class="avail_img" border="0" /></a>
<a href="../paradiseapartments/property.php?property=elliot">Elliot Court</a>
</div>
<p><b>Description:</b> This is another description for this property. This must be kept pretty short or it will be cut off.</p>
</div>
<div class="avail">
<div class="clear">
<a href="../paradiseapartments/property.php?property=sawmill"><img src="http://localhost/paradiseapartments/images/sawmill_1b_01_sm.jpg" width="100" height="100" alt="Sawmill Villas" class="avail_img" border="0" /></a>
<a href="../paradiseapartments/property.php?property=sawmill">Sawmill Villas</a>
</div>
<p><b>Description:</b> Sawmill properties.</p>
</div>
<div id="text" class="clear">
<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>
</div>
<div align="center" class="clear">
<img src="images/equal_housing_sm.gif" alt="Equal opportunity housing" />
<p class="note">We do business according to the Federal Fair Housing Act</p>
</div>
<div id="footer" class="clear">
<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>Code: Select all
body{
font-family: arial, helvetica, sans-serif;
font-size: 10pt;
color: black;
margin: 0;
padding: 0;
}
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;
}
#whole_page{
background: white url(images/left_bg.gif) repeat-y;
background-position: 2px 2px;
height: 100%;
}
/* This is the menu on the left side of the screen */
#left_nav_bar{
background-color: white;
height: 100%;
width: 101px;
padding-right: 30px;
float: left;
}
#left_nav_menu{
background-color: white;
margin: 0;
padding: 0;
height: 100%;
}
#left_nav_menu li{
list-style-type: none;
margin: 0;
padding: 2px;
}
#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{
position: relative;
left: 2px;
top: 2px;
width: 93px;
background-color: #696;
border-top: 2px solid #363;
border-left: 2px solid #363;
border-right: 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: #000;
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;
padding: 0;
margin: 0;
text-align: left;
margin-left: 140px;
}
#content p{
margin-top: 3px;
padding: 0;
}
#text{
padding: 10px;
}
#text p{
padding-top: 10px;
}
.avail{
width: 300px;
float: left;
}
.avail p{
margin: 0;
padding: 0;
}
.avail a:link{
font-weight: bold;
}
.avail a:visited{
font-weight: bold;
}
.avail a:active{
font-weight: bold;
}
.avail a:hover{
font-weight: bold;
}
.main_image{
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #630;
}
.avail_img{
border: 1px solid #630;
margin: 5px;
float: left;
}
.clear{
clear: both;
}
#footer{
}
#footer p{
text-align: center;
}
.note{
font-size: 8pt;
font-weight: bold;
}
.alist{
margin-top: 5px;
}
.alist li{
list-style-type: none;
background: transparent url(images/leaf2.gif) no-repeat;
background-position: 0 50%;
padding-left: 20px;
margin: 3px;
}
.apartment{
padding: 5px;
margin: 20px 15px;
}
.apartment p{
position: relative;
left: 5px;
}
.image_box{
padding: 10px;
}
.image_box img{
border: 1px solid #630;
}
#contact_box{
padding: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 50px;
width: 300px;
height: 100%;
float: left;
border-right: 2px solid #363;
}
#contact_box div{
background-color: #EAF9E3;
margin: 7px 0 2px 0;
border: 1px solid #363;
height: 30px;
}
#contact_box div p{
margin: 0;
padding: 5px;
float: left;
width: 130px;
font-weight: bold;
}
#contact_box div.long{
background-color: #EAF9E3;
margin: 7px 0 2px 0;
border: 1px solid #363;
height: 140px;
}
._text{
border: 1px solid #363;
}
.long p{
clear: both;
float: none;
width: 400px;
}
.red_text{
border: 1px solid #900;
}
.orange_text{
border: 1px solid #F90;
}