0

ok, Two days up till 2am trying to figure this out. For some reson my Code for a nested list using a table layout will not show the Roman numerals I,II,II they are only showin I. Please Help.. The top half of the page is a table based layout, the bottom is a DIV based layout. I also need it to validat in Strict, xhtml, And so far i have about 36 errors. Any help would be greatly apprecited. Ihave also attachted the .css. I cannot have any inline stles.

<?xml version="1.0" encoding="UTF-8" ?>	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<!-- 
   Programming the World Wide Web
   Week Number 2
   Cars Table V/s Div

   Divs V/S Table
   Author: Ellen Brady
   Date:   September 15, 2010

   Filename:         cars.html
   Supporting files: format.css, final.jpg
-->
<title>Cool Cars</title>

<link href= "./styles/format.css" rel= "stylesheet" type= "text/css" />

</head>

<body>

<h1>Web Exercise 1 - Part I</h1>
<h2>Using external validated CSS and validated XHTML compliant code to create a nested ordered list, with table and inserted image</h2>

<table class="cars">

<tr>

   <td>

<span id="orange">
 <ol>  

           	  <li>Compact
<ol>		
		  <li>Two Door</li>
<ol>
              		<li>Honda Civic </li>
   			<li>Toyota RAV 4 </li>
   			<li>Volvo C30 </li>
	</ol>
	</li>

                  <li>Four Door</li>
	<ol> 
             		<li>Mazda 3</li>
			<li>Inifiniti GT-R</li>
			<li>Chevrolet Cruze</li>

	</ol>
	</li>
	</ol>
	</li>		
</span>

<span id="green">
<ol>
		<li>Midsize</li>

		   <li>Two Door</li>
<ol>
			<li>Nissan Altima </li>
			<li>Mercury Milan </li>
			<li>Buick LaCrosse </li>
</ol>
</li>
		<li>Four Door</li> 
	<ol>
			<li>Chrysler Sebring </li>
			<li>BMW 3</li>
			<li>Toyota Camry</li>
	</ol>
	</li>
	</ol>
	</li>
	
</span>	

<span id="red">  

    		<li>Sports</li> 
<ol> 
        	   <li>Coupe</li> 
<ol> 

              		<li>Hyundai Genesis</li>   
                 	<li>Peugeot RCZ </li> 
             		<li>Acura ZDX </li>  
</ol> 
</li> 
    		 <li>Convertible</li>  

<ol>

       			<li>Chevrolet Corvette</li>   
         		<li>Porsche Boxster </li>  
         		<li>Jaguar XKR </li> 
</ol>
</li>
</ol>
</li>

</span>

</td>
<td><p><img src="./images/final.jpg" alt="Cool Car" /></p>
</td>

</tr>
</table>
<p>
<hr />
</p>

<h1>Web Exercise 1 - Part 2</h1>
<h2>Using external validated CSS and validated XHTML compliant code to create a nested ordered list, with Divs and inserted image</h2>

<div id="outterDiv">
    <div id="left">
        <ol type ="I">
            <span id="orange">
                <li>Compact</li>
                <ol type="A">
                    <li>Two Door</li>
                    <ol type="1">
                        <li>Honda Civic </li>
                        <li>Toyota RAV 4 </li>
                        <li>Volvo C30 </li>
                    </ol>
                    <li>Four Door</li>
                    <ol type="1">
                        <li>Mazda 3 </li>
                        <li>Inifiniti GT-R </li>
                        <li>Chevrolet Cruze </li>
                    </ol>
                </ol>
            </span>

            <span id="green">
                <li>Midsize</li>
                <ol type="A">
                    <li>Two Door</li>
                    <ol type ="1">
                        <li>Nissan Altima </li>
                        <li>Mercury Milan </li>
                        <li>Buick LaCrosse </li>
                    </ol>
                    <li>Four Door</li>
                    <ol type="1">
                        <li>Chrysler Sebring </li>
                        <li>BMW 3 </li>
                        <li>Toyota Camry </li>
                    </ol>
                </ol>
            </span>

            <span id="red">
            <li>Sports</li>
                <ol type="A">
                    <li>Coupe </li>
                    <ol type="1">
                        <li>Hyundai Genesis</li>
                        <li>Peugeot RCZ </li>
                        <li>Acura ZDX </li>
                    </ol>
                    <li>Convertible </li>
                    <ol type="1">
                        <li>Chevrolet Corvette</li>
                        <li>Porsche Boxster </li>
                        <li>Jaguar XKR </li>
                    </ol>
                </ol>
            </span>
        </ol>
    </div>

    <div id="right">
        <p><img src="./images/final.jpg" alt="Cool Car" width="500" length="700" /></p>
    </div>
</div>
<p>
    <a href= "../index.html">Home</a>
</p>
</body>
</html> THE FOLLOWING IS THE EXTERANL STYLE SHEET
h1	{text-align: center; color:red}
h2	{text-align: center; font-style: italic; font-size: 20px}
body	{background-color: antiquewhite}
ol 	 {list-style-type: upper-roman;}
ol ol 	 {list-style-type: upper-alpha;}
ol ol ol {list-style-type: decimal;}

.cars	{font-family: palatino linotype; width="100%"; cellspacing="2";}
#orange {color: orange}
#green   {color: green}
#red	{color: red}


#outterDiv { width: 1000px; height: 600px; }  
#right { float: right; width: 495px; height: 100%;}
#left { float: left; width: 495px;  height: 100%;}
2
Contributors
1
Reply
3
Views
7 Years
Discussion Span
Last Post by hielo
0

first, start with "blank" html body - just the basic structure with nothing in the body.

Then add your table markup with EMPTY cells (<td>) and run it through the validator. If you did anything wrong, it should give you feedback as to what you did wrong. Once you have a valid table then continue to add the ordered list to the cells. Add the TOP-most list first and run it through the validator, fixing any errors before proceeding. Then add the second level list within the list item tag, and then run it through the validator, and fix any errors. Keep repeating this until you are finished nesting your lists.

Here's a pointer for you:
An <ol> is NOT allowed to have another <ol> as its immediate child - ex:

<ol>
   <li>...</li>
   <li>...</li>
   <ol><li>...</li></ol><!-- WRONG: ol cannot be an immediate child of another ol -->
</ol>

an <ol> (and <ul> ) can only have <li> as an immediate child. So if you want to nest <ol> it must be wrapped in an <li>

<ol>
   <li>...</li>
   <li>
     <ol><li>...</li></ol>
   </li>
</ol>

In your case, pay attention to lines 41 and 49. You close the <li> at the wrong spot, leaving the <ol> as an immediate child of another <ol>. This same error happens in other places as well.

Line 126 is also a problem. Again, an OL and UL can only have an LI as an immediate child, so the SPAN has no business there. These errors will picked up by the validator. That's why you are supposed to do the validation first.

Another tip. An inline element cannot have a block element. A SPAN is an inline element. A OL and UL (among others) are block elements. So line 162 is also a problem.

You need to learn keep an eye for the inline elements:
http://htmlhelp.com/reference/html40/inline.html

and make sure they do not contain block elements:
http://htmlhelp.com/reference/html40/block.html

Also, your document should start with:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

So, seriously, start over from scratch, adding elements and validating incrementally.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.