CSS font style family color align, etc. H O W ?

**ralph.m** · May 6, 2011 03:02

Originally Posted by R Schreiber

One step at a time please.

Well then how about completing the one step you asked about before?

Is the CSS link issue resolved?

**deathshadow60** · May 6, 2011 04:48

Originally Posted by R Schreiber

I've used DW CS4's

<mythbusters>Well there's your problem.</mythbusters> DREAMWEAVER. As a dearly departed friend used to say, the only thing you can learn from Dreamweaver is how not to build a website.

Do yourself a favor, uninstall DW, burn your DW manuals, make microwave art out of the CD's... Until your skills mature Dreamweaver is only going to get in the way of building your site and you can learn NOTHING good from ANY of it's automatically added code or any of it's templates; It's ALL some of the worst rubbish on the Internet... and once your skills mature, it serves no purpose.

Excuse me as I channel the dead -- <dan schulz>The only thing about Dreamweaver that can be considered professional grade tools are the people promoting it's use!</dan schulz>

Get yourself a flat text editor like crimson, editplus, notepad++, win32pad, etc, etc... for working on the code, a free FTP client to upload with (filezilla as good as any) and for "preview" use the actual browsers...

That way you can keep track of all the associations and directories yourself (making sure the files are in their proper locations) instead of relying on some tool that takes that control out of your hands.

**R Schreiber** · May 6, 2011 12:11

Here is what I have in my html page:

Code:

<div align="center"><img src="http://www.sitepoint.com/forums/images/cdc_chart.jpg" alt="Coto de Caza Valuation Chart" width="920" height="860" /> <br />

<img src="http://www.sitepoint.com/forums/images/12yr_cdc_att.jpg" alt="12 Year Average Sale Price Attached homes" width="920" height="860" /> <br />

<img src="http://www.sitepoint.com/forums/images/12yr_cdc_det.jpg" alt="12 Year Average Prices Detached Homes" width="920" height="860" /> <br /></div>

It works perfectly, however, what I would like is to assign a DIV in my css page so I can use the DIV styling from there.

I have about 80 graphical charts, three to a page.

I know it's simple but I can't figure it out.

Thanks Rick

(ps. I keep reading all of your prior post as I am slowly beginning to make out some of the pieces.)

pss. yes the css issue is resolved. I'm also trying NotePad+++

**R Schreiber** · May 6, 2011 16:38

This works fine in Chrome but not well in IE7.

Code:

HTML Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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.</title>
<link rel="stylesheet" type="text/css" href="testcss.css" />
<style type="text/css" media=all>

</style>

</head>

<body>

<h2>COTO DE CAZA</h2>

<h2>Coto De Caza 12 Year Average Sale Price Detached Homes</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>

<div align="center"><img src="images/cdc_chart.jpg" alt="Coto de Caza Valuation Chart" width="920" height="860" /> <br />

<img src="images/12yr_cdc_att.jpg" alt="12 Year Average Sale Price Attached homes" width="920" height="860" /> <br />

<img src="images/12yr_cdc_det.jpg" alt="12 Year Average Prices Detached Homes" width="920" height="860" /> <br /></div>


</body>
</html>

CSS Page

Code:

CSS Page

@charset "utf-8";
/* CSS Document */
/*<style type="text/css">*/

body {
background-color:#000000;
background-image: url('images/redsquare.png');
}
	
p {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:1.4em; text-align:justified; color:#CCC; 
   margin-left: 20%;  margin-right: 20%;
   
   }

h1,h2,h3,h4,h5 {font:Tahoma, Geneva, sans-serif; color:#CCC;
	text-align:justified; color:#CCC; 
   	margin-left: 20%;  margin-right: 20%;
   }

In IE 7 the text is crunched in the center above the charts. In Chrome the text is aligned to the widths of the charts which look really well.

How can I clean this up?

I'm trying to set up as much of the styling as possible in the CSS page.

I don't wish to proceed any further from here until I can get a better grasp alignment. How do I set alignment in the CSS page? Should I make a template as there will be many pages exactly the same with charts and descriptions?

Next. These charts (jpegs) are designed to a certain pixel width. If I resize them in the css or html page they will lose their quality.

How do I figure out my page layouts according to a given width, say 960px?

Thanks everyone. It's getting a little more fun now!

Rick

**deathshadow60** · May 7, 2011 11:32

There are several... problems with your new code.

1) There is no such thing as an align attribute if you are working in modern code.

2) even if the align attribute still existed, putting it on the DIV should have zero effect on it's content. I think you meant to put it on the IMG.

3) MOST of your problem I suspect comes from the 20% margins, which may or may not be based on font-size. As a rule of thumb, % + Margin == unreliable at best, broken at worst. % on margins and padding are based on font-size, NOT page width, thought that CAN vary from browser to browser

Do you have a picture of what you want it to look like? Do you want that text the same width as the image? If so, you shouldn't be trying to scale the text with margin, you should have a parent wrapping ALL of that tho handle the desired width ONCE.

Some other advice, never trust the default line-height, if you change the font-size change line-height too -- it's just less headaches in the long run. Likewise the condensed font property can end up less code.

... and put each property on it's own line, it's easier to read than the continuous one line where you can't tell where anything begins or ends, or at a glance what properties are being set.

IF I'm understanding what it is you are trying to do...

Markup:

Code:

<!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.
</title>

</head><body>

<div id="pageWrapper">

	<h1>COTO DE CAZA</h1>

	<h2>Coto De Caza 12 Year Average Sale Price Detached Homes</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>
	
	<div class="plateImages">
		<img
			src="images/cdc_chart.jpg"
			alt="Coto de Caza Valuation Chart"
			width="920" height="860"
		/>
		<br />
		<img
			src="images/12yr_cdc_att.jpg"
			alt="12 Year Average Sale Price Attached homes"
			width="920" height="860"
		/>
		<br />
		<img
			src="images/12yr_cdc_det.jpg"
			alt="12 Year Average Prices Detached Homes"
			width="920" height="860"
		/>
	<!-- .plateImages --></div>
	
<!-- #pageWrapper --></div>	

</body></html>

CSS:

Code:

body {
	font:normal 140%/140% "trebuchet ms",helvetica,sans-serif;
	color:#CCC;
	background:#000 url(images/redsquare.png) top center; 
}

#pageWrapper {
	text-align:justified.
	width:60%; /* assuming you wanted % as in screen width and not fraction of screen size */
	min-width:920px; /* don't let it get narrower than the plates */
	margin:0 auto; /* center this div */
}

h1,h2,h3,h4,h5,h6 {
	font-family:tahoma,geneva,sans-serif;
}

.plateImages {
	text-align:center;
}

In going through to rewrite, I noticed a few other issues... trebuchet is a M$ core font, as is Arial, so arial would NEVER get called in your font stack. Unless there are spaces in a URL you don't need to put it in quotes in CSS, if you are going to have the same properties (like color or text-align) on your content elements, put them on BODY instead of on each and every one of them (they will inherit), then only state where it's different. Also, your stating only "font" when all you have for properties is the family will get ignored in many browsers... If you don't want to change their sizes or line-heights you should declare font-family, not just "font"... If you are setting two or more font- properties, that's when you use just "font"... as illustrated above.

... and before you ask:

font:normal 140%/140% "trebuchet ms",helvetica,sans-serif;

When using the condensed font property you have to declare a weight/style or some older browsers ignore it, the first number is size, second number is line-height, then the stack. 90% of the time you declare a change in fonts, that's the best way to do it.

Oh, and if you want to fix the width of the layout to 960px, just change that 60% I say above to 960px... Though that's called a "fixed width layout" -- something I generally do NOT advocate. As it is I put a min-width on it so that it wouldn't shrink smaller than the images. I kind-of assumed you wanted 60% of screen width as saying 20% margin is one of the most common mistakes out there. If you actually wanted 0.2em as the side margins, well that's a horse of a different color.

**R Schreiber** · May 8, 2011 19:56

Thanks much deathshadow.

I like your markup style.

I'm going to go slow and start with what I see first.

I created a completely new html and css file based on your code. (copy & paste)

The three images are all the way at the left side of the screen.

The text<p></p> spans the entire screen width.

I have not changed a thing in your code.

Is this correct?

Exactly what is pagewrapper? Is that the main container or is body{} the main container?

Rick

**R Schreiber** · May 8, 2011 20:20

I have attached a small .pdf file showing what I would like for my site page regarding charts.

It's really quite simple.

Thanks.

Rick

**deathshadow60** · May 9, 2011 08:14

oops. Typo. that period after 'justify' should be a semicolon... Guess that's why I usually put these on my server instead of doing a drive-by post.... and the property is justify not justified; shows how often I use it. (generally justify for screen is considered 'bad' for usability)

Properties With Style, Inc.

I believe is what you are trying to do (so far before that new pdf) not that I'd actually do a layout that way (again that 60% is a wild guess). I also wouldn't use quite so large a default font (more like 85% than 140%)

As with all my examples the directory:
Index of /for_others/RSchreiber

is open for easy access to the bits and pieces.

Your new PDF makes things a bit trickier with the sidebar, but not horribly so. If I have time later I'll slap together an example of that.

Is that supposed to be fixed width or fluid?

User Tag List

Thread: CSS font style family color align, etc. H O W ?

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions