Prev: CSS Styles speziell für Webkit (Safari, Opera)
Next: How to use RELATIVE (!) paths to other html pages and pictures?
From: jeff on 21 Jan 2010 17:47
Tuxedo wrote:
> 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!

Inline block, with a negative margin of the container width:

<div style="display: inline-block;vertical-align: bottom;width: 200px;">

something here

</div>

<div style="display: inline-block;vertical-align: bottom;width:
200px;margin-left: -200px">

something else here

</div>

You'll have to use spans in IE6.

Jeff

Jeff
>
> Tuxedo
>
>
>
>
>
>
>
From: Ben C on 29 Jan 2010 03:34
On 2010-01-21, Tuxedo <tuxedo(a)mailinator.com> wrote:
> 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.).

When you set position to relative, absolute or fixed, that element comes
forwards in the stack in front of other non-positioned things, even if
they appear after it in the markup. Floats are also brought forward but
not by as much.

You can set z-index, but note that it only applies to things that are
"positioned" (relative, absolute or fixed).

So the easiest fix in your case is probably to put position: relative
on a few of the other elements around there. It won't affect their
position in 2D (assuming you didn't set top, left, etc. which you
shouldn't have done, since they wouldn't have done anything) but will
bring everything up to the same stacking level.

Then all the relative things will stack in the same order as they would
have done if none of them had been relative (this is pre-order of the
document tree).

If that doesn't quite do the trick then you can use z-index to make any
final tweaks.
From: Ben C on 29 Jan 2010 03:48
On 2010-01-20, Tuxedo <tuxedo(a)mailinator.com> wrote:
>
> I wrote:
>
> [...]
>
>
>> .transparent {
>> -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
>> filter: alpha(opacity=50);
>> opacity: 0.50;
>> }
>
> However, the transparency doesn't work at all on Konqueror. Stupid browsers
> for not agreeing on one standard instead of different propritary standards,
> defined differently for different brands as well as version browsers etc...

Try -webkit-opacity
First  |  Prev  | 
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?