Subject: Re: A technique for laying text over images

From: David Harris <[email-masked]>
Date: Sat, 10 Mar 2007 01:48:26 +0000

Dear Arun,

I don't think I  have written to you since August 10 of 2006.  But I owe 
you my gratitude for your suggestion of using CSS.  Initially I had a 
hard time finding the best ways to accomplish some tasks. Then we found 
the O'Reilly Safari site at http://safari.oreilly.com , which offers a 
vast online library of the high quality O'Reilly publications.  With 
that library available, I began receiving the benefits of the CSS 
approach.  With the 2007 Darwin Day now finished, I have begun inviting 
the people who were willing to translate to begin their language's 
translation.

Again, thank you very much for your good advice,

  - David Harris acting as the Translation coordinator 
<[email-masked]>

Arun wrote:
> Hi David!
>
> This technique is good, it would help us resolve many issues and 
> simplify tasks.
> There's something I noticed about the Darwin Day website code: it uses 
> tables for layout. These days people are abandoning tables and using 
> CSS for complete layouts. It is more flexible and easier to update and 
> loads in a jiffy. My humble suggestion is that you opt for CSS, that 
> would give you a lot of benefit and make it future-proof as well.
>
> Do check out this link, I'm sure it'll convert you into a CSS fan:
> http://www.davespicks.com/essays/notables.html
>
> These links would give you a lot of pro-css resources:
> http://www.alistapart.com
> http://www.sitepoint.com/article/rock-solid-css-layouts
>
> Regards,
> Arun
>
>
> On 8/10/06, *David Harris* <[email-masked] 
> <mailto:[email-masked]>> wrote:
>
>     Hi, Arun!
>
>     I found this technique for laying text over images (at "your image"
>     below) based on Cascading Style Sheets.   Do you know of problems with
>     this approach, or a better way of accomplishing the making of
>     translated
>     text lie  upon a general image?
>
>     The sample below is the way it was given as an example.  I'm
>     developing
>     it for our specific needs.
>
>       - David
>
>     <style type="text/css">
>     #outter {
>             width : 400px;
>             height : 80px;
>             padding : 0;
>             margin : 0;
>             background-image: url(your image);
>             border : 1px solid green;
>             position : relative;
>     }
>
>     #inner {
>             position:absolute;
>             z-index : 2;
>             left: 50%;
>             top: 50%;
>             border : 1px solid blue;
>             margin-top : -10px;
>             margin-left : -75px;
>     }
>     </style>
>
>     <div id="outter">
>             <div id="inner">Needlepoint Shop Guilford</div>
>     </div>
>
>
>
>