Clipping an image while leaving margin space

This is what I want to accomplish:

So I want to use screenshots for every web project I’ve done and crop it to fixed height, though still leave some margin space up for the top part of the browser and below for the bottom part.

What’s the most efficient XHTML and CSS code to make this cross-browser?

Sorry, the question isn’t very clear. It’s not clear what you are referring to in that image. A screen shot is just an image. You can make it whatever size you like. Then you add margins/paddings to suit. You need to be more specific about what layout you want, and show us the code you have so far so we can help integrate the screenshots.

I was thinking to crop the actual project screenshot and leave some margin for the browser top bar (which is 34px) and the browser bottom bar (which is 11px). But I already did that successfully like this:

<div class="browser-frame">
    <a href="#"><img src="images/projects/sample-project-img.jpg" /></a>
</div>

And the CSS:

.browser-frame {
	position:relative;
	padding: 33px 0px 0px 0px;
	height: 466px;
	background: #FFF url(../../images/structure/browser-frame.png) no-repeat;
}

.browser-frame a img {
	position:absolute;
	clip:rect(0px, 600px, 455px, 0px);
	width: 600px;
}

So I’m using a fixed height background of the browser top and bottom bar and I’m just applying it the cropped project screenshot.

However the ideal solution would’ve been if I could somehow use two separate background images, one for the top browser bar and one for the bottom one, and basically have control over the cropping height of the actual project screenshot. So should the project screenshot increases in height, it should push the bottom browser bar down.

So far I can’t succeed that so I’m using one background image for the browser parts, and if I plan to change the height of the project screenshot I should modify the browser background height in Photoshop everytime I want a change in height, I basically wanted to avoid that and simply control with pure CSS.

Based on my understanding of what you want to achieve, you want to add browser frame to the top and bottom of screenshot image. While the height of the image is not fix.

You may want to have 3 divs. head, middle, and foot (whatever you call it). head will contain background image of top browser frame and so the foot div will have bottom frame image. While the middle contain your screenshot image.


<div id="wrapper">
  <div id="head">
    <img src="top_browser.jpg" />
  </div>
  <div id="middle">
    <img src="images/projects/sample-project-img.jpg" />
  </div>
  <div id="foot">
    <img src="bottom_browser.jpg" />
  </div>
</div>

How come I didn’t thought of that. I hate using extra markup for some simple achievement, but when I see it again, it seems that’s the only decent solution. Thanks!