hey,

 

I've wrapped a <div> around some elements on a page, given it a background colour and some margins but its not working at all...I've uploaded a pic here My link as the client wants the site password protected for the moment (I cant upload pictures here)

 

Each project - image and summary should be in its own <div> that has a grey background and some margin after it. This is my HTML:

 

<div class="projectsummary"><a href="http://www.fmwhelan.com/test/projects/coca-cola"><img class="projectimg" src="http://www.fmwhelan.com/test/wp-content/themes/metric/images/projectthumb_cocacola.gif" alt="" /></a>
<div class="summary"><span class="projectheader">Coca Cola Flavour Manufacturing, Wexford</span>
<span class="greentxt">Location; IDA Industrial Estate, Wexford<br />Main Contractor: SISK Contactors, Cork</span><br /><strong>Details:</strong> 2500 tonnes of structural steel to a new bottling facility for Coca-Cola in Wexford.
</div>
</div>

<div class="projectsummary"><a href="#"><img class="projectimg" src="http://www.fmwhelan.com/test/wp-content/themes/metric/images/projecthome1.gif" alt="" /></a>
<div class="summary"><span class="projectheader">IVERK Produce</span>
<span class="greentxt">Location: Kilkenny <br />Main Contractor: SISK Contactors</span><br /><strong>Details:</strong>120 tonnes of structural steel were manufactured, finished with intumescent paint and erected for this fruit and vegetable cold storage facility.  120mm cold store panels were also supplied and fitted to the storage building. 
</div>
</div>


<div class="projectsummary"><a href="#"><img class="projectimg" src="http://www.fmwhelan.com/test/wp-content/themes/metric/images/projectthumb_monart.gif" alt="" /></a>
<div class="summary"><span class="projectheader">Monart House 5 star Destination Spa</span>
<span class="greentxt">Location: Wexford <br />Main Contractor: Mythen Construction Ltd, Co.Wexford</span><br /><strong>Details:</strong>The supply, manufacture and erection of structural steel, roof sheeting and associated gutters and flashings for the extension to the original period building.

</div>
</div>

<div class="projectsummary"><a href="http://www.fmwhelan.com/test/news/beasley-street-hotel"><img class="projectimg" src="http://www.fmwhelan.com/test/wp-content/themes/metric/images/projectthumb_beasley.gif" alt="" /></a>
<div class="summary"><span class="projectheader">Beasly Street Hotel</span>
<span class="greentxt">Location: Cork <br />Main Contractor: Brian McCarthy Contractors Ltd, Co. Clare</span><br /><strong>Details:</strong>200 tonnes of structural steel to a new 5 storey, 124 bedroom hotel, at a restricted city centre location.  The tight location made this a challenging project.

</div>
</div>

<div class="projectsummary"><a href="http://www.fmwhelan.com/test/projects/rathnure-gaa"><img class="projectimg" src="http://www.fmwhelan.com/test/wp-content/themes/metric/images/projectthumb_rathnuregaa.gif" alt="" /></a>
<div class="summary"><span class="projectheader">Rathnure GAA Club</span>
<span class="greentxt">Location: Rathnure, Co.Wexford <br />Main Contractor: Brian McCarthy Contractors Ltd, Co. Clare</span><br /><strong>Details:</strong>150 tonnes of structural steel and cladding for this curved roof sports facility.

</div>
</div>

<div class="projectsummary"><a href="http://www.fmwhelan.com/test/projects/gilead-sciences"><img class="projectimg" src="http://www.fmwhelan.com/test/wp-content/themes/metric/images/projectthumb_gilead.gif" alt="" /></a>
<div class="summary"><span class="projectheader">Gilead Sciences</span>
<span class="greentxt">Location:Gilead Sciences Ltd., Cork<br />Main Contractor: SISK Contractors, Cork</span><br /><strong>Details:</strong>F & M Whelan supplied, manufactured and erected 1600 tonnes of structural steel for a pharmaceutical company’s new offices, manufacturing and warehousing facility.  We also supplied and fitted all metal decking in the floors and sheer studding on this green field site.  

</div>
</div>

<div class="projectsummary"><a href="http://www.fmwhelan.com/test/projects/the-arc-offices"><img class="projectimg" src="http://www.fmwhelan.com/test/wp-content/themes/metric/images/projectthumb_arc.gif" alt="" /></a>
<div class="summary"><span class="projectheader">The ARC Offices</span>
<span class="greentxt">Location:Wexford<br />Main Contractor: Mythen Construction, Co.Wexford </span><br /><strong>Details:</strong>A bespoke designed development which included curved steel, structural steel, metal decking to floors and shear studs. 

</div>
</div>

 

and also my CSS;

 

.projectimg  {
float:left;
margin-right:15px;
}


.projectsummary  {
width:630px;
background-color:#f8f8f8;
padding: 10px 10px 20px 10px;
margin-bottom:15px;
margin-top: 15px;
}

.summary  {
width: 440px;
float:left;
}


.greentxt  {
color: #005134;
}

.projectheader  {
color:#005134;
font-size:16px;
font-weight:bold;
}

 

Any hep appreciated, cheers

<!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=windows-1251" />
<title>Untitled Document</title>

<style>
img {border: 0;}
a img.projectimg  {
   	float:left;
   	margin-right:15px;
	display: block;
   	}


.projectsummary  {
   	width:630px;
   	background-color:#f8f8f8;
	padding: 10px 10px 20px 10px;
   	margin-bottom:15px;
   	margin-top: 15px;
	clear: both;
}

.summary  {
   	width: 440px;
   	float:left;
}


.greentxt  {
   	color: #005134;
}

.projectheader  {
   	color:#005134;
   	font-size:16px;
   	font-weight:bold;
}

.clearfix {clear: both;}
</style>

</head>

<body>


<div class="projectsummary">
<a href="http://www.fmwhelan.com/test/projects/coca-cola"><img class="projectimg" width="163" height="90" src="http://www.fmwhelan.com/test/wp-content/themes/metric/images/projectthumb_cocacola.gif" alt="" /></a>
<div class="summary">
	<span class="projectheader">Coca Cola Flavour Manufacturing, Wexford</span>
	<span class="greentxt">Location; IDA Industrial Estate, Wexford<br />
	Main Contractor: SISK Contactors, Cork</span>
	<br />
	<strong>Details:</strong> 2500 tonnes of structural steel to a new bottling facility for Coca-Cola in Wexford.
</div><div class="clearfix"></div>
</div>

<div class="projectsummary">
<a href="#"><img class="projectimg" width="163" height="90" src="http://www.fmwhelan.com/test/wp-content/themes/metric/images/projecthome1.gif" alt="" /></a>
<div class="summary"><span class="projectheader">IVERK Produce</span>
<span class="greentxt">Location: Kilkenny <br />Main Contractor: SISK Contactors</span><br /><strong>Details:</strong>120 tonnes of structural steel were manufactured, finished with intumescent paint and erected for this fruit and vegetable cold storage facility.  120mm cold store panels were also supplied and fitted to the storage building. 
</div><div class="clearfix"></div>
</div>


<div class="projectsummary">
<a href="#"><img class="projectimg" width="163" height="90" src="http://www.fmwhelan.com/test/wp-content/themes/metric/images/projectthumb_monart.gif" alt="" /></a>
<div class="summary">
	<span class="projectheader">Monart House 5 star Destination Spa</span>
	<span class="greentxt">Location: Wexford <br />Main Contractor: Mythen Construction Ltd, Co.Wexford</span><br /><strong>Details:</strong>The supply, manufacture and erection of structural steel, roof sheeting and associated gutters and flashings for the extension to the original period building.
	</div><div class="clearfix"></div>
</div>

<div class="projectsummary">
<a href="http://www.fmwhelan.com/test/news/beasley-street-hotel"><img class="projectimg" width="163" height="90" src="http://www.fmwhelan.com/test/wp-content/themes/metric/images/projectthumb_beasley.gif" alt="" /></a>
<div class="summary">
	<span class="projectheader">Beasly Street Hotel</span>
	<span class="greentxt">Location: Cork <br />Main Contractor: Brian McCarthy Contractors Ltd, Co. Clare</span><br /><strong>Details:</strong>200 tonnes of structural steel to a new 5 storey, 124 bedroom hotel, at a restricted city centre location.  The tight location made this a challenging project.
	</div><div class="clearfix"></div>
</div>

<div class="projectsummary">
<a href="http://www.fmwhelan.com/test/projects/rathnure-gaa"><img class="projectimg" width="163" height="90" src="http://www.fmwhelan.com/test/wp-content/themes/metric/images/projectthumb_rathnuregaa.gif" alt="" /></a>
<div class="summary">
	<span class="projectheader">Rathnure GAA Club</span>
	<span class="greentxt">Location: Rathnure, Co.Wexford <br />Main Contractor: Brian McCarthy Contractors Ltd, Co. Clare</span>
	<br />
	<strong>Details:</strong>150 tonnes of structural steel and cladding for this curved roof sports facility.
</div><div class="clearfix"></div>
</div>

<div class="projectsummary">
<a href="http://www.fmwhelan.com/test/projects/gilead-sciences"><img class="projectimg" width="163" height="90" src="http://www.fmwhelan.com/test/wp-content/themes/metric/images/projectthumb_gilead.gif" alt="" /></a>
<div class="summary">
	<span class="projectheader">Gilead Sciences</span>
	<span class="greentxt">Location:Gilead Sciences Ltd., Cork<br />Main Contractor: SISK Contractors, Cork</span>
	<br />
	<strong>Details:</strong>F & M Whelan supplied, manufactured and erected 1600 tonnes of structural steel for a pharmaceutical company’s new offices, manufacturing and warehousing facility.  We also supplied and fitted all metal decking in the floors and sheer studding on this green field site.  
</div><div class="clearfix"></div>
</div>

<div class="projectsummary">
<a href="http://www.fmwhelan.com/test/projects/the-arc-offices"><img class="projectimg" width="163" height="90" src="http://www.fmwhelan.com/test/wp-content/themes/metric/images/projectthumb_arc.gif" alt="" /></a>
<div class="summary">
	<span class="projectheader">The ARC Offices</span>
	<span class="greentxt">Location:Wexford<br />Main Contractor: Mythen Construction, Co.Wexford </span>
	<br />
	<strong>Details:</strong>A bespoke designed development which included curved steel, structural steel, metal decking to floors and shear studs. 
 </div><div class="clearfix"></div>
</div>



</body>
</html>

I notice that in your css you haven't coded for the divs; only put a

.

then the name of the div.

 

In any css, you need to have

 

div.whateverit's called and make it only 3 letters

then put a css comment which explains what it is

 

say, if you wanted a parchment section with cleverdick borders to look resemble a letter

 

 

div.let/*letters from subscribers*/

{

background-color: #FFFFCC;

padding: 1em;

width: 85%;

left: 2em;

border-style: ridge;

border-width: thick;

border-color: rgb(255,255,255);

text-indent: 2em;

font-family: times new roman, times, serif;

font-size: 1em;

z-index: 1;

line-height: 20px;

margin: 1em;

}

 

Then you'd code:

 

<div class="let">

 

dear Sir

 

I'm dissgussted

 

sined

 

dissgussted Tunbridge Wells

 

</div><!-- letter from subscriber -->

 

Note that I include an XHTML comment at the end on the div, because the div end can be SUPERconfusing if you don't do this

Sorry

I meant to end the div with </div><!-- let -->

 

Only 3 letters is a good rule to have for the names of your divs. Your css can be used over different websites, so make life easy for yourself

I'm confused, why should id and class names only be 3 letters? I thought the point of naming was to give it something meaningful, #wrapper, #sidebar, #header, .project, so that it was easy to identify elements in both the css and html and so they are descriptive of what they actually do. Rather than having a 3 letter code that then needs to be deciphered through comments in the css.

 

As for the OP issue, Levs solution should fix it...sorry for going off topic I just wanted to know the benefits of a 3 letter naming system for classes and IDs.

<snip> In any css, you need to have

 

div.whateverit's called and make it only 3 letters

then put a css comment which explains what it is

 

 

Actually, the only time you'd NEED to place div.className, is if you had the same class applied to several elements, but wanted something specific for a div with said class.

 

I'm confused, why should id and class names only be 3 letters? I thought the point of naming was to give it something meaningful, #wrapper, #sidebar, #header, .project, so that it was easy to identify elements in both the css and html and so they are descriptive of what they actually do. Rather than having a 3 letter code that then needs to be deciphered through comments in the css.

 

As for the OP issue, Levs solution should fix it...sorry for going off topic I just wanted to know the benefits of a 3 letter naming system for classes and IDs.

 

I agree with Dizi - Lev's solution should work.

 

<off-topic>

I also agree re class names.

 

Classes and ID's should be semantic - They should have meaning. Shortening them to 3 letters defeats this very purpose.

 

If you shorten them, you then need to add a comment so that you know what the hell each one is for. Using semantic, meaningful names removes the need for comments.

Thanks for all the replies, Lev your solution worked, thanks for that.

 

I think I find it easier to use longer div names that are descriptive, easier to know where I am in the CSS, think I'd find 3 letters seriously confusing, especially on bigger sites.