Replacing tables (again)

@gizmoJul 15.2003

I want to rid my site of tables where used for layout. The main culprits are where I have pages of thumbnail pictures 150px wide and around 100 to 200 high, left aligned and with a paragraph or two of text floating to the right of each. I then want a 1px blue border around each paragraph/picture which will also butt up against the next one.
My problem is controlling this border. On my test page, it goes around the text ok by containing it all in a <div>, except that it ignores the picture if the text is smaller, in addition at the end of each block of text there is a right-aligned reference number. This is ignored by the border (I have tried DIV, SPAN and P with no success here).
Unless someone can suggest what I am doing wrong, I shall have to resort to a 1px high <HR> as a divider and possibly putting a border around the whole lot.

to post a comment

CSS

15 Comments(s) _↴

@DaveSWJul 15.2003 — #I'm not exactly certain without code, but

try using (untested)

<div style="border:1px solid #009900;>

<img style="float:left">

<p>contents sitting right</p>

<p style="clear:left;"></p>

</div>

[i]edit: missed some quotes out. corrected.[/i]

@gizmoauthorJul 15.2003 — #That's essentially what I have !

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">

<HTML>

<HEAD>

<TITLE>Document Title</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

<STYLE type="text/css">

<!--

.band { clear: both;

border: blue 1px solid;

padding: 0px, 0px, 10px, 0px;

text-align: justify;

}

.band IMG {
   float: left;
   margin-left: 0;
   margin-right: 15px;
   margin-bottom: 5px;

}

.ref {
   float: right;
   font-weight: bold;
   white-space: nowrap;
   clear: both;

}

-->

</STYLE>

</HEAD>

<BODY>

<DIV class="band">

<IMG SRC="jpgs/ani010a.jpg" ALT="x" WIDTH=150 HEIGHT=99>

<P>A stone house with character comprising: hall, kitchen, living room with fireplace, recreation room, office/study, laundry room, w.c. 4 bedrooms, shower room, w.c., bathroom, attic above. Storage shed, cellar, 2 garages.</P>

<P class="clr ref">Ref: XY 01.</P>

</DIV>

<DIV class="band">

<IMG SRC="jpgs/yv1885.jpg" ALT="x" WIDTH=150 HEIGHT=99>

<P>House with 10 rooms on two floors. 6 bedrooms; reception. 2 garages; grounds of 5 hectares. Bordered by the river, very well appointed property comprising 4 pond houses; woods.</P>

<P class="ref">Ref: YV 18.</P>

</DIV>

<DIV class="band">

<IMG SRC="jpgs/yv4001.jpg" ALT="A country house with pool" WIDTH=150 HEIGHT=105>

<P>A country house near the sea having 14 main rooms, including 5 bedrooms, billiard room, swimming pool, sauna. Oil heating.</P>

<P class="ref">Ref: YZ 40.</P>

</DIV>

</BODY>

</HTML>

and the border cuts the Ref text

@DaveSWJul 15.2003 — #I've made some very minor changes. Is this what you want?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">

<HTML>

<HEAD>

<TITLE>Document Title</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

<STYLE type="text/css">



</STYLE>

</HEAD>

<BODY>

<DIV class="band">

<IMG SRC="jpgs/ani010a.jpg" ALT="x" WIDTH=150 HEIGHT=99>

<P>A stone house with character comprising: hall, kitchen, living room with fireplace, recreation room, office/study, laundry room, w.c. 4 bedrooms, shower room, w.c., bathroom, attic above. Storage shed, cellar, 2 garages.</P>

<P class="clr ref">Ref: XY 01.</P>

</DIV>

<DIV class="band">

<IMG SRC="jpgs/yv1885.jpg" ALT="x" WIDTH=150 HEIGHT=99>

<P>House with 10 rooms on two floors. 6 bedrooms; reception. 2 garages; grounds of 5 hectares. Bordered by the river, very well appointed property comprising 4 pond houses; woods.</P>

<P class="ref">Ref: YV 18.</P>

</DIV>

<DIV class="band">

<IMG SRC="jpgs/yv4001.jpg" ALT="A country house with pool" WIDTH=150 HEIGHT=105>

<P>A country house near the sea having 14 main rooms, including 5 bedrooms, billiard room, swimming pool, sauna. Oil heating.</P>

<P class="ref">Ref: YZ 40.</P>

</DIV>

</BODY>

</HTML>

@gizmoauthorJul 15.2003 — #Seems a closer result than I had. The text-align: right; got lost in simplifying the test styles. So it's more or less there. I'm off to bed now, (I'm in the UK ? ) and will pick it up tomorrow. Thanks

@DaveSWJul 15.2003 — #[i]Originally posted by gizmo [/i]

[B]I'm in the UK ? [/B][/QUOTE]

So am I. weather hot where you are????

@gizmoauthorJul 16.2003 — #Never thought to look at your location! Several computer networks I know of have had their servers go down in the heat. ? Damn, my milk's gone off :mad:

Now for the quirks.

1. The padding should have been: padding: 0px, 10px, 0px, 0px; to give a space from the rh edge. Ok in IE5.5, no effect in Mozilla.

2. IE renders the border with a gap in each on the rhs. On the last one the border also closes at the start of the gap leaving 3 horizontal parts to the box. To test if this was a 'last one' effect I copied and pasted this to make a fourth block. Block 3 still has the problem, block 4 ok! Presumably an IE CSS bug.

3. The boxes do not as yet butt up against each other.

4. The "Ref" text is about 3 lines down. This seems to be an absolute distance, the number of lines being text size dependent. In the <table> version I could easily set this to one or two lines down, whichever was aesthetically pleasing for the end of text/bottom of pic relationship.

So near, yet so far...

@DaveSWJul 16.2003 — #OK I'm not certain what you mean by some of them but I'll have a look.

3) I think you're refering to the gap I inserted. Remove margin-top:10px; from the .band css

4) Ref has clear both turned on. it will always be below the line of the image, or the text if that's longer. To fix, it, add it to the p text with as many <br> tags as you want. Then .ref css should be:

.ref {

text-align: right;

font-weight: bold;

white-space: nowrap;

}

@gizmoauthorJul 16.2003 — #OK Dave, we're getting there! By implementing the latest suggestions, it's more or less ok, except for some side effects. I have moved the padding to a new class called ".ref" to apply only to the text (i.e. not the IMG) and in IE I get exactly what I am after in the test page.?

For some reason Mozilla ignores the padding (or should it be 'margin'? - I always confuse the two). The side effect occurs if the picture is tall, say 200px, and the descriptive text brief. Then the text no longer exceeds the size of the picture and the border intersects it. If I specify a border height as that of the picture there would be a resizing problem, unless I specified a fixed text size (which Mozilla over-rides) and fix the height at the lowest screen resolution.

@DaveSWJul 16.2003 — #you could try an empty span at the bottom of each div with clear both in it. This would however insert an unwanted line...

As regards margins, try it on the body tag: margin-left:10px; etc.

Actually rereading your post I had a little idea. Instead of letting it flow, perhaps we could use overflow:auto, specify height and width of the divs and fix it so it gets scrollbars... that could look quite neat.

@gizmoauthorJul 16.2003 — #To see the end result that I am aiming towards, have a look at [URL=http://www.circlesestateagents.com/frenchproperties/]www.circlesestateagents.com/frenchproperties/[/URL] and click on the first price band. Notice the size variation of pictures and text. Your scrollbars suggestion will be essential.

Sitewise there are some 14 or so pages to convert tables to CSS.

I will then have to rwrite my Visual Basic program which scans the html and updates the currency conversion automatically (but that's another story).

@DaveSWJul 17.2003 — #If you want to see the scrollbars idea just set .band to have height:xxpx;

overflow:auto;

But it doesn't print so well...

Actually, looking at the page, I'm not certain if it's really tabular data.

Other than that, how is it coming along?

@gizmoauthorJul 18.2003 — #I had to spend time on preparing new content yesterday, so this matter was put on hold for the day.

When the pages in question were first written, I only understood HTML. There was no CSS on the site (until HTML Tidy put some in) and the tables had two columns, one for the picture, one for the text. As things evolved I realised that some code could be stripped out by reducing the columns to one. As a result it probably isn't tabular data and the <table> and <TR>, <TD>'s could be removed completely. However, aesthetically it needs a divider and I will experiment with <HR> to see if I can get a pleasing effect without the 'border' complications.

@DaveSWJul 18.2003 — #try border-bottom: on your p tag if all else fails. you can then use a border around a containing div

@gizmoauthorJul 18.2003 — #Nice try, Dave, but unfortunately that would relate the border to the text, which as before, if there were not sufficient text alongside the picture, causes the border to interect the said picture.?

@gizmoauthorJul 18.2003 — #In fact taking the line of least resistance:

[COLOR=firebrick]HR { clear: both; height: 1px; color: blue; }[/COLOR] looks promising.

Also in #CSS _↴

Margin-right not working help with styling links please Relative position 2 column

Success!

Help @gizmo spread the word by sharing this article on Twitter...

Tweet This

Replacing tables (again)

15 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Replacing tables (again)

15 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #CSS _↴