<span> necessary for validation, but only <p> wi

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

<span> necessary for validation, but only <p> wi

Post by Luke »

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:

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">&nbsp;<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>
CSS:

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;
}
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

<p> are block level elements. You have them inside an inline element, which is not legal.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

I realize this.... but this is the only way I could make it look how I wanted... span will not space correctly for some reason. Do you know why? This is the only thing keeping the site from being valid.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

you can do all that junk to either the list items or anchors.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Post by Luke »

thanks :) validates now!
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Feyd is correct that leaving out the p and styling the li and a elements can be the solution. Otherwise if you need the p element you should reverse the order of a and p. This:

Code: Select all

<div id="left_nav_bar">
     <ul id="left_nav_menu">
      <li><p><a href="property.php?property=shadowbrook" id="top">Shadowbrook<br />Apartments</a></p></li>
      <li><p><a href="property.php?property=camino">Camino<br />Apartments</a></p></li>
      <li><p><a href="property.php?property=nunnely">Nunnely<br />Properties</a></p></li>
      <li><p><a href="property.php?property=elliot">Elliot<br />Court</a></p></li>
      <li><p><a href="property.php?property=sawmill">Sawmill<br />Villas</a></p></li>
      <li id="below_menu">&nbsp;<br/></li>
     </ul>
    </div>
validates as well. (might be handy in case you want multiple p elements inside each li for example)
Post Reply