I realise it's not considered good practice anymore to layout a page using tables, but for the moment that is how my templates appear, and i need some help, just a clue even to get me rolling with understanding CSS. I'm still working on the same template:
Finished Product
The page at the moment (valid XHTML strict)
The code for this page at the moment - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
My CSS Code - body {
background-color: #f4f0e6;}
table#page {
background-color: #ffffff;
padding: 10px;
border: 1px #666666 solid;}
table#header {
border: 1px #666666 solid;}
table#navigation {
border: 1px #666666 solid;}
a:link#navigation {
color: #eeeeee;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;}
a:visited#navigation {
color: #eeeeee;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;}
a:hover#navigation {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;}
a:active#navigation {
color: #eeeeee;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;}
p#navigation {
text-align: right;}
table#content {
background-color: #ffffff;
border: none;
padding: 10px;}
p#content {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: normal;
font-style: normal;
text-align: left;}
ul#content {
list-style-type: square;
white-space: normal;}
img#content {
padding: 5px;}
h4#content {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
text-decoration: none;
font-weight: bold;
font-style: normal;
text-align: left;}
table#lefttop {
background-color: #f4f0e6;
border: 1px #000000 solid;
padding: 10px;}
h1#lefttop {
font-size: 1em;
color: #000000;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
font-style: normal;
text-align: center;}
p#lefttop {
text-align: left;
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: normal;
text-decoration: none;
font-style: normal;}
table#leftmiddle {
background-color: #568406;
border: 1px #000000 solid;
padding: 10px;}
h2#leftmiddle {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
text-decoration: none;
font-style: normal;
text-align: center;}
table#right {
background-color: #006897;
border: 1px #000000 solid;
padding: 10px;}
p#right {
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.8em;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;}
table#righttop {
background-color: #003366;
border: 1px #000000 solid;
padding: 10px;}
h3#righttop {
text-align: center;
color: #ffffff;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
font-style: normal;
text-decoration: none;}
table#footer {
background-color: #ffffff;
border: none;
padding: 10px;}
hr#footer {
width: 1px;
color: #666666;}
a:link#footer {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.625em;
text-decoration: none;
font-weight: normal;
font-style: normal;}
a:visited#footer {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.625em;
text-decoration: none;
font-weight: normal;
font-style: normal;}
a:hover#footer {
color: #000000;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.625em;
text-decoration: none;
font-weight: normal;
font-style: normal;}
a:active#footer {
color: #666666;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.625em;
text-decoration: none;
font-weight: normal;
font-style: normal;}
p#footer {
text-align: right;}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>New Page 1</title>
<link href="consultancy1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
<table width="750" >
<tr>
<td>
<div id="header">
<table width="100%">
<tr>
<td>
<img src="pf1banner.jpg" alt="Example Consultancy Services" width="750" height="102" />
</td>
</tr>
</table>
</div>
<div id="navigation">
<table width="100%">
<tr>
<td>
<a href="newindex222.htm">Investigation Services</a> |
<a href="newindex222.htm">Surveillance</a> |
<a href="newindex222.htm">Testimonials</a> |
<a href="newindex222.htm">Media</a> |
<a href="newindex222.htm">Links</a> |
<a href="newindex222.htm">Contact Us</a>
</td>
</tr>
</table>
</div>
<div id="content">
<table width="100%">
<tr>
<td align="center" valign="top">
<div id="lefttop">
<table width="100%">
<tr>
<td>
<h1>LATEST NEWS</h1>
<p>Latest News Item here</p>
<p>Another News Item here</p>
</td>
</tr>
</table>
</div>
<p> </p>
<div id="leftmiddle">
<table width="100%">
<tr>
<td>
<h2>SERVICES</h2>
</td>
</tr>
</table>
</div>
<ul>
<li>Surveillance</li>
<li>Investigation</li>
<li>Action Plans</li>
<li>Media Exposure</li>
<li>Business Plans</li>
<li>Financial Solutions</li>
<li>Personal Service</li>
<li>Mediation</li>
<li>Rural Advice</li>
</ul>
</td>
<td>
<h4>Welcome to This Website</h4>
<img src="wheat4.jpg" alt="Photo of Wheat" width="100" height="100" />
<p>General text about the
business, it's operator and clients successes. General text about the
business, it's operator and clients successes. General text about the
business, it's operator and clients successes. General text about the
business, it's operator and clients successes.</p>
<img src="scales.jpg" alt="Photo of Scales" width="100" height="100" />
<p>General text about the
business, it's operator and clients successes. General text about the
business, it's operator and clients successes. General text about the
business, it's operator and clients successes. General text about the
business, it's operator and clients successes. General text about the
business,
<img src="cow.jpg" alt="Photo of Cow" width="100" height="100" />
it's operator and clients successes. General text about the business, it's operator
and clients successes.</p>
<p>General text about the business, it's operator and clients successes.
General text about the business, it's operator and clients successes.</p>
<p>General text about the business.</p>
</td>
<td align="center" valign="top">
<div id="right">
<table width="100%">
<tr>
<td>
<div id="righttop">
<table width="100%">
<tr>
<td><h3>TESTIMONIALS</h3></td>
</tr>
</table>
</div>
<p>This is where the
testimonials go, or maybe just the best one. This is where the
testimonials go, or maybe just the best one. This is where the
testimonials go, or maybe just the best one. This is where the
testimonials go, or maybe just the best one. This is where the
testimonials go, or maybe just the best one.</p>
<p>John Smith, CEO </p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<div id="footer">
<table width="100%">
<tr>
<td>
<hr />
<p>Terms of Use | Privacy Policy | Copyright © 2004 ACS</p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>[/code]
I'm slowly getting my head around the parent/child thing, but i'm sure there must be something somewhere that is overriding the CSS causing my page at the moment to not accept the changes i make in my style sheet.
For instance, just say i want to change the properties of the table containing the word "Testimonials". I want the table to have a 1px black border with padding of 10px and a background of #003366. The content of that table is simply the word "Testimonials" which i'm trying to style as h4: 1em bold and white.
I've named that <div> "righttop" and that table is nested within another table in the div called "right". That div and table is inside another table called "content" which is in another div and table called "page" which comprises the whole page.
Besides wondering if something in my XHTML is overriding my style sheet, i'm also a bit confused about the following:
- Should i be styling these things as <table>, <table-style>, <tr>, <th> or <td>?
- Should i start styling the innermost or outermost table or div first?
- Have i named my <div's> correctly, or should the table come before the div?
Thanks in advance
Nicole