HTML and CSS

multi color background question

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Jan 2009

Posts: 17

Reputation: tmoney7566 is an unknown quantity at this point

Solved Threads: 0

tmoney7566 tmoney7566 is offline

Offline

Newbie Poster

multi color background question

-1

Oct 4th, 2009

I am trying to write code that will list different automobiles in three different ordered lists with three different colored backgrounds ( using document style CSS). The lists are compact, midsize, and sport. I have my ordered list working correctly--except I can't get my colors to work. Can someone tell me what I am doing wrong

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>multi-colored background</title>
      <style type = "text/css">
 
 
      ol {list-style-type: upper-roman;}
      ol ol {list-style-type: upper-alpha;}
      ol ol ol {list-style-type: decimal:}
 
 
      p.compact{background-color: pink;}
      p.midsize {background-color:blue;}
      p.sport {background-color: red;}
 
 
 
 
   </style>
   </head>
 
 
	<h2>Automobile Types </h2>
	<ol>
 
	<p.class = "compact">
	  <li><h3>Compact</h3>
		<ol>
		<li><h4>Two Door</h4>
		<ol>
							               <li>Dodge Neon</li>
							               <li>Chevy Cobalt</li>
							               <li>Ford Focus</li>
		</ol>
		</li>
		<li><h4>Four Door</h4>
		<ol>
							               <li>Dodge Neon</li>
							               <li>Chevy Cobalt</li>
							                <li>Ford Focus</li>
	        </ol>
	    </li>
	   </ol>
	< /li><br />
	</p>
 
	<p class = "midsize">
	<li><h3>Mid Size</h3>
	<ol>
	<li><h4>Two Door</h4>
	<ol>
							<li>Chrysler Serbring</li>
							<li>Dodge Caliber</li>
							<li>Dodge Charger</li>
	</ol>
	</li>
	<li><h4>Four Door</h4>
	<ol>
							<li>Dodge Stratus</li>
							<li>Dodge Intrepid</li>
							<li>Chrysler Concord</li></p>
	</ol>
	</li>
	</ol>
	</li><br />
	</p>
 
	<p class = "sport">
	<li><h3>Sports</h3>
	<ol>
							<li><h4>Coupe</h4>
	<ol>
							<li>Dodge Viper</li>
							<li>Dodge Charger</li>
							<li>Chevy Camero</li>
	</ol>
	</li>
	<li><h4>Convertible</h4>
	<ol>
							<li>Dodge Viper</li>
							<li>Ford Mustang</li>
							<li>Chevy Corvette</li></p>
	</ol>
	</li>
	</ol>
	</li>
	</p>
 
 
   </body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>multi-colored background</title>
      <style type = "text/css">


      ol {list-style-type: upper-roman;}
      ol ol {list-style-type: upper-alpha;}
      ol ol ol {list-style-type: decimal:}


      p.compact{background-color: pink;}
      p.midsize {background-color:blue;}
      p.sport {background-color: red;}




   </style>
   </head>


	<h2>Automobile Types </h2>
	<ol>

	<p.class = "compact">
	  <li><h3>Compact</h3>
		<ol>
		<li><h4>Two Door</h4>
		<ol>
							               <li>Dodge Neon</li>
							               <li>Chevy Cobalt</li>
							               <li>Ford Focus</li>
		</ol>
		</li>
		<li><h4>Four Door</h4>
		<ol>
							               <li>Dodge Neon</li>
							               <li>Chevy Cobalt</li>
							                <li>Ford Focus</li>
	        </ol>
	    </li>
	   </ol>
	< /li><br />
	</p>

	<p class = "midsize">
	<li><h3>Mid Size</h3>
	<ol>
	<li><h4>Two Door</h4>
	<ol>
							<li>Chrysler Serbring</li>
							<li>Dodge Caliber</li>
							<li>Dodge Charger</li>
	</ol>
	</li>
	<li><h4>Four Door</h4>
	<ol>
							<li>Dodge Stratus</li>
							<li>Dodge Intrepid</li>
							<li>Chrysler Concord</li></p>
	</ol>
	</li>
	</ol>
	</li><br />
	</p>

	<p class = "sport">
	<li><h3>Sports</h3>
	<ol>
							<li><h4>Coupe</h4>
	<ol>
							<li>Dodge Viper</li>
							<li>Dodge Charger</li>
							<li>Chevy Camero</li>
	</ol>
	</li>
	<li><h4>Convertible</h4>
	<ol>
							<li>Dodge Viper</li>
							<li>Ford Mustang</li>
							<li>Chevy Corvette</li></p>
	</ol>
	</li>
	</ol>
	</li>
	</p>


   </body>
</html>

Last edited by tmoney7566; Oct 4th, 2009 at 12:18 am.

•

Join Date: Dec 2008

Posts: 63

Reputation: cfajohnson is an unknown quantity at this point

Solved Threads: 13

cfajohnson cfajohnson is offline

Offline

Junior Poster in Training

Re: multi color background question

Oct 4th, 2009

A <p> element cannot contain another block-level element. A <p> is implicitly ended when another block-level element is encountered. Add the colours to the <ol>s directly.

Last edited by cfajohnson; Oct 4th, 2009 at 1:31 am.

Chris F.A. Johnson
http://cfajohnson.com