Hi,
I am making a my content box with jpeg corner images on the top and bottom. Both corner images have corners for both sides of the box (left & right).
I am trying to make the corners positioned relative to the contentbox, so when I change the text (causing either the box to grow or shrink), the corners will move relative to the change in the contentbox.
Here is my coding:
<div id=“center” class=“body”>
<div id=“plain_wood”>
<div id=“fading_wood”>
<div id=“fading_woodbottom”>
<div><img style=“position:absolute; top:278px; padding-left:34px” src=“graphics/topcorners.jpg” /></div>
<div class=“contentbox”>
<div class=“information”>
<h1>About Us</h1>
<hr />
<div id=“lgtext”><p>Unofficial Rules</p></div>
<h3>Important Note Regarding World Records</h3>
<div id=“text”><p>This is an International Land-Based Shark Fishing Association (ILSFA) sanctioned event. Therefore, anglers interested in submitting catches made during the tournament for official world records are encouraged to become familiar with those requirements.</p></div>
<div id=“gallery”>
<ul>
<li><a href=“gallery/muskie1.jpg” title=“Kyle Moxon”><img src=“gallery/thumb_image1.jpg” width=“75” height=“75” alt=“Kyle Moxon with a Muskie” /></a></li>
</ul>
</div>
<br />
</div>
</div>
<div><img style=“position:absolute; bottom:51px; padding-left:34px” src=“graphics/bottomcorners.jpg” /></div>
</div>
</div>
</div>
</div>
[B]Here is my CSS:[B]
#center {
margin-left: auto;
margin-right: auto;
width: 800px;
}
div.body {
margin:0em;
padding:0em;
color:#916130;
font-family:“Times New Roman”, Times, serif;
font-size:0.8125em;
text-align:center;
font-weight:bold;
vertical-align:text-top;
}
#plain_wood{
background: transparent url(…/graphics/plainwood.gif);
}
#fading_wood{
background: transparent url(…/graphics/fadingwood.gif) repeat-x top left;
}
#fading_woodbottom{
background: transparent url(…/graphics/faddingwoodmuskie_bottom.gif) repeat-x bottom left;
padding-bottom:200px;
}
div.contentbox {
padding:20px;
padding-top:30px;
padding-bottom:30px;
width:760px;
}
div.information {
width:700px;
margin:auto;
padding:1.5em;
text-align:left;
background-color:#FFF;
}
Any help would really be appreciated!