Overlaying div's while matching their baselines?
in [CSS]
|
Prev: CSS Styles speziell für Webkit (Safari, Opera)
Next: How to use RELATIVE (!) paths to other html pages and pictures?
From: Tuxedo on 20 Jan 2010 15:02 I have a div containing an image 300 pixels in height: <div> <img src="image.jpg"> </div> So the height of the div also becomes 300px. 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. Is this possible? I mean overlaying the second div and for the bottom of it to hit exactly the baseline of the image div, not knowing the exact height of the second div and not resorting to making the image a background. Would for example the second div be nested in the image div, something like: <div> <img src="image.jpg"> <div> Some text, which may become one or more lines, depending on font size and length of text, so height of this part is not known in advance. This is an area for image caption or description, to appear over the image, not below. </div> </div> But of course, the above would simply place the text part below the image. Any tips how this can be done would be much appreciated, if it's possible? Thanks, Tuxedo
From: dorayme on 20 Jan 2010 15:28 In article <hj7nfv$ghq$00$1(a)news.t-online.com>, Tuxedo <tuxedo(a)mailinator.com> wrote: > I have a div containing an image 300 pixels in height: > > <div> > <img src="image.jpg"> > </div> > > So the height of the div also becomes 300px. > > 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. > > Is this possible? I mean overlaying the second div and for the bottom of it > to hit exactly the baseline of the image div, not knowing the exact height > of the second div and not resorting to making the image a background. > > Would for example the second div be nested in the image div, something like: > > <div> > <img src="image.jpg"> > > <div> > Some text, which may become one or more lines, depending on font size and > length of text, so height of this part is not known in advance. This is an > area for image caption or description, to appear over the image, not below. > </div> > > </div> > > But of course, the above would simply place the text part below the image. > > Any tips how this can be done would be much appreciated, if it's possible? > Here is one way: <!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> <div> <img style="display: block" src="pics/crimson.png" width="600" height="300" alt=""><span style="position: relative; bottom: 1.5em;">Text on picture</span> </div> </body> </html> -- dorayme
From: Tuxedo on 20 Jan 2010 17:27 dorayme wrote: [...] > Here is one way: > > <!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> > <div> > <img style="display: block" src="pics/crimson.png" width="600" > height="300" alt=""><span style="position: relative; bottom: > 1.5em;">Text on picture</span> > </div> > </body> > </html> > Thanks, it works, although not ideally; for some reason the bottom line of the text span doesn't exactly hit the base line of the div with the image, as can be seen placing a border around the span part: <span style="position: relative; bottom: 1.5em; border: 1px solid lime"> The gap is a few pixels only, between the bottom of the text and the end of the image. Perhaps the 'em' measure and the pixel measure by the image is a bit hard combine for exact results? In any case, I tried the following which works in that the bottom lines are matching exactly: <div style="position: relative; height:300px; width: 400px;"> <div style="position: absolute; bottom:0; color: #ffffff; width: 300px;"> Some caption or image description text which may flow on several lines.... </div> <img src="image.jpg" width="400" height="300"> </div> The width of the containing div is just there to ensure that the text does not flow beyond the image. I would also like to add a semi-transparent background between the text and image, darkening the image a bit where the text overlaps. So I applied a black background and added the following opacity for IE and other browsers: ..transparent { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: 0.50; } <div style="position: relative; height:300px; width: 400px;"> <div class="transparent" style="position: absolute; bottom:0; color: #ffffff; background: #000000; width: 400px;"> Some caption or image description text which may flow on several lines.... </div> <img src="image.jpg" width="400" height="300"> </div> Now the image shows through the black background div and the text remains visiable. However, the text also becomes semi-transparent, which isn't perfect. It should really only be the black background which should be semi-transparent, not the white text. The text shuould be clear and sharp. So I found a workaround to this little problem by addding an extra div without transparency that contains the white text and no background over the semi-transparent div with the black background. This works fine in both the IE in and Firefox versions I tested on: <div style="position: relative; height:300px; width: 400px;"> <div style="position:absolute; bottom:0; color: #ffffff; width: 400px;"> Some caption or image description text which may flow on several lines.... </div> <div class="transparent" style="position: absolute; bottom:0; color: #ffffff; background: #000000; width: 400px;"> Some caption or image description text which may flow on several lines.... </div> <img src="image.jpg" width="400" height="300"> </div> However, the above code sucks in that the caption is repeated in separate div's only for the purpose of making the black background and text div's scale to exactly the same size as should be determined by the content flow. There must exist a better way! Any ideas anyone? Thanks, Tuxedo
From: Tuxedo on 20 Jan 2010 18:04 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... [...]
From: dorayme on 20 Jan 2010 18:36
In article <hj801a$mdq$03$1(a)news.t-online.com>, Tuxedo <tuxedo(a)mailinator.com> wrote: > dorayme wrote: > > [...] > > > Here is one way: > > > > <!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> > > <div> > > <img style="display: block" src="pics/crimson.png" width="600" > > height="300" alt=""><span style="position: relative; bottom: > > 1.5em;">Text on picture</span> > > </div> > > </body> > > </html> > > > > > Thanks, it works, although not ideally; 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> -- dorayme |