HTML and CSS RSS HTML and CSS RSS

Shadow / background

Thread Solved
1 2

•
•
Join Date: Jun 2006
Posts: 67
Reputation: ytregnn is an unknown quantity at this point 
Solved Threads: 0
ytregnn ytregnn is offline Offline
Junior Poster in Training

Shadow / background

 
0
  #1
Oct 10th, 2009
I try to add a "simulated" shadow on the left and right of my table/website.

I use a background picture as my main background. I read something about using a transparent picture (.png?) and use that above my main background.

Anyone who has an idea to how this can be done?

Thanks in regards.
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2006
Posts: 13
Reputation: urolicious is an unknown quantity at this point 
Solved Threads: 2
urolicious's Avatar
urolicious urolicious is offline Offline
Newbie Poster
 
0
  #2
Oct 10th, 2009
1. create your png background image.
this will be a couple of pixels wider than the width of your actual site. the extra width is dependent on how wide your shadow is. so if your shadow is 10px wide and your site is 900px wide, your image will be 920px wide. you will have to have the shadow lie within 10px on the left and 10px on the right of the image with 900px of transparency in between. you will tile this image vertically so cut the length to 1px after creating it.
in my example i will name this image shadow.png

2. here is the example html
HTML and CSS Syntax (Toggle Plain Text) 
  1. <body id="page">
  2.    <div id="wrap">
  3.       <div id="site">
  4.       </div>
  5.    </div>
  6. </body>
and css
HTML and CSS Syntax (Toggle Plain Text) 
  1. #page {background-color:#fff;}
  2. #wrap {width:920px; background: url (..images/shadow.png) center top repeat-y;}
  3. #site {margin:0 10px;}
Last edited by urolicious; Oct 10th, 2009 at 8:28 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 67
Reputation: ytregnn is an unknown quantity at this point 
Solved Threads: 0
ytregnn ytregnn is offline Offline
Junior Poster in Training
 
0
  #3
Oct 12th, 2009
Thank you.

The only problem is that I use a background (image) as my main background, not a color.

Is it possible to use 'two backgrounds' in a similar way?
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2006
Posts: 13
Reputation: urolicious is an unknown quantity at this point 
Solved Threads: 2
urolicious's Avatar
urolicious urolicious is offline Offline
Newbie Poster
 
1
  #4
Oct 12th, 2009
yes... i used a color on #page as an example but you can use an image as well. so it can be as so:
HTML and CSS Syntax (Toggle Plain Text) 
  1. #page {background: url (..images/page-bg.png) top left repeat-x;}
  2. #wrap {width:920px; background: url (..images/shadow.png) center top repeat-y;}
  3. #site {margin:0 10px;}
page-bg.png - background on the body of the site
shadow.png - background on the div#wrap
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 67
Reputation: ytregnn is an unknown quantity at this point 
Solved Threads: 0
ytregnn ytregnn is offline Offline
Junior Poster in Training
 
0
  #5
Oct 12th, 2009
I don't know if I'm doing anything wrong but I can manage to get it to work.

I've followed what you've written and I can see in my HTML editor (Dreamweaver) that there has been a div created around it and my main background is also added in correctly, but unfortunately the "shadow.png" part doesn't show (only the div where it's supposed to be).

I've tried som trail and error by changing the size of the picture, unfortunately I'm stuck.

Thanks for all the help so far..
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2006
Posts: 13
Reputation: urolicious is an unknown quantity at this point 
Solved Threads: 2
urolicious's Avatar
urolicious urolicious is offline Offline
Newbie Poster
 
0
  #6
Oct 12th, 2009
did you add the margin?
could you post your css and html files up so i can have a look please.
Last edited by urolicious; Oct 12th, 2009 at 7:32 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 67
Reputation: ytregnn is an unknown quantity at this point 
Solved Threads: 0
ytregnn ytregnn is offline Offline
Junior Poster in Training
 
0
  #7
Oct 12th, 2009
HTML and CSS Syntax (Toggle Plain Text) 
  1. <html><head><title>Test</title>
  2.  
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4.  
  5.  
  6.  
  7. <style type="text/css">
  8.  
  9. #page {background: url(mainbackground.jpg) top left repeat-x;}
  10. #wrap {width:920px; background: url (shadow.png) center top repeat-y;}
  11. #site {margin:0 10px;}
  12.  
  13. </style>
  14.  
  15. </head>
  16.  
  17. <body id="page">
  18.    <div id="wrap">
  19.       <div id="site">
  20.  
  21. <table border="0" width="100%">
  22. </table><table width="946" height="64" align="center" cellpadding="0" cellspacing="4">
  23.   <tbody><tr>
  24.     <td width="904" height="57" bgcolor="#000000">&nbsp;</td>
  25.   </tr>
  26. </tbody></table>
  27. <center>
  28.   <table border="0" cellpadding="0" cellspacing="0" width="920">
  29.     <tbody><tr>
  30.       <td width="933"><table align="center" bgcolor="#ffffff" border="0" bordercolor="#ffffff" cellpadding="1" height="887" width="946">
  31.       <tbody>
  32.       </tbody>
  33.       <tbody>
  34.         <tr>
  35.           <td align="left" height="755" valign="top" width="920">&nbsp;</td>
  36.         </tr>
  37.         </tbody>
  38.       <tbody>
  39.       </tbody>
  40.     </table></td>
  41.     </tr>
  42.   </tbody></table>
  43.  
  44.       </div>
  45.    </div>
  46. </center>
  47. </body>
  48. </html>

Would be too long to post the entire code so I deleted the content and only kept the parts that's relevant.
Reply With Quote Quick reply to this message  
•
•
Join Date: Oct 2006
Posts: 13
Reputation: urolicious is an unknown quantity at this point 
Solved Threads: 2
urolicious's Avatar
urolicious urolicious is offline Offline
Newbie Poster
 
0
  #8
Oct 12th, 2009
•
•
•
•
Originally Posted by ytregnn View Post
HTML and CSS Syntax (Toggle Plain Text) 
  1. <html><head><title>Test</title>
  2.  
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4.  
  5.  
  6.  
  7. <style type="text/css">
  8.  
  9. #page {background: url(mainbackground.jpg) top left repeat-x;}
  10. #wrap {width:920px; background: url (shadow.png) center top repeat-y;}
  11. #site {margin:0 10px;}
  12.  
  13. </style>
  14.  
  15. </head>
  16.  
  17. <body id="page">
  18.    <div id="wrap">
  19.       <div id="site">
  20.  
  21. <table border="0" width="100%">
  22. </table><table width="946" height="64" align="center" cellpadding="0" cellspacing="4">
  23.   <tbody><tr>
  24.     <td width="904" height="57" bgcolor="#000000">&nbsp;</td>
  25.   </tr>
  26. </tbody></table>
  27. <center>
  28.   <table border="0" cellpadding="0" cellspacing="0" width="946">
  29.     <tbody><tr>
  30.       <td width="933"><table align="center" bgcolor="#ffffff" border="0" bordercolor="#ffffff" cellpadding="1" height="887" width="946">
  31.       <tbody>
  32.       </tbody>
  33.       <tbody>
  34.         <tr>
  35.           <td align="left" height="755" valign="top" width="920">&nbsp;</td>
  36.         </tr>
  37.         </tbody>
  38.       <tbody>
  39.       </tbody>
  40.     </table></td>
  41.     </tr>
  42.   </tbody></table>
  43.  
  44.       </div>
  45.    </div>
  46. </center>
  47. </body>
  48. </html>

Would be too long to post the entire code so I deleted the content and only kept the parts that's relevant.
you misunderstood my first post. you have to replace the values i put in the example to reflect those you are using on your site.

1. it looks like your site is supposed to be 946px wide therefore your shadow.png should be 966px wide provided your shadow is 10px.
so your CSS should be as follows:
HTML and CSS Syntax (Toggle Plain Text) 
  1. #page {
  2.    background: url(mainbackground.jpg) top left repeat-x;
  3. }
  4. #wrap {
  5.    width:966px;
  6.    background: url (shadow.png) center top repeat-y;
  7. }
  8. #site {
  9.    margin:0 10px;
  10. }
did you create your shadow.png in photoshop as directed in the first post?

2. you're using <center> in your html which you shouldn't as it has been deprecated.
are you using this to center your site? if you are, consider adding the code below to your current css instead:
HTML and CSS Syntax (Toggle Plain Text) 
  1. #page {
  2.    text-align:center;
  3. }
  4. #wrap {
  5.    margin:0 auto;
  6.    text-align:left;
  7. }
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 67
Reputation: ytregnn is an unknown quantity at this point 
Solved Threads: 0
ytregnn ytregnn is offline Offline
Junior Poster in Training
 
0
  #9
Oct 14th, 2009
The shadow image (shadow.png - Yes, it's created in Photoshop. I've also tried with a .jpg image) is 966px wide and this is the code I use:

HTML and CSS Syntax (Toggle Plain Text) 
  1. <html><head><title>Test</title>
  2.  
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  4.  
  5.  
  6.  
  7. <style type="text/css">
  8.  
  9. #page {
  10.    background: url(main.jpg) top left repeat-x;
  11.    text-align:center;
  12. }
  13. #wrap {
  14.    width:966px;
  15.    background: url (shadow.png) center top repeat-y;
  16.    margin:0 auto;
  17.    text-align:left;
  18. }
  19. #site {
  20.    margin:0 10px;
  21. }
  22.  
  23. </style>
  24.  
  25. </head>
  26.  
  27. <body id="page">
  28.    <div id="wrap">
  29.       <div id="site">
  30.  
  31. <table border="0" width="100%">
  32. </table><table width="946" height="64" align="center" cellpadding="0" cellspacing="4">
  33.   <tbody><tr>
  34.     <td width="904" height="57" bgcolor="#000000">&nbsp;</td>
  35.   </tr>
  36. </tbody></table>
  37.   <table border="0" cellpadding="0" cellspacing="0" width="946">
  38.     <tbody><tr>
  39.       <td width="933"><table align="center" bgcolor="#ffffff" border="0" bordercolor="#ffffff" cellpadding="1" height="887" width="946">
  40.       <tbody>
  41.       </tbody>
  42.       <tbody>
  43.         <tr>
  44.           <td align="left" height="755" valign="top" width="920">&nbsp;</td>
  45.         </tr>
  46.         </tbody>
  47.       <tbody>
  48.       </tbody>
  49.     </table></td>
  50.     </tr>
  51.   </tbody></table>
  52.  
  53.       </div>
  54.  
  55.    </div>
  56.    </div>
  57. </body>
  58. </html>

Unfortunately the same problem occur; I can only see my main background (main.jpg), no shadow (shadow.png) what so ever is visible in the page - but I can see the div (10 px on each side) on the side in my HTML Editor (Dreamweaver), so the problem can't be there. Must be something wrong in one of the three parts of the CSS.

There's also another problem - the main background (main.jpg) is not shown from top to bottom, only half way. If I use normal HTML code (<body background, etc) there's no problem.

Thanks for all the help so far.

Robin
Last edited by ytregnn; Oct 14th, 2009 at 4:22 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 67
Reputation: ytregnn is an unknown quantity at this point 
Solved Threads: 0
ytregnn ytregnn is offline Offline
Junior Poster in Training
 
0
  #10
Oct 16th, 2009
I'm still struggling with this problem... no one that might know where I'm doing wrong?

Thanks.
Reply With Quote Quick reply to this message  
Reply
1 2

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC