Table Layouts

Nested list using Table Layout

(3 Pages)
←
1
2
3

35 Replies - 2525 Views - Last Post: 19 September 2010 - 01:38 AM

#31 nikc121

D.I.C Head

Reputation: 1

Posts: 120
Joined: 12-April 10

Re: Table Layouts

Posted 18 September 2010 - 10:34 AM

nikc121, on 18 September 2010 - 06:25 AM, said:

Kruithne, on 18 September 2010 - 05:46 AM, said:

On the last bit of code you posted above, does this have some CSS to go with it to control the OL's, if not, they are all just showing as 1,2,3 unless you specify a type="".

Yes, here is the CSS code that goes with the above .html code.

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

Ok, So I basically just started over. I started a new html page and only put the nested tables and nested divs in, then I validated that. As you see the code now, it validate PASS in Strict xhtml. Now I just need help adding the colors orange to all of roman I, Green to roman II, and red to roman III, also I have to add a external link to the bottom divs, Compact, Misize and Sport. When I added the a href link inside Roman I compact, it underlined everything and now when you press anywhere on the bottom of the page it goes to that link. Any suggestions.

<head>

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

 <ol>  

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

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

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


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


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

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

<ol>

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

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

</tr>
</table>

<hr />


<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="outer">
<div id="left">
<ol>
        
                <li>Compact
	<ol>
                           <li>Two Door
	<ol>
                        <li>Honda Civic </li>
                        <li>Toyota RAV 4 </li>
                        <li>Volvo C30 </li>
	</ol>
	</li>
                   
                    	<li>Four Door
        <ol>
                        <li>Mazda 3 </li>
                        <li>Inifiniti GT-R </li>
                        <li>Chevrolet Cruze </li>
            </ol>
        </li>
    </ol>
</li>
         
               <li>Midsize
         <ol>
                            <li>Two Door
         <ol>
                        <li>Nissan Altima </li>
                        <li>Mercury Milan </li>
                        <li>Buick LaCrosse </li>
         </ol>
	 </li>
                    <li>Four Door
          <ol>
                        <li>Chrysler Sebring </li>
                        <li>BMW 3 </li>
                        <li>Toyota Camry </li>
            </ol>
         </li>
     </ol>
</li> 

               <li>Sport
         <ol>
                            <li>Coupe
	 <ol>                    
                        <li>Hyundai Genesis</li>
                        <li>Peugeot RCZ </li>
                        <li>Acura ZDX </li>
          </ol>
	  </li>
                    <li>Convertible
           <ol>
                        <li>Chevrolet Corvette</li>
                        <li>Porsche Boxster </li>
                        <li>Jaguar XKR </li>
                    </ol>
                </li>
           </ol>
    </li>
 </ol>
</div>
    <div id="right">
        <p><img src="./images/final.jpg" alt="Cool Car" /></p>
    </div>
</div>
<p>
    <a href= "../index.html">Home</a>
</p>
</body>
</html>

Here is the Style css

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="1";}
#orange {color: orange}
#green   {color: green}
#red	{color: red}


#left		{float: left;font-family: palatino linotype; width: 495px; height: 100%;}
#right		{float: right; width: 495px; height: 100%;}
#outer		{width: 1000px; height: 600px;}

Was This Post Helpful? 0

#32 Kruithne

D.I.C Regular

Reputation: 87

Posts: 411
Joined: 28-July 09

Re: Table Layouts

Posted 18 September 2010 - 11:05 AM

If you read my older posts I have shown you how to make certain blocks of text a certain color ... firstly as you want to be able to use the color style twice (one on the table layout and one on the layer layout) we replace the # to a . in front of each one.

    .orange {color: orange}
    .green {color: green}
    .red {color: red}

Now we wrap each block of text in a span, linking it to the color styles with a class"" tag, like so ...

    <span class="red">
        This text is red!
    </span>

Quickly put all that into the code you posted above so you can see how it works ...

<head>
<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 class="orange">
 <ol>

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

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

	</ol>
	</li>
	</ol>
	</li>		
</span>
<span class="green">

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


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

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

<ol>

       			<li>Chevrolet Corvette</li>   
         		<li>Porsche Boxster </li>  
         		<li>Jaguar XKR </li> 
</ol>
</li>
</ol>
</li>
</ol>
</span>
</td>
<td><p><img src="./images/final.jpg" alt="Cool Car" /></p>
</td>

</tr>
</table>

<hr />


<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="outer">
<div id="left">
<span class="orange">
<ol>
        
                <li>Compact
	<ol>
                           <li>Two Door
	<ol>
                        <li>Honda Civic </li>
                        <li>Toyota RAV 4 </li>
                        <li>Volvo C30 </li>
	</ol>
	</li>
                   
                    	<li>Four Door
        <ol>
                        <li>Mazda 3 </li>
                        <li>Inifiniti GT-R </li>
                        <li>Chevrolet Cruze </li>
            </ol>
        </li>
    </ol>
</li>
 </span>
 <span id="green">
               <li>Midsize
         <ol>
                            <li>Two Door
         <ol>
                        <li>Nissan Altima </li>
                        <li>Mercury Milan </li>
                        <li>Buick LaCrosse </li>
         </ol>
	 </li>
                    <li>Four Door
          <ol>
                        <li>Chrysler Sebring </li>
                        <li>BMW 3 </li>
                        <li>Toyota Camry </li>
            </ol>
         </li>
     </ol>
</li>
<span id="red">
               <li>Sport
         <ol>
                            <li>Coupe
	 <ol>                    
                        <li>Hyundai Genesis</li>
                        <li>Peugeot RCZ </li>
                        <li>Acura ZDX </li>
          </ol>
	  </li>
                    <li>Convertible
           <ol>
                        <li>Chevrolet Corvette</li>
                        <li>Porsche Boxster </li>
                        <li>Jaguar XKR </li>
                    </ol>
                </li>
           </ol>
    </li>
 </ol>
 </span>
</div>
    <div id="right">
        <p><img src="./images/final.jpg" alt="Cool Car" /></p>
    </div>
</div>
<p>
    <a href= "../index.html">Home</a>
</p>
</body>
</html>

Don't forget to change the orange, green and red styles to a . instead of a # like I said above in this post.

Another thing you mentioned is a link covered the entire bottom of the page, on the code you posted above I'm not seeing anything like that. Maybe you have missed a closing tag (</a>) of a href out?

Was This Post Helpful? 0

#33 nikc121

D.I.C Head

Reputation: 1

Posts: 120
Joined: 12-April 10

Re: Table Layouts

Posted 18 September 2010 - 03:41 PM

Thanks for all your help. I finally finished it today, and just when I was going to send it in. The Proff had some color changes. So Ill fix those tomorrow. Tonight spending time with the family. Again thanks for all your help. Ill probable see you for the nrxt exercise,

Here is the final code and it also validated in strict.

<head>

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

 <ol>  

           	 <li id="orange">Compact
<ol>		
		  <li>Two Door
<ol>
              		<li>Honda Civic </li>
   			<li>Toyota RAV 4 </li>
   			<li>Volvo C30 </li>
</ol>
	</li>

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

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


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


    		<li id="red">Sports 
<ol> 
        	   <li>Coupe 
<ol> 

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

<ol>

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

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

</tr>
</table>

<hr />


<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="outer">
<div id="left">
<ol>
        
                <li id="orange2"><a href="http://en.wikipedia.org/wiki/Compact_car" 		class="link" id="orange3">Compact</a>
	<ol>
                           <li>Two Door
	<ol>
                        <li>Honda Civic </li>
                        <li>Toyota RAV 4 </li>
                        <li>Volvo C30 </li>
	</ol>
	</li>
                   
                    	<li>Four Door
        <ol>
                        <li>Mazda 3 </li>
                        <li>Inifiniti GT-R </li>
                        <li>Chevrolet Cruze </li>
            </ol>
        </li>
    </ol>
</li>
         
               <li id="green2"><a href="http://en.wikipedia.org/wiki/Mid-size_car" 		id="green3">Midsize</a>
         <ol>
                            <li>Two Door
         <ol>
                        <li>Nissan Altima </li>
                        <li>Mercury Milan </li>
                        <li>Buick LaCrosse </li>
         </ol>
	 </li>
                    <li>Four Door
          <ol>
                        <li>Chrysler Sebring </li>
                        <li>BMW 3 </li>
                        <li>Toyota Camry </li>
            </ol>
         </li>
     </ol>
</li> 

               <li id="red2"><a href="http://en.wikipedia.org/wiki/Sports_car" id ="red3">Sport</a>
         <ol>
                            <li>Coupe
	 <ol>                    
                        <li>Hyundai Genesis</li>
                        <li>Peugeot RCZ </li>
                        <li>Acura ZDX </li>
          </ol>
	  </li>
                    <li>Convertible
           <ol>
                        <li>Chevrolet Corvette</li>
                        <li>Porsche Boxster </li>
                        <li>Jaguar XKR </li>
                    </ol>
                </li>
           </ol>
    </li>
 </ol>
</div>
    <div id="right">
        <p><img src="./images/final.jpg" alt="Cool Car" /></p>
    </div>
</div>
<p>
    <a href= "../index.html">Home</a>
</p>
</body>
</html>
 <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
  </p>
<p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valid CSS!" />
    </a>
</p>

Style Code

h1	{text-align: center; color:red}
h2	{text-align: center; font-style: italic; font-size: 20px; color: silver}
body	{background-color: black}


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; margin: 20px}
#image	{position: absolute; right:10px; top:150px}
#orange {color: orange}
#green   {color: green}
#red	{color: red}

#orange2	{color: orange}
#green2		{color: green}
#red2		{color: red}

#orange3	{color: orange}
#green3		{color: green}
#red3		{color: red}

#left		{float: left;font-family: palatino linotype; width: 495px; height: 100%;}
#right		{float: right; width: 495px; height: 100%;}
#outer		{width: 1000px; height: 600px; margin:20px}

a	{text-decoration: none;}
a:hover {text-decoration: underline;}

Was This Post Helpful? 0

#34 Kruithne

D.I.C Regular

Reputation: 87

Posts: 411
Joined: 28-July 09

Re: Table Layouts

Posted 18 September 2010 - 03:47 PM

Great, glad you got it all sorted out in the end and that I could be of help to you. Have fun with your family and be sure to ~~send me a PM, e-mail or~~ start a new post on DiC if you need future help on your studies.

This post has been edited by Kruithne: 19 September 2010 - 01:38 AM

Was This Post Helpful? 0

#35 macosxnerd101

Self-Trained Economist

Reputation: 9044

Posts: 33,550
Joined: 27-December 08

Re: Table Layouts

Posted 18 September 2010 - 05:58 PM

Please DON'T use the PM system to ask for help, as then others cannot benefit from the discussion. Please use the forums to ask your questions.

Was This Post Helpful? 0

#36 Kruithne

D.I.C Regular

Reputation: 87

Posts: 411
Joined: 28-July 09

Re: Table Layouts

Posted 19 September 2010 - 01:38 AM

macosxnerd101, on 18 September 2010 - 04:58 PM, said:

Please DON'T use the PM system to ask for help, as then others cannot benefit from the discussion. Please use the forums to ask your questions.

Sorry - edited

Was This Post Helpful? 0

(3 Pages)
←
1
2
3

Table Layouts

Nested list using Table Layout

35 Replies - 2525 Views - Last Post: 19 September 2010 - 01:38 AM

#31 nikc121

Re: Table Layouts

#32 Kruithne

Re: Table Layouts

#33 nikc121

Re: Table Layouts

#34 Kruithne

Re: Table Layouts

#35 macosxnerd101

Re: Table Layouts

#36 Kruithne

Re: Table Layouts

General Discussion

Programming Help

Web Development

Follow & Share

Give It A Try!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing