I think you’re just missing a few basic concepts of making HTML and CSS… of course that you have a picture in mind BEFORE you have the content on the page usually means (to me at least) your development process is BACKWARDS.
You’re also doing a number of things that from a compatibility standpoint and/or accessibility standpoint are bad practice. These include:
-
having the first heading on a page being a h2 – first heading should be a h1, all other level headings being by definition SUBSECTIONS of that h1.
-
You’re building a new site, there’s no reason for the loose tranny – transitional is for supporting old/outdated/half-assed coding techniques circa 1998, not building new sites.
-
You aren’t grasping how nesting works, or the difference between block-level and inline-level (and the default display states therein).
-
A media type on that CSS link wouldn’t hurt, since it’s doubtful you want to send this styling to print or other media types.
-
It’s generally bad practice to set a width on BODY since it’s not well supported cross-browser. This is why MOST developers add a DIV around everything to set the width AND centering.
-
You’ve got your LINK for the CSS AFTER </HEAD> and before </body> – in STRICT that would be invalid markup… generally LINK has NO business being used outside of <head></head>
-
It’s generally a bad idea to change font-size without explicitly stating a new line-height… and as a rule I avoid setting the font-size on paragraphs and instead set a condensed font-rule on body – that way all ‘default text’ is set up once instead of having to restate it on EVERYTHING. Case in point, if you said font-family on body, you wouldn’t have to say it again on the numbered headings.
So, with that in mind…
The images will not center using MARGIN, because they are a special version of inline-level, which defaults to display:inline-block (or something similar). Inline-level elements do not obey margin, but do obey text-align. You want the behavior on those of block to use margin to center them – so display:block; will fix it.
As fellgall said, text-align only centers the content of the element within said element, and NOT in relation to the screen.
A quick fix would be to put margin:0 auto; on body and lose the two margins you have, but again I would avoid using body in that manner and instead add a DIV, set the width on the DIV and center that.
So first, let’s clean up the markup and modernize.
<!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"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Coto De Caza Real Estate
</title>
</head><body>
<div id="pageWrapper">
<h1>Coto de Caza Snapshot</h1>
<p>
Thirteen year average sale price chart and a linear pricing chart for Coto de Caza
</p>
<img src="Images/12yr_cdc_det.jpg" width="920" height="698" alt="CDC-Detached" />
<img src="Images/12yr_cdc_att.jpg" width="920" height="698" alt="CDC attached" />
<!-- #pageWrapper --></div>
</body></html>
#pageWrapper being where we’ll set the master width and centering.
In CSS, I also advise using a short reset – there are longer and shorter ones than the one I use, this one is the most reliable. Simple fact is not all browsers start out with the same default paddings/margins/borders and setting them all the same at the start simplifies things. Just avoid “resets” that are actually frameworks, wasting time setting things that are the same cross-browser just to some user preference. (See Reset Reloaded for an example of your typical bloated code that gives resets a bad name)
I’m also not clear exactly what you want that blinds image on – the center 960px wide content area (#pagewrapper) or the whole page? I’m leaving it on body for now… I’m also pulling the ‘fixed’ part as that not only makes scrolling painful for many users, it’s also unreliable cross-browser.
Also, if you have to resort to “…/” in your CSS url, there’s probably something wrong with how you are laying out your directory structure.
So the CSS I’d be using would probably end up like this:
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
body {
/*
This text-align is to center #pagewrapper in IE 5.x,
which incorrectly ignores margin:auto
If you don't care about IE 5.x anymore, you can pull it.
*/
text-align:center;
font:normal 85%/140% "trebuchet ms",arial,helvetica,sans-serif;
background:#000 url(images/blinds1.png) top center;
}
#pageWrapper {
width:95%;
max-width:976px;
min-width:752px;
margin:0 auto;
}
* html #pageWrapper {
/*
IE6/earlier knows not the min/max-width,
but we can fake it with an expression. First
we declare a fixed width for when scripting
is disabled/unavailable.
*/
width:752px;
/*
Then our expression
*/
width:expression(
(document.body.clientWidth>1024) ? "976px"
: ((document.body.clientWidth>800) ? "95%" : "752px")
);
}
p {
padding-bottom:1em;
color:#FFF;
}
h1,h2,h3,h4 {
color:#F1D32E;
text-align:center;
}
img {
display:block;
margin:0 auto 1em;
}
… and yes, that’s a lot to take in all at once. Don’t get discouraged there’s a LOT to learn, and there is a LOT of work involved in even the simplest of layouts.
Which unfortunately is why it’s called work, and not “happy happy fun-time” 
