Text and images in irregular shaped column(s)

[Woodmon]

I want to flow text in an "irregular" column on the left and place a
large image at the top of an "irregular" column to the right. Then after
the bottom of the large image I want the text column on the left to
expand part way to the right, but not all the way to the right, as I want
a smaller image on the right. Then this will continue to the bottom of
the page. The text needs to flow down in the left column. And the right
edge of the photos need to line up on the right edge of the page.


txttxt --------
txttxt | lg img |
txttxt --------
txttxttxtxt
txttxttxtxt ----
txttxttxtxt |img |
txttxttxtxt ----
txttxttxtxt
txttxttxtxt ----
txttxttxtxt |img |
txttxttxtxt ----
txttxttxtxt


I previously attempted a nested table format but could not achieve
consistent spacing between the right edge of the text block and the left
edge of the images. Nor could I achieve consistent vertical spacing
bwtween the images.

I reverted to formatting the page with the text and images all in one
single table column <td> and with the images aligned right and with
vspace/hspace attributes (HTML is below). However the text flows beneath
the images to the right margin when there is too much text and/or font
size is increased. (this was expected but I wish to avoid).

Is this particualr layout a candiate for a "float" similar to MP's
situation posted on Tuesday? I will do some research at w3.org but any
pointers are appreciated. BTW this project is not yet on a public server
so no URL yet available.


<td class="override" align="top">

<img hspace="15" vspace="15" align="right" src="images/bigphoto.jpg">

BlahBLah BlahBLahBlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah.
<br />
<br />

<a href="/images/image-popup2.jpg" title="blah" alt="blah">
<img hspace="15" vspace="5" align="right" src="images/small-
image2.jpg" /></a>

BlahBLah BlahBLahBlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah.
<br />
<br />

<a href="/images/image-popup3.jpg" title="blah" alt="blah">
<img hspace="15" vspace="5" align="right" src="images/small-
image3.jpg" /></a>

BlahBLah BlahBLahBlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah.
<br />
<br />

</td>

Thanks,
Woodmon

 

[Woodmon]

Woodmon <mr.mediamonATgmail.com> wrote in

<td class="override" align="top">

Oops. sSould be 'valign' above.

W3C Recommendations on Tables at w3.org shows 'colgroup' and 'col'
elements. Could this be part of solution?


Below is a better picture of what I'm attempting to do.

T0 = the flowing paragraphs of text.
X1 = extra wide image.
X2 - X5 = individual images (each narrower thant X1) .

--------------------
| T0 | X1 | X1 |
--------------------
| T0 | T0 | X2 |
--------------------
| T0 | T0 | X3 |
--------------------
| T0 | T0 | X4 |
--------------------
| T0 | T0 | X5 |
--------------------


I hope this is comprehensible. I can do basic tables but when it becomes
more complex I only achieve a headache. Or should this be setup in CSS?
This is a one shot deal so I didn't think so.

Woodmon

 

[Barbara de Zoete]

txttxt --------
txttxt | lg img |
txttxt --------
txttxttxtxt
txttxttxtxt ----
txttxttxtxt |img |
txttxttxtxt ----
txttxttxtxt
txttxttxtxt ----
txttxttxtxt |img |
txttxttxtxt ----
txttxttxtxt

<URL:http://home.wanadoo.nl/b.de.zoete/_test/woodmon.test.html>

Look at the source for markup and styles.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[mbstevens]

I want to flow text in an "irregular" column on the left and place a
large image at the top of an "irregular" column to the right. Then after
the bottom of the large image I want the text column on the left to
expand part way to the right, but not all the way to the right, as I want
a smaller image on the right. Then this will continue to the bottom of
the page. The text needs to flow down in the left column. And the right
edge of the photos need to line up on the right edge of the page.

http://www.meyerweb.com/eric/css/edge/raggedfloat/demo.html
.... not exactly what you want, but the knowledge should help.

 

[Beauregard T. Shagnasty]

W3C Recommendations on Tables at w3.org shows 'colgroup' and 'col'
elements. Could this be part of solution?

Below is a better picture of what I'm attempting to do.

T0 = the flowing paragraphs of text.
X1 = extra wide image.
X2 - X5 = individual images (each narrower thant X1) .

I hope this is comprehensible. I can do basic tables but when it becomes
more complex I only achieve a headache. Or should this be setup in CSS?
This is a one shot deal so I didn't think so.

CSS, and it's easy.

http://k75s.home.att.net/images.html

 

[Beauregard T. Shagnasty]

<URL:http://home.wanadoo.nl/b.de.zoete/_test/woodmon.test.html>

"I use div's to simulate the images, because I don't want to upload any
images. It is all about the example, right? So here goes..."

Heh, I used images already on my server. And, with images (<img>) being
an inline element, should be within the paragraphs, not between them.

We both had the nearly identical thought, within minutes. The "secret"
of course is the "float:right;"

 

[Barbara de Zoete]

"I use div's to simulate the images, because I don't want to upload any
images. It is all about the example, right? So here goes..."

Heh, I used images already on my server.

I was tempted to do that.

And, with images (<img>) being
an inline element, should be within the paragraphs, not between them.

You are right of course. But if I put a div inside my paragraph, it terminates
the paragraph, thinking I closed it. So I solved that by putting the div's
outside the paragraphs.
It is a valid reminder for the OP though, not putting the images all by
themselves in the body. They should be inside some block level element, and if
paragraphs are there, why not use them.

We both had the nearly identical thought, within minutes. The "secret"
of course is the "float:right;"

I like to see 'my' idea of solving practical problem is the same as someone
elses. It gives me a sense of 'I'm starting to learn, I'm getting there'.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[Stephen Poley]

I want to flow text in an "irregular" column on the left and place a
large image at the top of an "irregular" column to the right. Then after
the bottom of the large image I want the text column on the left to
expand part way to the right, but not all the way to the right, as I want
a smaller image on the right. Then this will continue to the bottom of
the page. The text needs to flow down in the left column. And the right
edge of the photos need to line up on the right edge of the page.


txttxt --------
txttxt | lg img |
txttxt --------
txttxttxtxt
txttxttxtxt ----
txttxttxtxt |img |
txttxttxtxt ----
txttxttxtxt
txttxttxtxt ----
txttxttxtxt |img |
txttxttxtxt ----
txttxttxtxt

I don't think it's exactly what you're asking for, but see if the layout
on http://www.xs4all.nl/~sbpoley/trip-reports/tunisia-may05.html would
be acceptable for you. (When viewed in a standards-compliant browser.)
It uses max-width and float. (There are max-width hacks for IE if you
must.)

 

[kchayka]

You are right of course. But if I put a div inside my paragraph, it terminates
the paragraph, thinking I closed it. So I solved that by putting the div's
outside the paragraphs.

Span is an inline element and probably would have more suitable than div
as an image replacement.

 

[Barbara de Zoete]

Span is an inline element and probably would have more suitable than div
as an image replacement.

You're absolutely right. I changed it now, so the span represents the image. The
other thing I did was 'cluster' the fake images all at the top of the markup
inside a containing div, so that the text can't get between the images if they
get too far apart vertically.
From this mock-up and the remarks on the first version, I suppose the OP can
find his way.



--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[Barbara de Zoete]

The only part of the post I understood. The rest of the post was kind
of like the adults on Charlie Brown.

lol

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[Stan McCann]

BlahBLah BlahBLahBlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah BlahBLah
BlahBLah BlahBLah BlahBLah. <br />

The only part of the post I understood. The rest of the post was kind
of like the adults on Charlie Brown.

 

[Woodmon]

You're absolutely right. I changed it now, so the span represents the
image. The other thing I did was 'cluster' the fake images all at the
top of the markup inside a containing div, so that the text can't get
between the images if they get too far apart vertically.
From this mock-up and the remarks on the first version, I suppose the
OP can
find his way.

Appreciate the recommendations and pointers from everyone. I implemented
Barbara's suggestions into my layout. A big help. Thanks so much Barbara, I
like the idea of clustering rhe images in the div.

Just uploaded files to the web so you can now see.
http;//www.bigbubblers.com/

(but not ready to go public with it...still lots of clean up work to do,
optimizing images, putting up additional contnet, flash video clips, new
display head/logo, polishing up forum and gallery, etc).

To my questions...

1. I just ran the home page thru W3 validator and that about killed me.
After lots of repair work the page validated to HTML 4.01 Transitional.
(That is, W3 ssays "tentaivlely passed validation"... are there other
things I have to do so is no longer "tentative"?

2. Also passed CSS2 validation.

3. When validating to strict HTML 4.01 the pahe is still failing due to my
implmentation of target="_new" to launch a new window when clicking on a
particular link. Any recommends?

4. Also not validating to strict HTML 4.01 due to the HTML for the
"moonphase" script. Should I contact vendor to recommend they validate the
HTML they give out?

5. Not sure if I should validate page to XHTML 1.0. Any need?

6. Once done with the home page will distribute changes to other pages and
validate.

7. My final concern regards the flowing text on the home page when it
extends past the last image on the right, I observe the text flows all te
way to the right edge of the page margin when the text is too long (you can
see the effect by increasing text size in the browser text). This is not a
real issue when multiple lines of text flow below the image, but it looks a
bit funky when only one or two lines flow down there all by themselves. .
Is there a method to keep text in it's 'column' or any other recommends?

8. Wondering about the following javascript in Barbara's page source. Any
thoughts what this is for?

<script type='text/javascript'>
<!--
if (top != self) top.location.href = self.location.href;
// -->
</script>


9. My later plan is to adapt the site structure to current HTML/CSS
standards e.g. rid of the nested tables where possible. But at the same
time I'm finding my old school skill set needs a bit of updating... so lots
of side reading w3.org docs ahead of me.

Thanks again for everyones feedback.

Woodmon

 

[Barbara de Zoete]

3. When validating to strict HTML 4.01 the pahe is still failing due to my
implmentation of target="_new" to launch a new window when clicking on a
particular link. Any recommends?

Just leave it out. Your visitor will probably know best whether or not s/he
wants a link to open in a new page.

5. Not sure if I should validate page to XHTML 1.0. Any need?

If you are thinking about upgrading your markup, going for valid html4.01 strict
is good already. I don't see any use (for this page/site) to go to xhtml.

7. My final concern regards the flowing text on the home page when it
extends past the last image on the right, I observe the text flows all te
way to the right edge of the page margin when the text is too long

Is there a method to keep text in it's 'column' or any other recommends?

You know how wide your images will be, right? I would put a padding on the body
of the page, just a little wider than those images. Then give the images with
the stylesheet a negative margin-right, so they fit in the space on the right of
the page, you just created with the padding on the body.

Like this (use values suited for your situation):

body {
padding-right:17em; }

img {
width:15em;
margin-right:-16em; }

8. Wondering about the following javascript in Barbara's page source. Any
thoughts what this is for?

<script type='text/javascript'>
<!--
if (top != self) top.location.href = self.location.href;
// -->
</script>

Ah, yes. Only recently I added that to all my pages and my template. I noticed
that some sites 'frame' some of my pages. I don't like that.
This small script makes my pages 'escape' from someones frameset, by putting the
page back in 'top', as if it was linked to with target=_top. Unfortunately only
works when browser is javascript enabled, but that is true for the vast
majority. So most of the times it will work.


--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[Woodmon]

Just leave it out. Your visitor will probably know best whether or not
s/he wants a link to open in a new page.

So is target="_new" or target="_blank" completely deprecated? Any
replacement code that works well in both IE an Firefox?

My friend who I am helping out with this site desires to launch a new
window (or preferably a tab) in his browser when clicking on a link to
the gallery or the forum (neither of which is integrated into his
website) or when clicking external links in his resources page.

Myself I know how to use the back button and/or use Shift-click or
Control-click.

give the images with the stylesheet a negative margin-right, so they
fit in the space on the right of the page, you just created with the
padding on the body.

Like this ... {snip}

I'll have to test this out. Thanks for the example.


You're full of all sorts of good ideas! Thanks again Barbara,


BTW I just put up a Flash clip on the site (lots more coming soon). So
now I just need get the body text flush to the top margin, even with the
photo image on the left and the vid clip on the right. And want to have
the broswer window open at an 820 pixel width or so, I would be happy
with these fixes, even if the site still looks like a website designed
in the 70's ;-)

Woodmon

 

[Alan J. Flavell]

So is target="_new" or target="_blank" completely deprecated?

In a web context, "deprecated" is a technical term. You find the
answer to questions about it by looking it up at the W3C, not by
asking usenet's opinion. For example for HTML/4.01:
http://www.w3.org/TR/html401/index/attributes.html

Though some find it odd that although it's missing from Strict, it's
not actually deprecated.

Any replacement code that works well in both IE an Firefox?

Taking it out is the generally user-friendly thing to do. Browser
control should be in the hands of the user.

My friend who I am helping out with this site desires to launch a new
window (or preferably a tab) in his browser

Then teach him how to use his browser's feature for doing that (e.g
right-click, "open link in new tab", seems intuitive enough, if they
can't remember CTRL/click). Leave other readers free to make their
own choices.

have fun

 

[Robi]

Woodmon wrote in message [...]

3. When validating to strict HTML 4.01 the pahe is still failing due to my
implmentation of target="_new" to launch a new window when clicking on a
particular link. Any recommends?

Don't do that, it's noy user friendly.
I always hate it, when I click on a link and a new window pops up.
Lave the target= away.

[...]

7. My final concern regards the flowing text on the home page when it
extends past the last image on the right, I observe the text flows all te
way to the right edge of the page margin when the text is too long (you can
see the effect by increasing text size in the browser text). This is not a
real issue when multiple lines of text flow below the image, but it looks a
bit funky when only one or two lines flow down there all by themselves. .
Is there a method to keep text in it's 'column' or any other recommends?

You are looking for something like this:
http://glish.com/css/7.asp

8. Wondering about the following javascript in Barbara's page source. Any
thoughts what this is for?

<script type='text/javascript'>
<!--
if (top != self) top.location.href = self.location.href;
// -->
</script>

that gets you out of other people's frames.