[thelist] Re: thelist digest, Vol 1 #2883 - 18 msgs

[Keith Dahlby]

Andrew:

I haven't tried this, but it should work:

<style>
.corner { float: right; width: 10px; height: 10px; position: relative;
display: block; }
</style>
....
<td class="rightfill">
         <span class="corner" style="background-image:
url(/images/ltcorner.gif); top: 0; left: 0"></span>
         <span class="corner" style="background-image:
url(/images/rtcorner.gif); top: 0; right: 0"></span>
         <span class="corner" style="background-image:
url(/images/lbcorner.gif); bottom: 0; left: 0"></span>
         <span class="corner" style="background-image:
url(/images/rbcorner.gif); bottom: 0; right: 0"></span>
         table cell contents, or &nbsp;
</td>

I made a corner class and used inline styling for simplicity; how this is
implemented is really up to you.  Suggestions for improvement are welcome.

Cheers ~ K


>From: "Andrew Maynes" <andrew at humanbehaviour.co.uk>
>To: "Thelist at Lists. Evolt. Org" <thelist at lists.evolt.org>
>Date: Sun, 19 Jan 2003 13:06:56 -0000
>Subject: [thelist] CSS  image position
>Reply-To: thelist at lists.evolt.org
>
>This is probably impossible but there must be a way around it and more than
>likely involves *not* using tables!
>
>I have a right <TD> and want to position corner images at the top and
>bottom of
>the <TD> but it is only possible to have one backround image with the same
>class:
>
>TD.rightfill {
>color : #000000;
>background-color :#DBDBD2;
>border : 0px solid #FFFFCC;
>width : 19%;
>margin:5px 5px 0px 5px;
>background-image: url(../images/rcorner.gif);
>background-repeat: no-repeat;
>background-position: top right;
>background-attachment: fixed;
>font-family : Verdana, Arial, Helvetica, sans-serif, "MS sans serif";
>font-size : 11px;
>padding-left : 5px;
>}
>
>So how would I over come this so that I can create 4
>
>background-image: url(../images/ltcorner.gif);
>background-image: url(../images/rtcorner.gif);
>background-image: url(../images/rbcorner.gif);
>background-image: url(../images/lbcorner.gif);
>
>Thanks
>
>Andrew