Grab code

**step10** · Jan 10, 2007 07:23

Hi.

I would like to create a box like this one with the shadows on this page here.
I have created my own graphics but I would like to set it up as they have done. However, the code is quite complex, so I'm unable to see how they have done it. It seems to be a mix of divs and tables. Can anybody help me getting the code for this box?

Thanks a lot.

Step.

**deathshadow** · Jan 10, 2007 11:58

Silly question, but what box with shadows? It's all white with single pixel borders... do you mean the gradient on the menu?

**meek** · Jan 11, 2007 02:59

Hi.

I'm attaching a screenshot below. I managed to grab the code, though:

<table style="width:190px" cellspacing="0" cellpadding="0" >
<tr>
<td style="background-image:url('/assets/img/left_side_shadow.gif');width:10px;height:100%;vertical-align:text-top"><img style="vertical-align:top" src="/assets/img/left_top_shadow.gif" height="10" width="10" /></td>
<td colspan="2" style="width:180px:align:right">
<table style="border:1px solid #DEDFE7;padding-top:5px;width:100%" cellpadding="0" cellspacing="0">
<tr>
<td style="padding-left:10px;padding-right:10px;padding-top:2px" >
<div>
<div style="font-size:115%;font-weight:bold;padding-top:5px;">
Widescreen flat TV
</div>
with Pixel Plus

...........
<td style="padding-left:10px;padding-right:10px;padding-bottom:2px;padding-top:2px;font-size:90%;background-color:#005AFF;color:#FFFFFF">
HD Ready
</td>
</tr> </table>
</td>
</tr>
</table>

**Mr Blonde** · Jan 11, 2007 17:42

Hi Step and welcome to Sitepoint.
The way these particular people have done it, is first laid it out in a table... and placed an image in the 'left table cell', the 'bottom left table cell', and the 'bottom table cell'.
The one on the left is set to 100% height, the bottom left is a corner so it is left alone, and the one on the bottom is set to 100% width. If you right click to view the background image on the shadow, you can see the original is only 1px high before they elongated it.
Hope that was what you were after.

**deathshadow** · Jan 12, 2007 04:30

Huh, for whatever reason those borders aren't rendrering on my desktop machine... wonder if my adblock doesn't like them or something.

To implement the same thing, I'd have done it a touch different using CSS. No tables involved, and might be a touch easier to follow.

the CSS:

Code:

.left_shadow {
	background:url(images/left_side_shadow.gif) top left repeat-y;
}

.left_shadow_top {
	background:url(images/left_top_shadow.gif) top left no-repeat;
}

.bottom_shadow {
	background:url(images/bottom_shadow.gif) bottom left repeat-x;
}

.bottom_shadow_left {
	background:url(images/left_bottom_shadow.gif) bottom left no-repeat;
}

.bottom_shadow_right {
	background:url(images/right_bottom_shadow.gif) bottom right no-repeat;
	padding:0px 0px 10px 10px; /* bottom and left shadow widths */
}

.content {
	border:1px solid #888;
	padding:8px;
}

and the HTML

Code:

<div class="left_shadow">
	<div class="left_shadow_top">
		<div class="bottom_shadow">
			<div class="bottom_shadow_left">
				<div class="bottom_shadow_right">
					<div class="content">
						Some test content here<br />
						Some test content here<br />
						Some test content here<br />
						Some test content here<br />
						Some test content here<br />
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

'how it works'
By constantly layering one DIV atop another, the images get depth-sorted atop each-other. This let's the corner images 'overwrite' the tiled images, which we use the background-position to place instead of floats and/or table elements. We then just have to pad the innermost div BEFORE the content one to push the content in from the shadows. You SHOULD in theory be able to do the same using margins on the content to push it in, but for some reason Opera and FF ignore bottom-margin for SIZING DIV's unless they are position:relative (though it DOES pay attention for spacing them - ARGH!!!)... rather than add position:relative and making even MORE code, I opted for the padding instead.

I think using a 'sliding doors' technique might let you reduce the number of images involved, perhaps all the way down to one, but more likely with just two images... Personally I'd probably make it three images, but make code to allow borders on all four sides... one image would have all four rounded corners in it, while another would be the repeat-y images, and another the repeat-x... in that case you'd have to assign a background to the content area, otherwise the extra borders would show through.

If I have some time tomorrow, I'll toss together an example of that way and pop it onto my server.

SUCKS to nest DIV's that deep, but it beats using 3-6k in images on sliding-doors to pull off what 1k of images can do... to do something with NEITHER tables nor floats, and it's always nice to be FULLY dynamic letting you make your content any size you like.

**deathshadow** · Jan 12, 2007 05:10

Here's a complete rewrite of that whole section, how I'd have done it.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Shadow box demo</title>

<style type="text/css">
* {
	margin:0px;
	padding:0px;
}

body {
	padding:10px; /* just so we can see the box edges clearer */
	font-family:verdana,arial,helvetica,sans-serif;
	font-size:0.7em;
}

.left_shadow {
	width:190px;
	background:url(images/left_side_shadow.gif) top left repeat-y;
}

.left_shadow_top {
	background:url(images/left_top_shadow.gif) top left no-repeat;
}

.bottom_shadow {
	background:url(images/bottom_shadow.gif) bottom left repeat-x;
}

.bottom_shadow_left {
	background:url(images/left_bottom_shadow.gif) bottom left no-repeat;
}

.bottom_shadow_right {
	background:url(images/right_bottom_shadow.gif) bottom right no-repeat;
	padding:0px 0px 10px 10px; /* bottom and left shadow widths */
}

.content {
	border:1px solid #888;
	padding:8px 8px 0px;
}

.content p {
	margin-bottom:0.5em;
}

.content strong {
	display:block;
	font-size:1.3em;
}

.content em {
	font-weight:bold;
	font-style:normal;
}

.content .spec_bar {
	margin:0px -7px 1px;
	padding:2px 7px;
	color:#FFF;
	background-color:#05F;
	font-size:0.9em;
}
</style>

</head><body>

<div class="left_shadow">
	<div class="left_shadow_top">
		<div class="bottom_shadow">
			<div class="bottom_shadow_left">
				<div class="bottom_shadow_right">
					<div class="content">
						<p>
							<strong>Widescreen flat TV</strong>
							with Pixel Plus
						</p>
						<p>
							<strong>37"</strong>
							LCD integrated Digital
						</p>
						<em>37PF7531D/10</em>
						<p class="spec_bar">
							LCD WXGA display, 1366 x 768p
						</p>
						<p class="spec_bar">
							Integrated Digital DVB-T tuner
						</p>
						<p class="spec_bar">
							HD Ready
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

</body></html>

You'll still need their images (or suitable replacements), but that's functionally identical, and if you strip their whitespace and reformat it to match mine, mine's about 1.2k less code

... and sure as hell easier to read/figure out how it works.

**gnarly** · Jan 12, 2007 05:48

Originally Posted by deathshadow

Code:

<div class="left_shadow">
	<div class="left_shadow_top">
		<div class="bottom_shadow">
			<div class="bottom_shadow_left">
				<div class="bottom_shadow_right">
					<div class="content">

Man, I can't wait until multiple-background images gets further than webkit...

**deathshadow** · Jan 12, 2007 20:12

Originally Posted by gnarly

Man, I can't wait until multiple-background images gets further than webkit...

Seconded... It's WAY too much code for what it's supposed to do.

User Tag List

Thread: Grab code

Thread Tools

Display

Grab code

Bookmarks

Bookmarks

Posting Permissions