Classes and SPAN

HTML & CSS
1

Trying to figure this out.

I have about 40+ pages where the layout is going to be exactly the same as far as content goes. See .pdf attachment.

CSS is

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

I’m going to apply this hundreds of times as boxes of text on top of charts and below charts.

I’m not doing it well in the .html pages as it is not working.

Here is my .html within the body of the page:


 <span class="ptext">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.</span>

What am I missing?

Thanks . . . Rick

2

span is an inline tag and so the content displays inline - you should use a div tag or other block tag if you want to float the content.

3

As felgall says, use a div instead of a span. Also not that you must include some kind of measurement value with the width. Rather than

width:900;

it must something like

width:900[COLOR="Red"]px[/COLOR];
4

But a DIV can only be used once as I understand it.

I’ll have four charts per page 900px wide. Also a flash or slide show and a bunch of box text. You can see that on my earlier attachment.

These elements will be the same for about 40 or more pages.

Therefore I’d like to use the least amount of markup and css to get the job done.

A class can be used over and over again - correct?

Thanks . . . Rick

5

You can use a div with a class as many times as you like.

It is ids that can only be used once per page.

6

Confusion . . .

.html


<div id="imgchart1"><img src="Images/NewHeaderImage.gif" alt="header image" />

.css


#imgchart1 {float:right; width:900px;

	   }

The image does not float right.

H.E.L.P. rick

7

You will need to supply more of the HTML and CSS as there isn’t enough in what you have supplied to tell why it isn’t working.

8

What else could effect it?

I just don’t get it.

9

Just read your CSS section

“You get even greater control by using clear:left or clear:right as they ensure that the element will go below any floated elements on that side of the page while still allowing it to go next to floated elements on the other side of the page.”

Does this mean that, for instance


#imgchart1 {float:right; width:900px; 
    	     }

If I used a

#imgchart1{float:right; width:900px; clear:left;
    	     }

The next element, ie some text, would be placed UNDER the image I just floated:right; ?

I haven’t seen this anywhere.

Rick

10

felgall . . . I read some of your comments in your CSS section and found a simpler way (for me) to try and understand this.

You said something to the effect of just to layout all if my html stuff on a page and then create the CSS stuff one item at a time to see the effect.

That’s what I did.

As you asked the css and html is below.

I still can’t get things to float:right!

Where do I start?

Thanks

CSS:


/* testcss.css*/

html, body {margin:0; padding:0;
}

body{	color:#000;
		background-image: url(images/bluemarb.gif);
		background-attachment:fixed;
		font-family:"Lucida Sans Unicode", "Lucida Grande";	font-size:100% ; text-align: justify ; 
		line-height:120%; color: #fff; text-indent:1em; 
		}

#imgchart1 {float:right; width:900px; clear:left;
			
		  }
		  
#imgchart2 {float:right; width:900px; clear:left;
		  }

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

#footer p{margin:0;}

HMTL:


<!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"></style>
</head>

<body>

<img src="Images/NewHeaderImage.gif" width="900" height="200" alt="header image" />

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


<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-Att-Title.gif" width="900" height="34" alt="chart title" />
<img src="Images/cdc_sfr.gif" width="900" height="675" alt="cdc sfr chart" />


<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-condotitle.gif" width="900" height="34" alt="condo title" /> 
<img src="Images/cdc_condo.gif" alt="cdc sfr chart" width="898" height="675" />

<div id="footer"><p>Copyright: Properties With Style, Inc., 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. 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>

</body>
</html>
11

You have CSS styles for float right, based on IDs (e.g. #imgchart1), but those IDs don’t appear anywhere in your HTML, so they can’t possibly have any effect.

Perhaps post a screen shot of what layout you want and we can advise further. Either way, it’s best to have those images nested inside a block-level element, such as the <p>. Don’t leave them there hanging out on their own.

12

In my html I have . . .


<div id="imgchart1"><img src="Images/cdc_condo.gif" alt="cdc sfr chart" width="900" height="675" /></div>

I was trying to go one element at a time until I got it right.

13

But you don’t. It’s not anywhere in the HTML you posted above. :frowning:

If you want to go one element at a time, perhaps strip down your example to once instance of what you are trying to do. If you just want an image floated right within a paragraph, do something like:

<p><img src="Images/cdc-Att-Title.gif" width="900" height="34" alt="chart title" />
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>

p img {float: right;}
14

I have just over 40 pages - each with four of these charts.

I really need this to be done in css in case of changes.

Rick

15

I don’t think you really understand what CSS is at this stage, so I truly recommend that you get a good book on it and get a systematic overview of how it works. It would save you a lot of pain, I think.

If you are using something like this in css:

#imgchart1 {float:right; width:900px; clear:left;}

that is specifying a style for an HTML element that has an id of #imagechart1. E.g.

<img [COLOR="Red"]id="imagechart1"[/COLOR]>

Unless you have id="imagechart1" somewhere in the HTML, the CSS style will do nothing. The ID is a hook in the HTML for the CSS rule.

As I said above, you can often avoid IDs and classes altogether by simple having a CSS rule that says something like

p img {float:right; width:900px; clear:left;}

But it will depend on circumstances whether you’ll need a more specific class or ID in the HTML to target just some images. By the way, for things requiring multiple instances, use classes instead of IDs.

As I say, though, you are obviously serious about this web design gig, so it’s really time to take some time out to learn how it works, as you are suffering a lot of unnecessary pain at the moment.

16

Please see the result in the attachment.

Basically - nothing is happening!

Rick

My html page:

<!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" />
<style>

</style>
<title>Properties With Style, Inc. Orange County Real Estate</title>
<link rel="stylesheet" href="testcss.css" type="text/css"/>
</head>

<body>

<p><img src="/Images/cdc_sfr.gif" width="900" height="675" alt="cdc sfr" />
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>

</body>
</html>

My css page:

/* testcss.css*/

html, body {margin:0;padding:0;}

body{color:#000;background-image: url(images bluemarb.gif); background-attachment:fixed;font-Family:"Lucida Sans Unicode", "Lucida Grande";font-size:100% ; text-align: justify ; line-height:120%; color: #fff; text-indent:1em;}

p img {float: right}
17

That works fine, so I suspect the link to your CSS file is wrong. If those styles are placed in the head section, it works:

<!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" />
[COLOR="Red"]<style>
html, body {margin:0;padding:0;}

body{color:#000;background-image: url(images bluemarb.gif); background-attachment:fixed;font-Family:"Lucida Sans Unicode", "Lucida Grande";font-size:100% ; text-align: justify ; line-height:120%; text-indent:1em;}

p img {float: right}
</style>[/COLOR]
<title>Properties With Style, Inc. Orange County Real Estate</title>
</head>

<body>

<p><img src="/Images/cdc_sfr.gif" width="900" height="675" alt="cdc sfr" />
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>

</body>
</html>
18

Directory Tree
PWSSite
html
css
images

19

That’s a bit vague. Is “css” a folder? If so, the link should be something like

href="css/testcss.css"

but it will depend on where the HTML file is in relation to that css folder what the link is, unless you use root-relative URLs, such as

href="/css/testcss.css"

(which only work online unless you have a server environment set up on your computer).

20

You know I think I need to simplify my directory structure.

I’ll get back after I do that.

Thanks.

ps. you’re up late!