Css Help to add matte and frame to image

[gwmbox]

Hi all

I am trying to add a matte and frame to an image where the frame and matte may be different colours and also different sizes depending on the size of the image.

http://gmwebfiles.com/data/g/forumposts/dd-frame-css-help.jpg

The above image shows the images I am working with and the result I have so far with the desired result (not yet achieved) that I need help with. Note this image is 1/3 the size of the real images and is provided to simply show what I am using.

The CSS I have so far is



.imagewrap {position:relative;}
.frame {position:relative;margin:0;background:url(images/frame.jpg) no-repeat 0 0;padding-top:16px;padding-left:16px;display:table-cell;}
.fmimage {position:relative;margin:0;padding-top:50px;padding-left:50px;background:#feffee url(images/black-matte.jpg) no-repeat 0 0;display:table-cell;}
.fmimage img {padding:0;margin:0;border:1px solid #ccc;}
.fmimageright {margin:0;padding-bottom:50px;padding-right:50px;background:#feffee url(images/black-matte.jpg) no-repeat 100% 100%;display:table-cell;}
.frameright {margin:0;background:url(images/frame.jpg) no-repeat 100% 100%;padding-bottom:16px;padding-right:16px;display:table-cell;}


with the html being



<div class="imagewrap">
<div class="frame">
<div class="fmimage">
<div class="frameright">
<div class="fmimageright">
<img src="images/myimage-220.jpg" width="220" height="119" alt="myimage-220">
</div>
</div>
</div>
</div>
</div>


Can anyone please help me fix the css and html please to get it to work. If I need to change the images somehow please let me know.

Thanks

GW

[Nile]

Please post a link to the page on your site that contains the problematic script so we can check it out.

[gwmbox]

Hi, no script at all, this is just a CSS issue noscript in use at all. Site is off-line at the moment as I am in development only.

By your response are you saying it cannot be done in css?

Thanks

GW

[jscheuer1]

I'm not 100% sure what Nile is saying. But this can be done with css and HTML alone. It would be much easier if we had a link to the page though. At the very least the actual images involved.

One thing that's almost certain from your original post though is the white line under the image. That's probably the space alloted for descending characters (like j, g, q, etc.) that all inline elements are supposed to have. The img tag is an inline element. Frankly it makes no sense to me that it should allow for the descending, but that's the specification. In your current setup, if that's indeed the problem, that much can be fixed by making the image display block:


.fmimage img {display:block;padding:0;margin:0;border:1px solid #ccc;}

The other two things concerning the voids in the frame potentially have to do with the position and repeat of the background image for those divisions, their placement in the HTML code, their other styles, and the image(s) - particularly the background image itself.

To most easily sort that out we really need the images, preferably a link to a live mock up that shows the problem in action.

[gwmbox]

OK, thanks for the reply, I have set-up a mock test page here

http://gmwebfiles.com/frametest/

Thanks

GW

[Nile]

Sorry, yes. That is what I was trying to say. Post a link :D Sorry for the confusion

[jscheuer1]

OK, I may have spoken too soon. Now that I see what's going on more clearly, I'm not sure if what you're shooting for can be done with css and HTML alone. It's possible I suppose, but perhaps not.

By that I mean the trick of getting things to line up as desired with only the dimensions of the image as a given.

Your two main problems there are:


Lack of support for display table-cell in IE 7


The nesting of these display table-cell elements in those browsers (IE 8+ and virtually all other modern browsers) that support it


IE 7 is in rapid decline, but I would hesitate to abandon it just yet, though that would be at your discretion and is not wholly out of the question. By not nesting, or not nesting so many of these display table-cell elements, perhaps creating more of them, and perhaps breaking the frame and matte images into their constituent parts and/or making them into sprites that don't resemble the finished look, something could be worked out. I really don't want to go down that road right now, perhaps Nile or someone else would.

One other issue is that the black matte has a flaw in its lower left corner that shows some gradient toward white that makes it unsuitable, so for it I've substituted the background color #121212, its predominant color.

This works in IE 7+ (at least IE 7 mode in IE 8) and presumably all others. It does require some calculation on your part as to the finished size of the feature and some calculations based upon that as to the sizes and positions of elements within. This could probably be done via javascript if the image size, offsets for frame and matte, the fudge factor of - 2 (see code for more explanation on that) and desired finished size of the feature were known.

The fairly well commented code:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
/* In the below, 16px represents the width/height/offset required to
get things to line up. With different frames or mattes this may change */
.wrap, .frame {
position: relative;
width: 354px; /* dimensions of finished feature */
height: 253px;
background-color: white;
}
.wrap.black {
background-color: #121212;
}
.frame, .matte, .wrap img {
position: absolute;
}
.frame {
background: url(images/cherry-frame.jpg) no-repeat 0 0;
height: 16px; /* height of top and bottom frame elements */
}
.frame.rht {
right: 0;
}
.frame.bot {
background-position: 100% 100%;
bottom: 0;
}
.frame.rht, .frame.lft {
height: 100%;
width: 16px;
}
.matte {
background: url(images/white-matte.jpg) no-repeat 0 0;
height: 16px; /* height of top and bottom matte elements */
width: 322px; /* width of top and bottom matte elements */
left: 16px; /* left offset of matte elements */
top: 16px; /* top offset of matte elements */
}
.matte.rht {
background-position: 100% 0;
right: 16px; /* right offset of right matte elements */
left: auto; /* cancel left offset for these elements */
}
.matte.bot {
background-position: 0 100%;
bottom: 16px; /* bottom offset of bottom matte elements */
top: auto; /* cancel top offset for these elements */
}
.matte.rht, .matte.lft { /* dimensions for right and left matte elements,
height is height of feature minus 2 times height of offset - 2,
this -2 could change depending upon the matte */
height: 220px;
width: 16px;
}
.wrap img { /* center the image */
top: 50%;
left: 50%;
margin: -60px 0 0 -110px; /* negative half its height, negative half its width */
}
</style>
</head>
<body>
<div class="wrap black">
<div class="frame"></div>
<div class="frame rht"></div>
<div class="frame bot"></div>
<div class="frame lft"></div>
<img src="images/myimage-220.jpg" width="220" height="119" alt="myimage-220">
</div>
<p>&nbsp;</p>

<div class="wrap">
<div class="frame"></div>
<div class="frame rht"></div>
<div class="frame bot"></div>
<div class="frame lft"></div>
<div class="matte bot"></div>
<div class="matte lft"></div>
<div class="matte"></div>
<div class="matte rht"></div>
<img src="images/myimage-220.jpg" width="220" height="119" alt="myimage-220">
</div>
</body>
</html>

Even this would probably be easier to do with images for frame and matte broken up or made into sprites as mentioned for the original method. If you have questions feel free to ask.

[gwmbox]

Thanks John for your assistance and advice.

I will have a play with what you have provided and see if I can get it to work with what I have and see what else I can do.

If anyone else has any other ideas please share them.

Thanks

GW