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 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/
