SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    How do I wrap drop shadow around webpage

    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>
    Last edited by kohoutek; Mar 25, 2010 at 11:16. Reason: Removed address

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Grossman View Post
    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.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.

  6. #6
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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
    Attached Images Attached Images

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Another Designer View Post
    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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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....

  9. #9
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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!!!

  10. #10
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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....

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  15. #15
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  16. #16
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You probably are making sense however I can't seem to understand whta you are saying. Making a visual reference would help me
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  18. #18
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  20. #20
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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

  21. #21
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi guys,
    Here is the link and code. You're all a big help.
    Last edited by spikeZ; Mar 9, 2010 at 13:25. Reason: link removed

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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.

  23. #23
    SitePoint Wizard Another Designer's Avatar
    Join Date
    May 2005
    Posts
    1,370
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ralph so it's not possible with a table? Ugghhh this is a bummer!

  24. #24
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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!


Tags for this Thread

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
  •