How do I wrap drop shadow around webpage

**Another Designer** · Jan 25, 2010 21:29

Okay I am at my wit's end! I want to make this drop shadow end at the bottom of the web page. I also would like to make a drop shadow appear on the bottom of this page going horizontally. But I will deal with that later.
Can someone PLEASE tell me how to stop this drop shadow from going passed where the page ends?
Here is the link Page with drop shadow
I want to keep the CSS all internal on the web page instead of external.
Thank you.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>


<style type="text/css">
<!--
body {
    background-color: #e9e9e9;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-repeat: repeat-y;
    background-position:center;
    background-image: url(images/backgroundimage.jpg);
}
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #000000;
}
.style1 {
    font-size: 12
}
.style2 {
    font-size: 12px;
    font-weight: bold;
}
.style4 {font-size: 14px}
.style5 {font-size: 14px; font-weight: bold; }
.style6 {font-size: small}
.style3 {color: #FFFFFF}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<script id="gwScript" type="text/javascript">                        function gwCall(method, argStr)                            
      {                                                          
         var gwProxy = window.document.getElementById('gwProxy');
         if (gwProxy)                                            
         {                                                        
            gwProxy.setAttribute('gwMethod', method);            
            gwProxy.setAttribute('gwArgStr', argStr);            
            var e = document.createEvent('MouseEvents');          
            e.initEvent('click',true,true);                      
            gwProxy.dispatchEvent(e);                            
         }                                                        
      }                                                          
                                                                  
      function jsCall()                                          
      {                                                          
         var jsProxy = document.getElementById('jsProxy');        
         if (jsProxy)                                            
         {                                                        
            var jsCode = jsProxy.getAttribute('jsCode');          
            eval(jsCode);                                        
         }                                                        
      }                                                          
                                                                  
      function Gateway()                                          
      {                                                          
         var _P4r4m5_ = {};                                      
         this.addParam = function(name,value)                    
         {                                                        
            _P4r4m5_[escape(name)] = escape(value);              
         }                                                        
                                                                  
         this.callName = function(callName)                      
         {                                                        
            var paramStr = '';                                    
            for (name in _P4r4m5_)                                
            {                                                    
               paramStr = paramStr+                              
                          ((paramStr == '') ? '' : '&')+          
                          name+'='+_P4r4m5_[name];                
            }                                                    
            gwCall(callName, paramStr);                          
         }                                                        
      }                                                          
                                                                  
   function showIFrame(name, url)                                
      {                                                          
         frames[name].location.href = url;                        
      }                                                          
                                                                  
      function createSrcScriptElement(srcPath)                    
      {                                                          
         var js = document.createElement('script');              
         js.setAttribute('type', 'text/javascript');              
         js.setAttribute('src', srcPath);                        
         document.getElementsByTagName('head')[0].appendChild(js);
      }                                                          
                                                                  
      function createInlineScriptElement(escapedJsCode)          
      {                                                          
         try{                                                    
            var js;                                              
            if(document.standardCreateElement)                    
               js = document.standardCreateElement('script');    
            else                                                  
               js = document.createElement('script');            
            js.setAttribute('type', 'text/javascript');          
            js.text = unescape(escapedJsCode);                    
            document.getElementsByTagName('head')[0].appendChild(js);
         }                                                                            
         catch(e){                                                                
            //alert(document.createElement);                        
            //alert('ERROR: createInlineScriptElement(): '+e);      
         }                                                                            
      }                                                          
                                                                  
      function invokeInGuiThread(callName, argPtr)                
      {                                                          
         var gwObj = new Gateway();                              
         gwObj.addParam('argPtr',argPtr);                        
         gwObj.callName(callName);                                
      }                                                          

</script><body onload="MM_preloadImages('images/buttons_over/home_over.gif','images/buttons_over/bootcamp_over.gif','images/buttons_over/dailydozen_over.gif','images/buttons_over/events_over.gif','images/buttons_over/programs_over.gif','images/buttons_over/about_over.gif','images/buttons_over/directions_over.gif')">

<center>
<table border="0" cellpadding="0" cellspacing="0" width="970">
 <tr>
    <td width="970" align="center" valign="top"><img src="" alt="" width="970" height="167" /></td>
  </tr>
</tbody></table>

<table bgcolor="#0000ff" border="0" cellpadding="0" cellspacing="0" width="970">
  <tbody><tr>
    <td align="center" valign="top">

    
    
    <table border="0" cellpadding="0" cellspacing="0">
      <tbody><tr>
        <td align="center"  height="20" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/buttons_over/home_over.gif',1)"><img src="images/buttons_off/home_off.gif" name="Home" width="102" height="27" border="0" id="Home" /></a></td>
        <td align="center" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Boot Camp','','images/buttons_over/bootcamp_over.gif',1)"><img src="images/buttons_off/bootcamp_off.gif" name="Boot Camp" width="102" height="27" border="0" id="Boot Camp" /></a></td>
        <td align="center" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Daily Dozen','','images/buttons_over/dailydozen_over.gif',1)"><img src="images/buttons_off/dailydozen_off.gif" name="Daily Dozen" width="102" height="27" border="0" id="Daily Dozen" /></a></td>
        <td align="center" valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Events','','images/buttons_over/events_over.gif',1)"><img src="images/buttons_off/events_off.gif" name="Events" width="102" height="27" border="0" id="Events" /></a></td>
        <td align="center"  valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Programs','','images/buttons_over/programs_over.gif',1)"><img src="images/buttons_off/programs_off.gif" alt="" name="Programs" width="102" height="27" border="0" id="Programs" /></a></td>
        <td align="center"  valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','images/buttons_over/about_over.gif',1)"><img src="images/buttons_off/about_off.gif" alt="" name="About" width="102" height="27" border="0" id="About" /></a></td>
        <td align="center"  valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Directions','','images/buttons_over/directions_over.gif',1)"><img src="images/buttons_off/directions_off.gif" alt="" name="Directions" width="102" height="27" border="0" id="Directions" /></a></td>

         <td align="center"  valign="top"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover=""><img src="images/buttons_off/contact_off.gif" alt="" name="Contact " width="102" height="27" border="0" id="Contact " /></a></td>
      </tr>
    </tbody></table></td>
  </tr>
  <tr>
    <td align="center" bgcolor="#ffffff" valign="top"><img src="images/buttonsdropshadow.gif" height="8" width="816"></td>
  </tr>
</tbody></table>
</center>




<center>
</center>




<!--Session data-->
<div id="refHTML"></div>
<table width="970" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td>

    
    
    
    <table width="863" border="0" align="center" cellpadding="10" cellspacing="3">
      <tr>
        <td valign="top" align="center" width="496" ><iframe width="480" height="430" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=""></iframe><br /><small><a href="">View Larger Map</a></small>
        
          </td>
        <td valign="top" align="center"width="318"><table height="77" border="0" cellpadding="1" cellspacing="3">
          <tr>
            <td width="287" height="21" align="center" valign="top"><div>
              <div align="center"><img src="" alt="Where is s?" height="24" /></div>

            </div></td>
          </tr>
          <tr>
            <td  valign="top" align="center"> <div align="left" class="style1">
              <p><span class="style4">Address removed</strong></span><br />

                <br />
                  <span class="style2">'s  office hours are as follows:            </span>
            </div></td>
          </tr>
          <tr>
            <td align="center"  valign="top" bgcolor="#CCCCCC"><div align="left" class="style2">
              Mondays, Wednesday &amp; Fridays
            
            </div></td>

          </tr>
          <tr>
            <td align="center"  valign="top" class="style4"><div align="left">6:00am - 1:00pm 4:00pm -10:00pm</div></td>
          </tr>
          <tr>
            <td align="center"  valign="top" bgcolor="#CCCCCC" class="style2"><div align="left">Tuesdays &amp; Thursdays</div></td>
          </tr>

          <tr>
            <td  valign="top" align="center"><div align="left"><span class="style4">6:00am - 2:00pm 4:00pm -9:00pm</span></div></td>
          </tr>
          <tr>
            <td align="center"  valign="top" bgcolor="#CCCCCC" class="style2"><div align="left">Saturdays</div></td>
          </tr>
          <tr>
            <td align="center"  valign="top" class="style4"><div align="left">9:00am - 3:00pm</div></td>

          </tr>
          <tr>
            <td align="center"  valign="top" bgcolor="#CCCCCC" class="style2"><div align="left">Sundays</div></td>
          </tr>
          <tr>
            <td align="center"  valign="top" class="style4"><div align="left">Off</div></td>
          </tr>
        </table></td>

      </tr>
    </table></td>
  </tr>
</table>
<table width="970" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#0000FF">
  <tr>
    <td valign="middle" ><div  align="center" class="style2 style3">All rights reserved. </div></td>
    <td align="right"><img src="images/transparentspacer.gif" width="1" height="30" /></td>
  </tr>

</table>
</body></html>

**Dan Grossman** · Jan 25, 2010 22:51

It isn't going past the end of the page, that whitespace at the bottom is part of your page

HTML Code:

    <td colspan="3">&nbsp;</td>

**Another Designer** · Jan 25, 2010 23:07

Originally Posted by Dan Grossman

It isn't going past the end of the page, that whitespace at the bottom is part of your page

HTML Code:

    <td colspan="3">&nbsp;</td>

I'm not sure I totally understand. I commented this out and I still have the same problem.

**RyanReese** · Jan 25, 2010 23:15

Well you must be doing something wrong because the issue goes away lol

Actually, there is no reason for that entire <tr> there. Remove the <tr> (then the <td> with the &nbsp in it from above)

**Another Designer** · Jan 25, 2010 23:44

Originally Posted by RyanReese

Well you must be doing something wrong because the issue goes away lol

Actually, there is no reason for that entire <tr> there. Remove the <tr> (then the <td> with the &nbsp in it from above)

It's still not working. No wonder I'm a failure at this.

**Dan Grossman** · Jan 26, 2010 00:05

Copying/pasting the HTML from your first post, this is how the bottom of the page looks

There's no area where the shadow extends past the content

**RyanReese** · Jan 26, 2010 00:36

Originally Posted by Another Designer

It's still not working. No wonder I'm a failure at this.

Go into firebug and right click the empty space at the bottom and hit inspect element. Assuming you clicked there then it will show the code that Dan posted in post #2.

Giving that specific element a display:none (same as commenting it out) removes the space

.

**W3bnewbie** · Jan 26, 2010 04:43

Hi if had done this in html & css it would been like eating pie & I refuse 2 help those who use tables 2 design sites it is for displaying data.....

Well heres how u should get this done u should create a
<div class="fade">
All your other code (vomit) tables <tr> <td> etc....check width of webpage & then create a http://www.go2africa.com/images/ver6/body_bg.jpg image like this & set the css in the in the css file like this: body { repeat-x; url:imagePath }
</div>

Hope this helps....I've created this some thing u call a problem....

**Another Designer** · Jan 26, 2010 08:02

Originally Posted by RyanReese

Go into firebug and right click the empty space at the bottom and hit inspect element. Assuming you clicked there then it will show the code that Dan posted in post #2.

Giving that specific element a display:none (same as commenting it out) removes the space

.

RyanReese that did the trick! It fixed it! And now I can appreciate Firebug!
Thank you ALL for your help! This includes the first poster.
Oh yes, and I will stop using Tables as soon as I learn the alternative.
I'm a happy man right now!
Thank you!!!

**Another Designer** · Jan 26, 2010 08:38

Now I have a new problem. One of the pages seems to have been fixed in Fireworks. However, the same problem occurs when I view it in IE or Google Chrome.
Drop Shadow Still Too Long

**RyanReese** · Jan 26, 2010 08:44

Hi, the only reason FF doesn't display it is because the FF window is cluttered with toolbars and thus the actual viewport is smaller.

You could create taht page into a sticky footer and that would eliminate the problem altogether

http://www.pmob.co.uk/temp/sticky-fo...w-no-table.htm

**Another Designer** · Jan 26, 2010 08:47

But the first page works correctly in IE but not the Directions page.
I will try to learn what a sticky footer is. There must be something wrong with my code....

**RyanReese** · Jan 26, 2010 08:56

Listen, I just explained

.

IE is not filled with toolbars and such, and as a result their viewport has more space vertically. Thus it's a bigger page.

Opera/chome are the same way. They have no toolbars and as such they have more vertical space. You set the image on the <body> and as a result it will fill the viewport.

You could actually just wrap everything in a <div> (everything from <body> to </body>) and place the image there. That would stop the d rop shadow from extending further down

Ignore my sticky footer comment, and do my <div> comment

**Another Designer** · Jan 26, 2010 09:18

Okay I understand what you're saying. I tried the <div> and it did not work. I will try it again.

Please look at these two pages in IE. And then choose F11. The Welcome Page stops at the bottom. However the Directions Page keeps on going. I even took everything out of the page in the Welcome Page and tested it in IE and it still ended at the bottom.
I hope I am clear and I am not totally missing your point.

**Another Designer** · Jan 26, 2010 10:08

RyanResse my apologies. I went into Fireworks and did ctr - and made the welcome page smaller. As you said the background shadow kept on going down. You were right.
I just have to learn how to wrap a background image in a <div> now.

**Another Designer** · Jan 26, 2010 15:31

Can I ask another question?
I see some websites that have a 2x2 gif that is the same color as the hex color as a background image. My guess is to make it run down the page. That's my guess.
Can I use a dropshadow as another background image without having to use it in a <td>?
Is there rooms for two background images? Hope I made sense.
Thanks

**RyanReese** · Jan 26, 2010 16:35

You probably are making sense however I can't seem to understand whta you are saying. Making a visual reference would help me

**Another Designer** · Mar 3, 2010 17:25

I got the drop shadow to rap around the page using the <div> and a CSS Class. However, some of the pages heights are shorter than the others. The drop shadow just keeps on going in the shorter page. How can I fix that?
Thanks again.

**RyanReese** · Mar 3, 2010 19:24

Considering the page probably has changed, can you provide a fresh link?

Did you set a height on the <div>? Any min-height? That's probably the issue, though I haven't even looked at any code so I'm guessing

**ralph.m** · Mar 3, 2010 23:20

As Ryan said, your links are all dead now, so we can't see your site.

I've not seen this thread before, so this might be irrelevant, but Eric Watson has a nice example of an expanding border shadow:

http://www.visibilityinherit.com/cod...hadow-demo.php

**Another Designer** · Mar 4, 2010 20:42

Hi guys,
Here is the link and code. You're all a big help.

**ralph.m** · Mar 4, 2010 21:11

I can't see the problem because my viewport is too small, but the problem is that you've got the background image on the <body> tag. That means that it will go all the way to the bottom of the screen independently of how much content there is.

The ideal is to have a centered wrapper div that contains all the content, and then have the background image on that.

However, with a table layout that's not as easy. I guess you could wrap all of the site content in a wrapping table and have the background image on that.

**Another Designer** · Mar 5, 2010 06:31

Ralph so it's not possible with a table? Ugghhh this is a bummer!

**ralph.m** · Mar 5, 2010 07:35

No, you should be able to do this no problem.

Try wrapping the content in a div that is slightly wider, so that the shadow will appear to hang over the edges, and repeat that background on the wrapping div.

In fact, I would replace the <center> element with a wrapper div:

Code:

<div id="wrapper">
    all your code here
</div>

CSS

Code:

#wrapper {
  padding: 0 12px; /* leaves room for the shadows */
  width: 994px;
  margin: 0 auto; /* centers the wrapper */
  background: #2e81d4 url(/images/backgroundcolor.jpg) repeat-y 50&#37; 0;
}

Make sure to take the background image off the <body> element.

See if that helps!

User Tag List

Thread: How do I wrap drop shadow around webpage

Thread Tools

Display

How do I wrap drop shadow around webpage

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions