vertical alighnemt of images under text

[carolyn]

A hopefully quick question...

I would like to position a graphic in a header bar so that:

- the image is on the left end, centred vertically.
- the text is centred horizontally, and when necessary flows over the image
- the header bar height matches which over is larger, the height of the
image, or the text.

Here is a page that illustrates what I have come up with and a graphic
representation of what I am looking for.

http://www.marenger.com/textWrapping/

If I set the image as a background, the height is determined by the text and
the bottom of the image sometimes gets chopped off.

If the images is floated left, I can't get the text to appear on top of it.
It wraps around instead.

Thanks for your assistance!

Carolyn
--
Carolyn Marenger

[Spartanicus]

carolyn <ca****@marenger.comwrote:

>I would like to position a graphic in a header bar so that:

- the image is on the left end, centred vertically.
- the text is centred horizontally, and when necessary flows over the image
- the header bar height matches which over is larger, the height of the
image, or the text.

Here is a page that illustrates what I have come up with and a graphic
representation of what I am looking for.

http://www.marenger.com/textWrapping/

Real content please.

"My New Blog - A blog about myself and some of the strange things that
happen in my life." is not proper header content. The header content
should be something like "Carolyn's blog" with "A blog about myself and
some of the strange things that happen in my life." as the first
paragraph beneath it.

On my screen it is nigh impossible to read the text when it is displayed
on top of the image.

>If I set the image as a background, the height is determined by the text and
the bottom of the image sometimes gets chopped off.

If the images is floated left, I can't get the text to appear on top of it.
It wraps around instead.

Some of your options are setting the line height for the header text
equal to the height of the image, or use a single cell table with
"valign=middle" and specifying a minimum-height (+ hack for IE).

--
Spartanicus

[carolyn]

Spartanicus wrote:

carolyn <ca****@marenger.comwrote:

>>I would like to position a graphic in a header bar so that:

- the image is on the left end, centred vertically.
- the text is centred horizontally, and when necessary flows over the
image - the header bar height matches which over is larger, the height of
the image, or the text.

Here is a page that illustrates what I have come up with and a graphic
representation of what I am looking for.

http://www.marenger.com/textWrapping/

Real content please.

I have worked out a solution. Thanks for the advice.

"My New Blog - A blog about myself and some of the strange things that
happen in my life." is not proper header content. The header content
should be something like "Carolyn's blog" with "A blog about myself and
some of the strange things that happen in my life." as the first
paragraph beneath it.

Actually, I like the effect of a two to four word 'title' as the <h1>
content, followed by a descriptive sentence as a 'subtitle'. I then set
the style sheet to merge the two lines, so that it ideally appears as one
line. This only works however with short a 'title' and a 'description'.
It loses the effect if it is going to wrap.

On my screen it is nigh impossible to read the text when it is displayed
on top of the image.

I think I have fixed that with the real image I have since created. That
was just a slap together image - 30 seconds or so with the Gimp.

>>If I set the image as a background, the height is determined by the text
and the bottom of the image sometimes gets chopped off.

If the images is floated left, I can't get the text to appear on top of
it. It wraps around instead.

Some of your options are setting the line height for the header text
equal to the height of the image, or use a single cell table with
"valign=middle" and specifying a minimum-height (+ hack for IE).

I don't use tables for layout, but I will remember the line height.

Thanks again!

Carolyn
--
Carolyn Marenger