Re: [css-d] row of images (varying heights) should align at bottom of div
Beate De Nijs wrote:
I've got several thumbnail images of different height (and widths) in
a horizontal row.
they should all align at the bottom of their thumbnailcontainer which
has a fixed height.
I've put them in a div id #thumbnailrow and tried with these settings:
#thumbnailrow { text-align: center; width: 828px; height: 88px;
margin: 2px auto 0; }
#thumbnailrow img { bottom: 0; margin-right: 4px; margin-bottom: 0;
margin-left: 4px; }
#thumbnailrow a:hover { border-bottom: 2px dotted #cacaca; }
Knowing what you usually do, something like this ?
http://dev.l-c-n.com/_temp/bottom-img.php
Works in all browsers, I think, although I can't check IE 6 atm.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] row of images (varying heights) should align at bottom of div
Thanks Philippe,
this would work.
but it would mean to set up an id for each image in that row and
define it's size?
before your reply arrived I had tried a different - still no ascetic,
so rather a lousy workaround:
I set up a class .topmarginforbottomalign class and apply it to an
image to achieve the height of the thumbnailrow ...
(as I've reduced the thumbnail heigths to three different ones, I
have to set up 3 of such classes)
the only other - also lousy - possibilities I could think of would be:
- to create - ikk! - a one-cell-table with bottom alignment where
all images would go into
(which I want to avoid, of course. but wouldn't this be somewhat more
logical/cleaner than setting up certain marging-classes and bunches
of codelines for img id's?)
- to put a transparent gif of width 1px and the height of the
thumbnailrow at the start and/or end of the thumbnailrow.
(those could be removed easily via findreplace throughout the site
in case there will be a nice working css definition for this issue.
(like: align: bottom, or content-align: bottom, )
bye,
beate
Am 20.10.2006 um 13:51 schrieb Philippe Wittenbergh:
Beate De Nijs wrote:
I've got several thumbnail images of different height (and widths) in
a horizontal row.
they should all align at the bottom of their thumbnailcontainer which
has a fixed height.
I've put them in a div id #thumbnailrow and tried with these
settings:
#thumbnailrow { text-align: center; width: 828px; height: 88px;
margin: 2px auto 0; }
#thumbnailrow img { bottom: 0; margin-right: 4px; margin-bottom: 0;
margin-left: 4px; }
#thumbnailrow a:hover { border-bottom: 2px dotted #cacaca; }
Knowing what you usually do, something like this ?
http://dev.l-c-n.com/_temp/bottom-img.php
Works in all browsers, I think, although I can't check IE 6 atm.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] row of images (varying heights) should align at bottom of div
Hello,
I've got several thumbnail images of different height (and widths) in
a horizontal row.
they should all align at the bottom of their thumbnailcontainer which
has a fixed height.
I've put them in a div id #thumbnailrow and tried with these settings:
#thumbnailrow { text-align: center; width: 828px; height: 88px;
margin: 2px auto 0; }
#thumbnailrow img { bottom: 0; margin-right: 4px; margin-bottom: 0;
margin-left: 4px; }
#thumbnailrow a:hover { border-bottom: 2px dotted #cacaca; }
but this doesn't do the job...
nor did this addtion (neither at thumbnailrow or img): vertical-
align: bottom;
can you please help me with css definitions/settings to achieve this?
kind regards,
beate
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
