Re: [css-d] Centering image h/v in *smaller* div
At 16:40 -0500 11/4/08, Benjamin White wrote: 1.) Could you not just render these particular links as block elements, either by floating them or explicitly declaring display: block and then setting the background to whatever image you need? Ideally you would then use the alternate text as the link text and hide it from traditional browsers in some way. Good idea! Anyway, thanks to everyone for your input - I'll figure something out. BestMartin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering image h/v in *smaller* div
Lisa Onizuka wrote:
...you could achieve it this way:
div class=imagebox
style=background:url('dynamically-generated-path.jpg') center center
no-repeat nbsp; /div
Martin wrote:
...but the thumbnails also need
to be clickable links
You can put a one-pixel transparent gif in each div with the dimensions set
to the size of the divs, then wrap the gif in the link.
Nancy Sosna Bohm
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering image h/v in *smaller* div
On 4/10/08, Martin Sammtleben [EMAIL PROTECTED] wrote: ... but the thumbnails also need to be clickable links ... I thought about this last night, intending to test something out when I got home but forgot entirely to do so. Regardless, I thought it worth considerating to suggest that a div might not be necessary. I had two thoughts: 1.) Could you not just render these particular links as block elements, either by floating them or explicitly declaring display: block and then setting the background to whatever image you need? Ideally you would then use the alternate text as the link text and hide it from traditional browsers in some way. A List Apart has had several articles on image replacement (though there are controveries about each one). 2.) Might this be the proper time for an image input? I haven't really used them much, but depending on the action that is supposed to occur when a user clicks on it, an input element might be just what you need. As I said, I haven't actually tested these ideas in this context, but I have used images as link backgrounds for headings when plain ol' text wouldn't suffice and it worked quite well. Now I reckon these two ideas don't give you much extra in the way of styling, but they are a bit more semantically meaningful. Technically, I guess that's not the ouvre of this list, but it's generally easier to style something that's put together well. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Centering image h/v in *smaller* div
Hi,
I use a div class=imgbox to display thumbnails in a square box.
These thumbnails are of various sizes and aspect ratios
(auto-generated by a CMS), but they all exceed the dimensions of the
box. Here's the css:
div.imagebox {
text-align: center;
vertical-align: middle;
width: 80px;
height: 80px;
overflow: hidden }
I want to position them so that their center-portion is displayed,
but since they're bigger not even text-align: center has any
effect. All I see is the upper left corner of the images.
Now all the resources I've found so far deal with the case of the
surrounding div being *larger* than the images. But I got some hints
that might be useful like setting the div's position to relative and
using absolute positioning for the images.
The problem with that is however that I can't use fixed values as the
size/orientation of the thumbnails varies.
Can this be done? Any help would be very much appreciated!
Cheers Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering image h/v in *smaller* div
At 15:56 +0200 10/4/08, ilduca69 wrote: well, the name of the classes must match: div class=imgbox snip Sorry, that was just a typo in the mail - they actually do match, but no effect. Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering image h/v in *smaller* div
Martin, I'm not sure if you want to bother with any inline css, but you
could achieve it this way:
div class=imagebox
style=background:url('dynamically-generated-path.jpg') center center
no-repeat nbsp; /div
div.imagebox {
width: 80px;
height: 80px;
overflow: hidden; }
-Lisa
http://free-ecard-greetings.com
http://cleanwebdesign.com
--
Hi,
I use a div class=imgbox to display thumbnails in a square box.
These thumbnails are of various sizes and aspect ratios (auto-generated by a
CMS), but they all exceed the dimensions of the box. Here's the css:
div.imagebox {
text-align: center;
vertical-align: middle;
width: 80px;
height: 80px;
overflow: hidden }
I want to position them so that their center-portion is displayed, but since
they're bigger not even text-align: center has any effect. All I see is
the upper left corner of the images.
Now all the resources I've found so far deal with the case of the
surrounding div being *larger* than the images. But I got some hints that
might be useful like setting the div's position to relative and using
absolute positioning for the images.
The problem with that is however that I can't use fixed values as the
size/orientation of the thumbnails varies.
Can this be done? Any help would be very much appreciated!
Cheers Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Centering image h/v in *smaller* div
At 10:35 -0600 10/4/08, Lisa Onizuka wrote:
Martin, I'm not sure if you want to bother with any inline css, but you
could achieve it this way:
div class=imagebox
style=background:url('dynamically-generated-path.jpg') center center
no-repeat nbsp; /div
Thanks Lisa,
I had actually thought of this approach, but the thumbnails also need
to be clickable links and in order to achieve that I would need to
modify a core component of the CMS.
I might end up doing just that.
Cheers Martin
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
