Sent by fantasai on 3 July 2009 01:01
Debbie Roes wrote:
> Hi,
>
> I am not a CSS expert (yet!), so I am calling upon the experts on this list
> with a question regarding whether or not a certain design can be
> accomplished using CSS.
>
> I have a client who is a professional photographer. She wants to include a
> photo gallery on her website which will display larger images upon hovering
> over thumbnails. I know how to do this, but the problem lies with the
> following:
>
> 1) She wants a blue background to appear behind the larger images,
> preferably with rounded corners and a drop shadow (see the URL below).
>
> 2) Some of the larger images will be in portrait mode and some will be in
> landscape mode.
>
> The following is a JPG rendering of what she is hoping her site will look
> like:
>
> http://www.awbphoto.com/amywisebacis_landscape.jpg
>
> The JPG shows a landscape image with an attractive amount of blue matting
> behind it (the bottom of the image with the description will be part of the
> photo JPG file, as is the white border of the image). The problem lies with
> the portrait images, centering the images and not having too much blue
> background around the portrait images. I am wondering if it is possible to
> vary the size of the blue background using CSS.
>
> I hope I have explained this well and it's not confusing. What I am
> wondering is if I can achieve the desired result using ONLY CSS. I don't
> want the implementation to be too confusing, as the client wants to be able
> to post new images and galleries herself using my code as a template. She
> is somewhat knowledgeable about XHTML (she uses Dreamweaver split view) but
> not about CSS. I told her that I would comment my files well and that the
> CSS would be in an external file which she would never need to touch.
>
> Any advice or assistance which you can provide would be greatly appreciated.
> I don't post much but I learn SO much from reading the posts on this list.
Couldn't you just use a blue background and padding on the <img> element to
get the blue matting? And "margin: auto" should center the image for the
portraits.
CSS3 would get you the rounded corners and drop-shadow easily; you'll need
to look up some more sophisticated tricks to get those to work without it...
but I guess I'm missing where you're stuck here.
~fantasai
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
