Adam Hardy wrote:
>francky on 05/11/06 02:00, wrote:
>
>
>>Adam wrote:
>>
>>
>>>I am trying to apply a graphical look to my main content divs using a
>>>set of images giving them rounded corners and shading.
>>>
>[snip]
>
>
>>Hi Adam,
>>Maybe this can be usefull?
>>http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
>>
>>It is without absolute positioning! :-)
>>
>>
>OK, good, what you have is this:
>
><div class="top-left"></div>
><div class="top-right"></div>
>
><div class="inside">
>
><p class="notopgap">...</p>
>...
><p class="nobottomgap">...</p>
>
></div>
><div class="bottom-left"></div>
><div class="bottom-right"></div>
>
>and the reason for the classes on the two <p> elements is to remove the gap
>between the top box and the middle content box (see the description halfway
>down
>the page).
>
>How about giving the top and bottom divs negative margins underneath and on
>top
>respectively instead?
>
>I can't currently try out my theory because I'm at home on linux with no IE,
>but
>I'm looking at encapsulating the HTML for this in a java taglib for JSPs, and
>those classes on the <p> elements are the only things that stand in the way of
>a
>perfect solution.
>
>regards
>Adam
>
Hi Adam,
Yes, in principle it is possible to give the top (or bottom) div's a
negative margin-bottom (or margin-top) to avoid a gap with the first (or
last) element in the .inside div. - However: the condition is, that the
negative margin is exactly equal to the default (or otherwise in the css
given) positive margin of the first (or last) element in the .inside div.
* if neg. margin-bottom of top div is larger than pos. margin-top of
first element inside: still a gap.
* if neg. margin-bottom of top div is smaller than pos. margin-top
of first element inside: then the whole inside is lifted upwards,
and the left and right borders of the content will cross over the
transparent corners.
As the elements inside can be a <p> or a <h1> or whatever (depending on
the content of what is inside the corner box), the negative margins
cannot be implemented in a universal way. To fit in a corner box, there
have to be adapted margins for the first/last element in that particular
box.
* Aside: if the first/last element in the corner box have (by
previous css) a margin-top (-bottom) of zero, there is no problem:
the classes .notopgap and .nobottomgap aren't needed then, of
course. - And sometimes a vertical padding instead of vertical
margin could be an option.
Happily an alternative is possible for the remaining cases.
See page Gap Safe Alternative
<http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners-gapsaver.htm>.
:-)
Success and greetings,
francky
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
