PDA

View Full Version : Code for adding photos box


richcodesign
06-08-2010, 03:05 PM
hello,

I thought i could just add a div class called photos in between the text areas. The issue is when i put the div class in between the text (resin Bonded system and resin bound system), the text below the div class looses its styling although the </p> tag is at the bottom.

The div class i want to add is to include a photo.
.photos {
width: 100%;
padding-bottom:10px;
}


<div class="pricesContent">
<h1>Whats the Difference?</h1>
<h3>There are two methods of applying a resin-based surface; they are referred to as Resin Bound and Resin Bonded.</h3>
<p class="text">
Resin Bonded systems are more easily understood as “Scattercoat” or “Surface Dressing”.<br />
Resin Bound systems are more easily understood as “Trowelled” systems.
<br />
<br />
<span class="textBold">Resin Bonded System (Scatter-Coat or Surface Dressing)</span><br />
The resin system is applied to the fully prepared surface by brush, roller or squeegee and the desired aggregate is then cast upon the surface whilst the resin is still tacky (before it sets). The aggregates used can be either natural or coloured up to 6mm in size. Once cured the loose aggregates are then swept clean and a clear seal coat is applied which makes the system UV stable and totally bound.
<br /><br />

<span class="textBold">Resin Bound System (Trowel Applied System)</span><br />
The resin bound system uses a clear UV stable resin binder, which is mixed in a forced action mixer with the desired blend of aggregates. The system is then applied by trowel to the prepared surface to a minimum depth of 12mm.

</p>
</div>

Corrosive
06-08-2010, 03:38 PM
Could you add the image in the code and stick this online somewhere?

richcodesign
06-08-2010, 03:55 PM
Thanks corrosive.

Site is temporarly at http://www.deckagrip.co.uk/whats_the_difference.html

Thanks

Corrosive
06-08-2010, 04:22 PM
That's an odd one and I can't see a reason for it for looking but, what I would say, is that your mark-up could be a lot better. I don't see why all of this text is wrapped in a big paragraph? Also you use spans to create headers when h tags would be better and I don't see why you would have headers in the middle of your big paragraph. Surely each section is a paragraph in itself and should be wrapped in <p> tags?

You also could target the paragraph styles better with your CSS. For example;

.text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#444;
}

could be written as;

.pricesContent p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#444;
}

and then every paragraph would be styled correctly in the div.

Sorry I can't see what exactly the problem is but a semantic tidy up wouldn't go amiss.

richcodesign
06-09-2010, 08:40 AM
ok... i see.

Ill give it a clean up as you suggested and wrap each section of text in <p>
The spans are used to make a title of the new section of text. I just wanted a feature of that particular line.

Thanks

gentleone
06-09-2010, 01:13 PM
The spans are used to make a title of the new section of text.

That's where heading tags (h1, h2, h3, etc.) are for and style them however you want them to appear.

Corrosive
06-09-2010, 01:29 PM
Totally agree with gentleone. use header tags to create headers. Span tags and bold makes no sense. Try looking at something like this; http://webstyleguide.com/wsg3/5-site-structure/2-semantic-markup.html as a guide.