Prev: CSS Styles speziell für Webkit (Safari, Opera)
Next: How to use RELATIVE (!) paths to other html pages and pictures?
From: mscir on 21 Jan 2010 07:31
Tuxedo wrote:
> I have a div containing an image 300 pixels in height: ....
> I would like to place another div containing some text over the image, so
> that its bottom line is positioned exactly at the bottom line of the image
> and that the two div's therefore remain 300 pixels in total height.

<snip>

What about making the image the background image of the div and just
positioning the text using css?

--- news://freenews.netfront.net/ - complaints: news(a)netfront.net ---
From: Tuxedo on 21 Jan 2010 08:19
mscir wrote:

[...]

> What about making the image the background image of the div and just
> positioning the text using css?

I avoid background images, partly because browser don't print them by
default and partly because I blend background and foreground images when
swapping images for a smooth transition effect, like typical Flash
animations, and for this to work, I must use a non-background image.

Tuxedo

From: Tuxedo on 21 Jan 2010 08:22
dorayme wrote:

[...]

> I had not thought to be ideal but just perhaps acceptable. You
> can tweak the displacement of 1.5em and set line-height to fix
> things...
>
> Let's see now, how about this for an improvement:
>
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <meta http-equiv="content-type" content="text/html;
> charset=utf-8">
> <title>test page</title>
> </head>
> <body style="line-height: 1.3;">
> <div>
> <img style="display: block" src="pics/crimson.png" width="600"
> height="300" alt=""><span style="position: relative; bottom:
> 1.3em; ">Text on picture</span>
> </div>
> </body>
> </html>
>

Setting the line height in the body tag as you suggest works perfectly,
very useful to know. The version I also did with the double div's works as
well, so now I can use either method depending on the situation.

Thanks for posting your tip!

Tuxedo

From: Tuxedo on 21 Jan 2010 14:17
I wrote:

[..]

> Setting the line height in the body tag as you suggest works perfectly,
> very useful to know. The version I also did with the double div's works as
> well, so now I can use either method depending on the situation.

After some more testing I found that neither methods work as I had intended:

My double div's solution caused a problem in that a separate navigation
drop menu that's meant to flow over the image area if needed slip below the
image, causing a site navigation problem.

This appears to happen due to the 'absolute' and 'relative' values in the
position attributes, which somehow mucks with the z-index order or the
otherwise normal document flow. (I tried controlling the z-index of both
the image div and the navigation menu, setting them in front and behind,
but without success.).

The problem is that the relative' value in <div style="position: relative;
width: 400px; height:300px;"> is needed to ensure that the next div with
the text which has the absolute value hits the bottom:
<div style="position:absolute; bottom:0; color: #ffffff;">
.... this works as intended regardless of number of lines, so that if more
than one line is needed, the text expands upwards in the block and over the
image. Of course, the limitation is that the text should not require more
than the actual image area, which it never will unless the user has
massively huge font size. The unwanted side effect of the relative and
absolute settings is as mentioned the document flow or z-index.

The method posted by 'dorayme' has a different issue:

<body style="line-height: 1.3;">
<img style="display: block" src="pics/crimson.png" width="600"
height="300" alt=""><span style="position: relative; bottom:
1.3em; ">Text on picture</span>

This works nicely but unfortunately only when there's one line in the "Text
on picture" area. If there is more text that requires several lines, the
additional lines will flow beyond or below the image area.

The following code works as intended in terms of simply placing and
containing the text parts correctly within the designated area, but not
without interfering with other parts of the page, such as the drop down
navigation menu that should as mentioned appear in front of other items:

<div style="border:1px solid black; position: relative; height: 300px;
width: 400px;">

<div class="transparent" style="position: absolute; bottom:0; width: 400px;
color: #ffffff; background: #000000;">
Some caption or image description text which may or may not flow across
several lines and that should appear over the image with the bottom of its
div sitting exactly at the bottom of the image, 300 pixels down.
</div>

<img src="image.jpg" width="400" height="300">

</div>

I cannot use a background image, so are there any other ways to make a div
or span or other area hit the bottom of the image, as if the text itself
was simply placed in a table cell with a valign=bottom over a background
image? In other words, as if emulating the behaviour of the following but
using an inline image:

<table><tr>
<td height="300" background="image.jpg" valign="bottom">
Some caption text, one or more lines, expanding upwards as may be required
by the users individual browser font size settings, as if simply filling up
a glass of water but not with more water than the glass can contain....
</td></tr>
</table>

Thanks for any tips!

Tuxedo







From: dorayme on 21 Jan 2010 17:16
In article <hj9kec$vqb$03$2(a)news.t-online.com>,
Tuxedo <tuxedo(a)mailinator.com> wrote:

> dorayme wrote:
>
> [...]
>
> > I had not thought to be ideal but just perhaps acceptable. You
> > can tweak the displacement of 1.5em and set line-height to fix
> > things...
> >
> > Let's see now, how about this for an improvement:
> >
> >
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> > "http://www.w3.org/TR/html4/strict.dtd">
> > <html>
> > <head>
> > <meta http-equiv="content-type" content="text/html;
> > charset=utf-8">
> > <title>test page</title>
> > </head>
> > <body style="line-height: 1.3;">
> > <div>
> > <img style="display: block" src="pics/crimson.png" width="600"
> > height="300" alt=""><span style="position: relative; bottom:
> > 1.3em; ">Text on picture</span>
> > </div>
> > </body>
> > </html>
> >
>
> Setting the line height in the body tag as you suggest works perfectly,
> very useful to know. The version I also did with the double div's works as
> well, so now I can use either method depending on the situation.
>
> Thanks for posting your tip!
>

You can put the line-height on the container div too, probably
safer so as not to affect other sibling elements. I had in mind
only that you would be wanting some sort of short caption. If you
are getting into a situation where there is so much text that it
is going to wrap within 600px and you want it to stay on the
picture, perhaps simplest is to stick it on the picture in
Photoshop or whatever program you have, err on the side of larger
text and leave it at that or design differently and have the text
outside the picture in many of the standard and familiar ways.

--
dorayme
First  |  Prev  |  Next  |  Last
Pages: 1 2 3
Prev: CSS Styles speziell für Webkit (Safari, Opera)
Next: How to use RELATIVE (!) paths to other html pages and pictures?