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.
Jump to Post1. 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 …
Jump to Postyes... i used a color on #page as an example but you can use an image as well. so it can be as so:
#page {background: url (..images/page-bg.png) top left repeat-x;} #wrap {width:920px; background: url (..images/shadow.png) center top repeat-y;} #site {margin:0 10px;}page-bg.png - background on the …
Jump to Postdid you add the margin?
could you post your css and html files up so i can have a look please.
Jump to Post<html><head><title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #page {background: url(mainbackground.jpg) top left repeat-x;} #wrap {width:920px; background: url (shadow.png) center top repeat-y;} #site {margin:0 10px;} </style> </head> <body id="page"> <div id="wrap"> <div id="site"> <table border="0" width="100%"> </table><table width="946" height="64" align="center" cellpadding="0" cellspacing="4"> <tbody><tr> <td width="904" height="57" bgcolor="#000000"> </td> </tr> …
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
<body id="page">
<div id="wrap">
<div id="site">
</div>
</div>
</body>and css
#page {background-color:#fff;}
#wrap {width:920px; background: url (..images/shadow.png) center top repeat-y;}
#site {margin:0 10px;}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?
yes... i used a color on #page as an example but you can use an image as well. so it can be as so:
#page {background: url (..images/page-bg.png) top left repeat-x;}
#wrap {width:920px; background: url (..images/shadow.png) center top repeat-y;}
#site {margin:0 10px;}page-bg.png - background on the body of the site
shadow.png - background on the div#wrap
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..
did you add the margin?
could you post your css and html files up so i can have a look please.
<html><head><title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#page {background: url(mainbackground.jpg) top left repeat-x;}
#wrap {width:920px; background: url (shadow.png) center top repeat-y;}
#site {margin:0 10px;}
</style>
</head>
<body id="page">
<div id="wrap">
<div id="site">
<table border="0" width="100%">
</table><table width="946" height="64" align="center" cellpadding="0" cellspacing="4">
<tbody><tr>
<td width="904" height="57" bgcolor="#000000"> </td>
</tr>
</tbody></table>
<center>
<table border="0" cellpadding="0" cellspacing="0" width="920">
<tbody><tr>
<td width="933"><table align="center" bgcolor="#ffffff" border="0" bordercolor="#ffffff" cellpadding="1" height="887" width="946">
<tbody>
</tbody>
<tbody>
<tr>
<td align="left" height="755" valign="top" width="920"> </td>
</tr>
</tbody>
<tbody>
</tbody>
</table></td>
</tr>
</tbody></table>
</div>
</div>
</center>
</body>
</html>Would be too long to post the entire code so I deleted the content and only kept the parts that's relevant.
<html><head><title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #page {background: url(mainbackground.jpg) top left repeat-x;} #wrap {width:920px; background: url (shadow.png) center top repeat-y;} #site {margin:0 10px;} </style> </head> <body id="page"> <div id="wrap"> <div id="site"> <table border="0" width="100%"> </table><table width="946" height="64" align="center" cellpadding="0" cellspacing="4"> <tbody><tr> <td width="904" height="57" bgcolor="#000000"> </td> </tr> </tbody></table> <center> <table border="0" cellpadding="0" cellspacing="0" width="946"> <tbody><tr> <td width="933"><table align="center" bgcolor="#ffffff" border="0" bordercolor="#ffffff" cellpadding="1" height="887" width="946"> <tbody> </tbody> <tbody> <tr> <td align="left" height="755" valign="top" width="920"> </td> </tr> </tbody> <tbody> </tbody> </table></td> </tr> </tbody></table> </div> </div> </center> </body> </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:
#page {
background: url(mainbackground.jpg) top left repeat-x;
}
#wrap {
width:966px;
background: url (shadow.png) center top repeat-y;
}
#site {
margin:0 10px;
}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:
#page {
text-align:center;
}
#wrap {
margin:0 auto;
text-align:left;
}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><head><title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#page {
background: url(main.jpg) top left repeat-x;
text-align:center;
}
#wrap {
width:966px;
background: url (shadow.png) center top repeat-y;
margin:0 auto;
text-align:left;
}
#site {
margin:0 10px;
}
</style>
</head>
<body id="page">
<div id="wrap">
<div id="site">
<table border="0" width="100%">
</table><table width="946" height="64" align="center" cellpadding="0" cellspacing="4">
<tbody><tr>
<td width="904" height="57" bgcolor="#000000"> </td>
</tr>
</tbody></table>
<table border="0" cellpadding="0" cellspacing="0" width="946">
<tbody><tr>
<td width="933"><table align="center" bgcolor="#ffffff" border="0" bordercolor="#ffffff" cellpadding="1" height="887" width="946">
<tbody>
</tbody>
<tbody>
<tr>
<td align="left" height="755" valign="top" width="920"> </td>
</tr>
</tbody>
<tbody>
</tbody>
</table></td>
</tr>
</tbody></table>
</div>
</div>
</div>
</body>
</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
I'm still struggling with this problem... no one that might know where I'm doing wrong?
Thanks.
Aww... the joy of Dreamweaver generated code. I'm not suprised your having issues with all those tables!
Hmm... well, we'll start with the easier of you problems. Obviously I don't know the dimensions of the main.jpg, but I suspect that the reason why it is only showing half way down the page is because it is set to only repeat on x - only repeating horizontally. Change this to just repeat, so that it repeats both horizontally (x) and vertically (y).
page {
background: url(main.jpg) top left repeat;
text-align:center;
}With the shadow problem, it would help if I knew what sort of content was in those table cells, because currently it doesn't really mean anything...
I don't know how far along you are with this, but if you must use dreamweaver/tables, try this:
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#page {
background: url(main.jpg) top left repeat;
}
#wrap {
width:966px;
background: url (shadow.png) center top repeat-y;
margin:0 auto;
}
#site {
margin:0 10px;
}
</style>
</head>
<body id="page">
<div id="wrap">
<table width="946" id="site" cellpadding="0" cellspacing="4">
<tbody>
<tr>
<td>Stuff goes in here.</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Obviously I don't know the demands of your layout, so I've simplified it A LOT, so hopefully you can start to see what's going on and what it should be doing.
Hope this helps you out.
Laura
Remove the white space between url and bracket in CSS syntax.
Here it is..
#wrap {
background: url (shadow.png) center top repeat-y;replace with
#wrap {
background: url(shadow.png) center top repeat-y;This is the only error I found it. And you need to validate your HTML.
Have tried this numerous times no with no success.
Dont know what I'm doing wrong.
Just wanted to say that I got it right now.. finally. :) Thanks for all the help.
That's good :) What was causing the problems? Might be worth knowing myself for future reference =D
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.