Please Take a look

Properties With Style, Inc. Orange County Real Estate

It doesn’t work in IE 8 but is rendered well enough in Chrome.

I can’t seem to get vertical separation between elements, charts, text etc.

The background-image doesn’t show except for the top left hand corner of the screen.

Don’t laugh but I can’t believe I got this far today with what I have . . .

Thanks much . . . Rick

CSS:


/* Learning.css */ get it . . .  "learning!"

html, body{
	color:#000;
	background-image: url(images/bluemarb.gif);
	background-repeat:no-repeat;
	background-attachment:fixed;
	font-family:"Lucida Sans Unicode", "Lucida   Grande";font-size:100%; color:#fff; text-align:justify; 
	margin-top: 1%;
	margin-left: 2%;
	margin-right: 2%;
	margin-bottom: 1%;
}

.imglogo	 {float:right; width:900px; height:200;}

p #content {font-family:"Lucida Sans Unicode", "Lucida Grande";font-size:100%; color:#fff;text-align:justify; 
}

h1,h2,h3,h4,h5 {float:right; width:900px; font-size:100%; color: #666; text-align:justify;} 


#outer {width:90%;
		margin:auto;
		max-width:1200px;
		min-width:600px;
}


#content p {text-align:justify; line-height:125%; text-indent:1em; color: #fff;
}

.header {float:right; width:900px; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:130%; line-height: 110%; color:#333; text-align: justify;}

.rightside  {float:right; width:900px; font-size:100%; color:#333; text-align:justify;} 

.leftside   {float:left; width:900px;  font-size:100%; color:#333; text-align:justify;} 

.chart	    {float:right; width:900px; height:675;}  /*border width:8; border-style: inset; border-color: #000*/

.charttitle {float:right; width:900px; height:34;}

.footer     {float:right; width:900px; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
			 font-size:60%; line-height: 80%; color:#333; text-align: justify;}



.ptext		{float:right; width:900px; font-size:90%; color:#333; text-align:justify;
			 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;}
			 

The background-image doesn’t show except for the top left hand corner of the screen.

->

background-repeat:no-repeat;
background-attachment:fixed;

I can’t seem to get vertical separation between elements, charts, text etc.

That’s what padding and margins are for – declare some on your elements.

You probably want to enclose your paragraphs of text in <p> tags, not inline <span>s, too.

Dan has it right on both counts. no-repeat means it doesn’t repeat… fixed means it doesn’t scroll (which I advise against using given how badly it performs in firefox and can make scrolling a page really painful – ESPECIALLY if you use transparency)… You’ve got obvious paragraphs, why are you using span? That basically makes the entire content one giant run-on… and using a H4 without a H3, H2 or H1 preceding it doesn’t make much if any sense either.

Since you are just starting out, some advice. If you are choosing tags based on their default appearance, you’re chosing the wrong tags. Heading tags in particular since the first heading on a page should be your H1, all other headings on the page (h2 and higher) being subsections of the lower numbered heading preceeding it. H2’s being the start of subsections of the h1, h3’s being subsections of the h2 before it, so on and so forth. That’s why a H4 by itself makes no sense.

Much less the content of that h4 just looks like a paragraph, while the image before and after appear to be the most likely candidates for H1 and H2…

CSS is only as good as the HTML it’s applied to – my advice is that you learn some semantic markup and what the proper tags are for your markup before you start diving into CSS properties like backgrounds. HTML is for saying what things ARE – headings, lists, paragraphs – NOT how they are going to appear. Appearance is CSS’ job… If you aren’t saying what things ARE in your HTML, you’re going to have a devil of a time applying CSS to it.

Especially if you wrap the semantically neutral inline-level span element around block level content for which we have tags with semantic meaning… and use images for what should be plaintext numbered headings (that if you want images instead of, you should apply them with CSS)

Also you may wish to try learning to code using a MODERN doctype. Transitional basically means you are in transition from 1997 to 1998, and is for supporting old/outdated/half-assed HTML 3.2 coding techniques, NOT for building new websites. (though try to convince the HTML 5 wieners of that).

Just to show you what I mean, this is probably the HTML you should have for that content.


<!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>
	Properties With Style, Inc. Orange County Real Estate
</title>

</head><body>	

<div id="pageWrapper">

	<h1>
		Properties With Style
		<span><!-- image replacement --></span>
	</h1>
	
	<p class="standout">
		As you can see we are rebuilding our web presence from the ground up. Each visit will eventually display differnt pages as testing and debugging continues. Please check back with us to see the development process and gain real estate data/information as it appears.
	</p>
	
	<h2 class="estates">
		Coto de Caza Equestrian Estates &amp; Private Golf &amp; Tennis Courts
		<span><!-- image replacement --></span>
	</h2>
	<p>
		Arguably the most eclectic collection of home styles and lifestyles. Set behind 24/7 guarded gates, Coto de Caza offers two excellent golf courses with many fairway home site communities and ultimate equestrian estates. The village is just as the namesake describes - a village, set among oak trees covered rolling hills with trails for equestrian, hiking, mountain bike riding or just strolling along with friends. There is no Mello Roos taxes in the Village! The sports park holds many activities throughout the year complete with baseball diamonds, sand pit volleyball courts and much more. Don't miss The Coto de Caza 4th of July Parade.
	</p><p>
		The following charts show 12 year average sale prices for Coto de Caza in Orange County, California. Also plotted is the percent price difference from the PREVIOUS YEAR. The percent-change scale is on the right of the chart and the dollar scale on the left. The year is noted on the bottom of the chart. Also averaged, but not shown is the square feet of the home and the number of transactions for each year, important information to understand the numbers.
	</p>
	
	<img
		src="images/cdc_sfr.gif"
		alt="Coto De Caza Single Familiy Homes Average Sale Price Chart"
		class="chart"
	/>
	
	<h2 class="attachedProducts">
		Coto de Caza Attached Products (Condos, Townhouses, etc.)
		<span><!-- image replacement --></span>
	</h2>
	<p>
		The following charts show 12 year average sale prices for Coto de Caza in Orange County, California. Also plotted is the percent price difference from the PREVIOUS YEAR. The percent-change scale is on the right of the chart and the dollar scale on the left. The year is noted on the bottom of the chart. Also averaged, but not shown is the square feet of the home and the number of transactions for each year, important information to understand the numbers.
	</p>
	<img
		src="images/cdc_condo.gif"
		alt="Condo and TownHomes 10 year Average Sale Price Chart"
		class ="chart"
	/>
	
	<p id="footer"> 
		Copyright <b>Properties With Style, Inc.</b> - a Real Estate Coproration. Data and some inforamtion herein is provided by SoCalMLS, CRISNet Regional MLS and/or CARETS is for the consumer's personal, non-commercial use and may not be used for any purpose other than to identify prospective properties consumer may be interested in purchasing. Any information relating to real estate for sale referenced on this web site comes from the Internet Data Exchange (IDX) program of the SoCalMLS, CRISNet Regional MLS and/or CARETS. This web site may reference real estate listing(s) held by a brokerage firm other than the broker and/or agent who owns this web site. The accuracy of all information, regardless of source, including but not limited to square footages and lot sizes, is deemed reliable but not guaranteed and should be personally verified through personal inspection by and/or with the appropriate professionals. The data contained herein is copyrighted by SoCalMLS, CRISNet Regional MLS and/or CARETS and is protected by all applicable copyright laws. Any unauthorized dissemination of this information is in violation of copyright laws and is strictly prohibited. &copy; 2011 SoCalMLS&reg;, CRISNet Regional MLS&reg;, CARETS&reg; All Displays of Licensed Content shall include: Property Information© 2011 SoCalMLS Inc. All rights reserved. Certain information contained herein is derived from information which is the licensed property of, and copyrighted by, SoCalMLS Inc.
	<!-- #footer --></p>

<!-- #pageWrapper --></div>

</body></html>

… and now that webfonts are semi-real world deployable, I’d even consider axing the sandbag spans I put in there for image replacement. As I’ve said several times around the web, CSS is only as good as the HTML it’s applied to… you use bad HTML, bad CSS is bound to follow.

We’ve already been through all this in previous threads :slight_smile: :

I realise you said you lost your css files but why didn’t you just use revert to what you’ve already been given previously in the threads above? The last html I posted in the other thread was the last working version of your site. (As others said in the other thread you could have just grabbed the online files anyway but it seems you saw fit to upload and overwrite the good files as well).

This was the last html code that I fixed for you (but the css is taken form an earlier post and not the latest file. I could not recover the css from cache anywhere).


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Properties With Style, Inc. Orange County Real Estate</title>
<link href="testcss.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html, body {
    margin:0;
    padding:0
}
body {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background:#000 url(http://www.propertieswithstyle.com/images/bluemarb.gif) repeat fixed;
    padding: 20px;
    color:#fff;
    font-size:100%;
    line-height:1.25;
    padding: 20px 60px;
}
p, h1, h2, h3, h4, h5 {
    margin:0 0 1em;
}
#outer {
    width:90%;
    margin:auto;
    max-width:1200px;
    min-width:600px;
}
#content p {
    text-align: justify;
    line-height:125%;
    margin:0 0 1em;
    text-indent:1em;
    color: #fff;
}
#header {
    text-align: center;
    font-size:80%;
}
#footer {
    text-align:center;
    font-size:80%;
    clear:both;
    padding:10px 0;
}
#footer p {
    margin:0;
}
#nav {
    width: 200px;
    padding:10px 0;
    margin:0 25px 2em 10px;
    float:left;
    word-wrap:break-word;
    font-size:77%;
}
#nav ul {
    margin:0;
    padding:0;
    list-style:none;
    width: 200px;
    position:fixed;
}
#nav li {
    margin:0 10px 5px;
}
#nav a {
    color:#fff;
    text-decoration:none;
}
#content {
    overflow:hidden;
    margin:0 0 2em;
    padding:10px;
}
* html #content {
    zoom:1.0
}
#content p.imgchart{text-align:center}
p.imgchart img{display:inline}

</style>
</head>
<body>
<div id="outer">
    <div id="header">
        <h1>Welcome</h1>
        <p>Welcome to Properties Internet and Information Site. We believe you will find information here that is potentely relavent to the Orange County area. We welcome all questions and comments view our contact information form.</p>
    </div>
    <div id="nav">
        <ul>
            <li><a href="#">Home Page</a></li>
            <li><a href="#">Valuating All Homes</a></li>
            <li><a href="#">Search For Homes</a></li>
            <li><a href="#">Map Search By Communities</a></li>
            <li><a href="#">Sellers Information Look Here</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
            <li><a href="#">Community Areas in Demand</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
            <li><a href="#">Buyers Information Look Here</a></li>
        </ul>
    </div>
    <!--end of navigation div -->
    <div id="content">
        <h2>What is the value of my home or the home I wish to purchase?</h2>
        <p>In looking at the "UNIT SQUARE FEET" scale located at the bottom of the chart below, locate the square foot size of your home or the home of your dreams. On an imaginary vertical line where it intersects either SOLD or available home curve lines, look to the left or right side of the chart to find the dollar scales. This will indicate an approximate value of the home you are thinking of selling or purchasing based on square feet and sales price, the two most critical factors in evaluation. Remember, every home is unique and each specific analysis is far more in depth, however this is a very good start. Data is based on a specific city or area and time frames as noted on the charts. If you have questions or would like a custom detailed analysis for your home or the home you're thinking of purchasing, please contact us.</p>
        <p class="imgchart"><img src="http://www.propertieswithstyle.com/images/MacroValueChart.jpg" width="700" height="420" alt="Macro Value Chart" /></p>
        <div id="footer">
            <p>Copyright, Properties With Style Inc., a Real Estate Corporation. The information being provided by SoCalMLS, CRISNet Regional MLS and/or CARETS is for the consumer's personal, non-commercial use and may not be used for any purpose other than to identify prospective properties consumer may be interested in purchasing. Any information relating to real estate for sale referenced on this web site comes from the Internet Data Exchange (IDX) program of the SoCalMLS, CRISNet Regional MLS and/or CARETS. This web site may reference real estate listing(s) held by a brokerage firm other than the broker and/or agent who owns this web site The accuracy of all information, regardless of source, including but not limited to square footages and lot sizes, is deemed reliable but not guaranteed and should be personally verified through personal inspection by and/or with the appropriate professionals." The data contained herein is copyrighted by SoCalMLS, CRISNet Regional MLS and/or CARETS and is protected by all applicable copyright laws. Any unauthorized dissemination of this information is in violation of copyright laws and is strictly prohibited. Copyright © 2011 SoCalMLS®, CRISNet Regional MLS®, CARETS®" All Displays of Licensed Content shall include: "Property Information © 2011" SoCalMLS Inc. All rights reserved. Certain information contained herein is derived from information which is the licensed property of, and copyrighted by, SoCalMLS Inc. </p>
        </div>
    </div>
</div>
</body>
</html>


I don’t understand why after all the help and instruction we gave you you went back and created a layout using only spans? Maybe we assumed too much?

Jason (deathshadow) has given you another template to work from now also so don’t lose all these as well :slight_smile:

The html example provided does include almost everything in my html - all aligned to the left side of the page.

I read in a book that it’s normal to stack all elements to the left of the page, absent of css formating.

I guess now my question is how to align the elements on the page.

Even though I will have four charts on a page I can’t use the same <DIV> to float them to the right side of the page.

Do I create four differently named <DIV>'s in the css page to float each one of these to the right?

What about text formatting in css?


p   {float:right; width:900px; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:100%; line-height: 120%; color:#333; text-align: justify;

Should I name this something other than the most basic <p>?

Thanks Rick

You can apply a class to the div and re-use it for each as required.

What about text formatting in css?


p   {float:right; width:900px; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:100%; line-height: 120%; color:#333; text-align: justify;

Should I name this something other than the most basic <p>?

Again just set up a class that describes the content you need (e.g. .main-text, .sub-text, .warning-text etc.).

You don’t need to add classes to every paragraph but you can style it via a parent as in the example I and others have already given you.

Content p {etc…}

You would never set all paragraphs to be floated and 900px wide as per your example above though as that would be silly.

I also think you need to re-think your design a little as you have large fixed width images and you are trying to squeeze them into a fluid layout. If the images can’t be made to scale then you may have no choice but to either use smaller images or used a fixed width layout.

You should also avoid using images for the headings especially really long images as that is just going to break very quickly. If you can’t use normal browser text then use smaller width headings so that the page isn’t held wide open.

Refer to my (or DS’s) html for the proper way to structure the page.

I threw together some CSS based on what I’m assuming you are trying to do… and redid the images as .png and jpeg to get the filesizes under control – since GIF is an outdated and rarely used format these days that does not give you particularly well optimized images.

I also redid the logo using a stock image to show that a bit of shadow around the text can actually make it legible.

I did not even try to match your font, and got rid of using images for the subheadings – web fonts can deliver that to pretty much 100% of the audience now (hell, it even works in IE5) and means you don’t have to make a custom image each and every time you want a fancy header.

Take the font you want to use, run it through font-squirrel, you’ll be better off in the long run.

I also tweaked the colors to meet accessibility norms, as yellow on white is effectively invisible.

Properties With Style, Inc. Orange County Real Estate

as with all my examples the directory:

Index of /for_others/rschrieber

is unlocked so you can get at the various sub-files it’s built from. I also put a few more comments in the CSS than I normally would. Takes what you were doing down from 254k to a mere 102k. (well, plus anywhere from 60k to 160k depending on what font tech actually works in the target browser – christmas on a cracker SVG sucks!)

If I have time later I’ll toss together a section-by-section breakdown of the how/why/what of my code. (no promises today on that though).

Thanks Jason I was hoping you’d step in - (I did my stint in the other thread :))