7 replies [Last post]
allan smith
Offline
Enthusiast
Last seen: 9 years 12 weeks ago
Timezone: GMT+1
Joined: 2004-01-20
Posts: 53
Points: 2

I posted a number of 'revamped' web pages Using SHTML / XTML / CSS

I tried not to use tables for layout - but have a problem

Take a look at http://www.telfordsteamrailway.co.uk/newcss/donate.shtml

The text alongside the main image is very short

This means that the 'footer' SSI file is displaying alongside the image
instead of underneath

(as on http://www.telfordsteamrailway.co.uk/newcss/usage.shtml )

Please - How do I fix it?

Incidentally if you do visit only the following links work - others will
cause 'problems'
http://www.telfordsteamrailway.co.uk/newcss/index.shtml
http://www.telfordsteamrailway.co.uk/newcss/wildlife.shtml
http://www.telfordsteamrailway.co.uk/newcss/usage.shtml
http://www.telfordsteamrailway.co.uk/newcss/websitemap.shtml
http://www.telfordsteamrailway.co.uk/newcss/driving.shtml
http://www.telfordsteamrailway.co.uk/newcss/society.shtml
http://www.telfordsteamrailway.co.uk/newcss/donate.shtml

Allan Smith
Web Manager
Telford Steam Railway

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 39 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Layout problem - advice please

Loooks like you are floating the image on the left hand side and the text is flowing along the right.

You need to stop the text from allowing a float on its left side by using the clear:left property. http://www.w3schools.com/css/pr_class_clear.asp

Create a div around the text and images, which inlcudes the clear property.

Regards
Day

The only way to learn is to do it yourself

allan smith
Offline
Enthusiast
Last seen: 9 years 12 weeks ago
Timezone: GMT+1
Joined: 2004-01-20
Posts: 53
Points: 2

I tried -honest - but no success

I changed the code to as follows - still same effect (IE6)
<div id="tsrmain">
<h1>How Can I Make a Donation?</h1>
<img class="left" src="images/DSC000091.jpg" width="267" height="200" alt="A photograph of diesels in the yard at TSR" title="A photograph of diesels in the yard at TSR">
<p>
Donations can be made to TSR by post or directly into our Bank Account
by Standing Order. For further details or a Standing Order application form, please
<a tabindex="1" href="emailform.htm?2" title="Link to send an email to the Treasurer">contact the Treasurer</a>.

<div class="nofloat">
<p>
<!--#include file="tsrfooter.asp" -->
<br />
Last Updated
<!--#config timefmt="%c" -->
<!--#echo var="LAST_MODIFIED"-->
</p>
</div>
</div>

Allan Smith
Web Manager
Telford Steam Railway

allan smith
Offline
Enthusiast
Last seen: 9 years 12 weeks ago
Timezone: GMT+1
Joined: 2004-01-20
Posts: 53
Points: 2

oops forgot to include CSS code

nofloat class is
.nofloat {
clear: both;
}

Allan Smith
Web Manager
Telford Steam Railway

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 39 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Layout problem - advice please

Instead of having the div around the text put this

<div class="nofloat"></div>

could you also update the link so we can see the changes.

Regards
Day

The only way to learn is to do it yourself

allan smith
Offline
Enthusiast
Last seen: 9 years 12 weeks ago
Timezone: GMT+1
Joined: 2004-01-20
Posts: 53
Points: 2

still no joy

I tried </p><p class=nofloat>
I also tried <div class=nofloat></div>
No change (Tidy insists on removing the empty DIV) - but I ignored that

I will post these two attempts tonight - 18:30 UK time Wednesday
as I cannot ftp from here (I test on my Intranet server)
As
http://www.telfordsteamrailway.co.uk/newcss/donate.shtml
and
http://www.telfordsteamrailway.co.uk/newcss/donate2.shtml

Allan

Allan Smith
Web Manager
Telford Steam Railway

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 39 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Layout problem - advice please

Alan

You have forgotten to actually put

.nofloat {
clear: both;
}

in your CSS sheet Laughing out loud

This
<div class="nofloat"></div>
will then work.

Regards
Day

The only way to learn is to do it yourself

allan smith
Offline
Enthusiast
Last seen: 9 years 12 weeks ago
Timezone: GMT+1
Joined: 2004-01-20
Posts: 53
Points: 2

Oops - I do feel a fool

Well - what can I say - I am an idiot

Its always the obvious that is missed

Thanks

Allan Smith
Web Manager
Telford Steam Railway