...

View Full Version : Content box with gradient border and pattern issue



ivailoi
01-14-2010, 10:21 AM
Hello,
I tried to code the following content box, but did not succeeded with this task.

http://img710.imageshack.us/img710/5493/contentbox.jpg

The shadow on the left and the right border of the content box has a gradient and pattern, which goes fluently into the background, which also has a pattern, but no gradient. The resizing of the browser window doesn't cause a pattern shifting between shadow and background.

I tried to code this with a table and div tag, I played with the cell width, cell background, background position and the repeat parameter - the result was a complete disaster :eek:

I am not asking for complete problem solution, but only for problem solving directions. Any help is thankfully accepted :rolleyes::thumbsup:

ivailoi
01-14-2010, 12:08 PM
Well, I tried it again, and this time it worked:


.centercontent {
background-color: #FFF;
padding: 0px;
width: 400px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -200px;
position: relative;
left: 50%;
}
.left {
background-image: url(boxleft.jpg);
background-repeat: repeat-y;
background-position: right top;
margin: 0px;
padding: 0px;
width: 158px;
position: relative;
right: 100%;
}
.leftbgr {
background-image: url(mainbgrborder.jpg);
background-repeat: repeat;
background-position: right top;
}
.rightbgr {
background-image: url(mainbgrborder.jpg);
background-repeat: repeat;
background-position: left top;
}
.right {
background-image: url(boxright.jpg);
background-repeat: repeat-y;
background-position: left top;
margin: 0px;
padding: 0px;
width: 158px;
left: 0%;
}



<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="leftbgr">&nbsp;</td>
<td class="left">&nbsp;</td>
<td class="centercontent"><p>Some content</p>
<p>&nbsp;</p></td>
<td class="right">&nbsp;</td>
<td class="rightbgr">&nbsp;</td>
</tr>
</table>

Excavator
01-14-2010, 04:59 PM
Hello ivailoi,
This could probably be done pretty easily with nested divs instead of tables. See the link in my sig about tables.

Can we get linked to the test site so your images are available?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum