SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Grab code

  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Grab code

    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.

  2. #2
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Silly question, but what box with shadows? It's all white with single pixel borders... do you mean the gradient on the menu?

  3. #3
    SitePoint Member
    Join Date
    Jul 2004
    Location
    dk
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Attached Images Attached Images

  4. #4
    Who is Mr Blonde? Mr Blonde's Avatar
    Join Date
    Sep 2006
    Location
    Gold Coast, QLD
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Heavens Rejects : Online Clothing Store
    Alternative Clothing : Mr Blonde
    Front end development : By the Webfella

  5. #5
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow View Post
    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...
    Olly Hodgson
    thinkdrastic.net

  8. #8
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gnarly View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •