Carol Swinehart wrote:
> I need to put a curved corner fluid box on a fluid page. The box
> will enlarge vertical and horizontally but needs to stay 551px above
> the bottom of the page.
>
> Any suggestions for techniques are most appreciated.
>
> Carol
>
Hi,
The only clean way to do this at the moment does hamper a bit if you
want your markup to remain strictly semantic.
If you need 4 rounded corners, you cascade 4 div elements within each
other and each div a background image, which is then positioned into
each needed corner. The innermost div will have the actual content and
needs some padding. The width should also be applied to the innermost
element, since its the actual once containing any real content.
------------------
Example:
<style type="text/css">
<!--
div.topleft {
background: url(/images/topleft.png) no-repeat top left;
}
div.topright {
background: url(/images/topright.png) no-repeat top right;
}
div.bottomleft {
background: url(/images/bottomleft.png) no-repeat bottom left;
}
div.bottomright {
width: 10em;
padding: 1em;
background: url(/images/bottomright.png) no-repeat bottom right;
}
-->
</style>
<div class="topleft">
<div class="topright">
<div class="bottomleft">
<div class="bottomright">
<p>Content goes here</p>
</div>
</div>
</div>
</div>
------------------
To make it stay away from the bottom at a fixed measure you could wrap
it into 1 more div, position that one absolutly and keep it left and
with a negative height of 551px.
regards, Jens
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
