Adding picture into text box

[dwolf]

Client would like to have her handmade W used as the first letter of the
text on this page...
http://webpages.charter.net/joel40/

I always spend some time before asking... but could not figure it out....

Thanks
Joel

[Twayne]

In news:hm6ujt$hat$1@DailyPlanet.news.netobjects.com,
dwolf <jojonospam@hotmail.com> typed:
> Client would like to have her handmade W used as the first letter of
> the text on this page...
> http://webpages.charter.net/joel40/
>
> I always spend some time before asking... but could not figure it
> out....
> Thanks
> Joel

Use an image as the first letter or wherever you want the "W". A .png will
likely give you the smallest filesize, plus allow transparency like a .gif
so you don't see the background or borders around the letter.

HTH,

Twayne




--
--
Life is the only real counselor; wisdom unfiltered
through personal experience does not become a
part of the moral tissue.

[dwolf]

When I bring it over to the text box it's overlapping and we know NOF does
not like that.

"Twayne" <nobody@spamcop.net> wrote in message
news:hm70r2$iom$1@DailyPlanet.news.netobjects.com. ..
> In news:hm6ujt$hat$1@DailyPlanet.news.netobjects.com,
> dwolf <jojonospam@hotmail.com> typed:
>> Client would like to have her handmade W used as the first letter of
>> the text on this page...
>> http://webpages.charter.net/joel40/
>>
>> I always spend some time before asking... but could not figure it
>> out....
>> Thanks
>> Joel
>
> Use an image as the first letter or wherever you want the "W". A .png will
> likely give you the smallest filesize, plus allow transparency like a .gif
> so you don't see the background or borders around the letter.
>
> HTH,
>
> Twayne
>
>
>
>
> --
> --
> Life is the only real counselor; wisdom unfiltered
> through personal experience does not become a
> part of the moral tissue.

[Technology Ideas Pty Ltd]

You can do this via code & CSS:

CTRL+T where you want the text:
<p class="capitalW"><span class="initial">W</span>ith in this web site, you'll
find beautiful custom calligraphy designed, hand-lettered and illustrated by
professional artist Mary Teichman. With over 30 years of experience, Mary
can transform your wedding certificate, poem, citation, announcement or
invitation into a beautiful work of art. Mary specializes in wedding
certificates for Quaker or non-Quaker marriage ceremonies, honorary degrees,
illuminated letters, decorated borders, certificates, citations, gifts and
custom egg tempera illustrations. Inspired by historical examples and using
archival materials that will last over time (permanent inks, 100% rag paper,
22K gold leaf) Mary creates custom calligraphic art made to your
specifications.</p>

Add to your CSS:
..initial { display: none; }
p.capitalW {
line-height: 1em;
background-image: url(capitalW.gif);
background-repeat: no-repeat;
text-indent: 95px;
padding-top: 72px;
}

You need to do the span so the capital etter doesn't repeat in the
paragraph.
This can be done for all letters of course using this theory.
--
Andrew Baker
Technology Ideas
http://www.technologyideas.com.au
Australia

"dwolf" <jojonospam@hotmail.com> wrote in message
news:hm72ff$jo6$1@DailyPlanet.news.netobjects.com. ..
> When I bring it over to the text box it's overlapping and we know NOF does
> not like that.
>
> "Twayne" <nobody@spamcop.net> wrote in message
> news:hm70r2$iom$1@DailyPlanet.news.netobjects.com. ..
>> In news:hm6ujt$hat$1@DailyPlanet.news.netobjects.com,
>> dwolf <jojonospam@hotmail.com> typed:
>>> Client would like to have her handmade W used as the first letter of
>>> the text on this page...
>>> http://webpages.charter.net/joel40/
>>>
>>> I always spend some time before asking... but could not figure it
>>> out....
>>> Thanks
>>> Joel
>>
>> Use an image as the first letter or wherever you want the "W". A .png
>> will likely give you the smallest filesize, plus allow transparency like
>> a .gif so you don't see the background or borders around the letter.
>>
>> HTH,
>>
>> Twayne
>>
>>
>>
>>
>> --
>> --
>> Life is the only real counselor; wisdom unfiltered
>> through personal experience does not become a
>> part of the moral tissue.
>

[dwolf]

Looks like great advice ??
But over my head

"Technology Ideas Pty Ltd" <info@(remove)technologyideas.com.au> wrote in
message news:hm76sn$m7v$1@DailyPlanet.news.netobjects.com. ..
> You can do this via code & CSS:
>
> CTRL+T where you want the text:
> <p class="capitalW"><span class="initial">W</span>ith in this web site,
> you'll find beautiful custom calligraphy designed, hand-lettered and
> illustrated by professional artist Mary Teichman. With over 30 years of
> experience, Mary can transform your wedding certificate, poem, citation,
> announcement or invitation into a beautiful work of art. Mary specializes
> in wedding certificates for Quaker or non-Quaker marriage ceremonies,
> honorary degrees, illuminated letters, decorated borders, certificates,
> citations, gifts and custom egg tempera illustrations. Inspired by
> historical examples and using archival materials that will last over time
> (permanent inks, 100% rag paper, 22K gold leaf) Mary creates custom
> calligraphic art made to your specifications.</p>
>
> Add to your CSS:
> .initial { display: none; }
> p.capitalW {
> line-height: 1em;
> background-image: url(capitalW.gif);
> background-repeat: no-repeat;
> text-indent: 95px;
> padding-top: 72px;
> }
>
> You need to do the span so the capital etter doesn't repeat in the
> paragraph.
> This can be done for all letters of course using this theory.
> --
> Andrew Baker
> Technology Ideas
> http://www.technologyideas.com.au
> Australia
>
> "dwolf" <jojonospam@hotmail.com> wrote in message
> news:hm72ff$jo6$1@DailyPlanet.news.netobjects.com. ..
>> When I bring it over to the text box it's overlapping and we know NOF
>> does not like that.
>>
>> "Twayne" <nobody@spamcop.net> wrote in message
>> news:hm70r2$iom$1@DailyPlanet.news.netobjects.com. ..
>>> In news:hm6ujt$hat$1@DailyPlanet.news.netobjects.com,
>>> dwolf <jojonospam@hotmail.com> typed:
>>>> Client would like to have her handmade W used as the first letter of
>>>> the text on this page...
>>>> http://webpages.charter.net/joel40/
>>>>
>>>> I always spend some time before asking... but could not figure it
>>>> out....
>>>> Thanks
>>>> Joel
>>>
>>> Use an image as the first letter or wherever you want the "W". A .png
>>> will likely give you the smallest filesize, plus allow transparency like
>>> a .gif so you don't see the background or borders around the letter.
>>>
>>> HTH,
>>>
>>> Twayne
>>>
>>>
>>>
>>>
>>> --
>>> --
>>> Life is the only real counselor; wisdom unfiltered
>>> through personal experience does not become a
>>> part of the moral tissue.
>>
>
>

[Technology Ideas Pty Ltd]

Create a graphic called capitalW.gif that is the right font, size and colour
as you want it.

Instead of typing the paragraph out, highlight all of that text area and
then press CTRL+T at the same time and paste:
<p class="capitalW"><span class="initial">W</span>ith in this web site,
you'll find beautiful custom calligraphy designed, hand-lettered and
illustrated by professional artist Mary Teichman. With over 30 years of
experience, Mary can transform your wedding certificate, poem, citation,
announcement or invitation into a beautiful work of art. Mary specializes
in wedding certificates for Quaker or non-Quaker marriage ceremonies,
honorary degrees, illuminated letters, decorated borders, certificates,
citations, gifts and custom egg tempera illustrations. Inspired by
historical examples and using archival materials that will last over time
(permanent inks, 100% rag paper, 22K gold leaf) Mary creates custom
calligraphic art made to your specifications.</p>

Then click STYLE menu at the top of NOF, and then the CSS Code tab and paste
the following at the bottom of that area:

..initial { display: none; }
p.capitalW {
line-height: 1em;
background-image: url(capitalW.gif);
background-repeat: no-repeat;
text-indent: 95px;
padding-top: 72px;
}

You may need to play around with the px settings above to get the W
correctly, but that's about it. Repeat for all letters you require.

If it's just a one off W and no other pages need it, then just create the W
as a GIF file and then place it inline with the text by clicking the IMAGE
icon and then click next to the "hen" of "When" deleting the actual letter
"W".
--
Andrew Baker
Technology Ideas
http://www.technologyideas.com.au
Australia

"dwolf" <jojonospam@hotmail.com> wrote in message
news:hm788e$mst$1@DailyPlanet.news.netobjects.com. ..
> Looks like great advice ??
> But over my head
>
> "Technology Ideas Pty Ltd" <info@(remove)technologyideas.com.au> wrote in
> message news:hm76sn$m7v$1@DailyPlanet.news.netobjects.com. ..
>> You can do this via code & CSS:
>>
>> CTRL+T where you want the text:
>> <p class="capitalW"><span class="initial">W</span>ith in this web site,
>> you'll find beautiful custom calligraphy designed, hand-lettered and
>> illustrated by professional artist Mary Teichman. With over 30 years of
>> experience, Mary can transform your wedding certificate, poem, citation,
>> announcement or invitation into a beautiful work of art. Mary
>> specializes in wedding certificates for Quaker or non-Quaker marriage
>> ceremonies, honorary degrees, illuminated letters, decorated borders,
>> certificates, citations, gifts and custom egg tempera illustrations.
>> Inspired by historical examples and using archival materials that will
>> last over time (permanent inks, 100% rag paper, 22K gold leaf) Mary
>> creates custom calligraphic art made to your specifications.</p>
>>
>> Add to your CSS:
>> .initial { display: none; }
>> p.capitalW {
>> line-height: 1em;
>> background-image: url(capitalW.gif);
>> background-repeat: no-repeat;
>> text-indent: 95px;
>> padding-top: 72px;
>> }
>>
>> You need to do the span so the capital etter doesn't repeat in the
>> paragraph.
>> This can be done for all letters of course using this theory.
>> --
>> Andrew Baker
>> Technology Ideas
>> http://www.technologyideas.com.au
>> Australia
>>
>> "dwolf" <jojonospam@hotmail.com> wrote in message
>> news:hm72ff$jo6$1@DailyPlanet.news.netobjects.com. ..
>>> When I bring it over to the text box it's overlapping and we know NOF
>>> does not like that.
>>>
>>> "Twayne" <nobody@spamcop.net> wrote in message
>>> news:hm70r2$iom$1@DailyPlanet.news.netobjects.com. ..
>>>> In news:hm6ujt$hat$1@DailyPlanet.news.netobjects.com,
>>>> dwolf <jojonospam@hotmail.com> typed:
>>>>> Client would like to have her handmade W used as the first letter of
>>>>> the text on this page...
>>>>> http://webpages.charter.net/joel40/
>>>>>
>>>>> I always spend some time before asking... but could not figure it
>>>>> out....
>>>>> Thanks
>>>>> Joel
>>>>
>>>> Use an image as the first letter or wherever you want the "W". A .png
>>>> will likely give you the smallest filesize, plus allow transparency
>>>> like a .gif so you don't see the background or borders around the
>>>> letter.
>>>>
>>>> HTH,
>>>>
>>>> Twayne
>>>>
>>>>
>>>>
>>>>
>>>> --
>>>> --
>>>> Life is the only real counselor; wisdom unfiltered
>>>> through personal experience does not become a
>>>> part of the moral tissue.
>>>
>>
>>
>

[dwolf]

It is a one off... so I tried that approach... It works but does not place
it where I want. I want the W to stick up from the text. That approach
aligned the W with the top of the text and then there was a big gap between
line one and two

"Technology Ideas Pty Ltd" <info@(remove)technologyideas.com.au> wrote in
message news:hm78oj$n5n$1@DailyPlanet.news.netobjects.com. ..
> Create a graphic called capitalW.gif that is the right font, size and
> colour as you want it.
>
> Instead of typing the paragraph out, highlight all of that text area and
> then press CTRL+T at the same time and paste:
> <p class="capitalW"><span class="initial">W</span>ith in this web site,
> you'll find beautiful custom calligraphy designed, hand-lettered and
> illustrated by professional artist Mary Teichman. With over 30 years of
> experience, Mary can transform your wedding certificate, poem, citation,
> announcement or invitation into a beautiful work of art. Mary specializes
> in wedding certificates for Quaker or non-Quaker marriage ceremonies,
> honorary degrees, illuminated letters, decorated borders, certificates,
> citations, gifts and custom egg tempera illustrations. Inspired by
> historical examples and using archival materials that will last over time
> (permanent inks, 100% rag paper, 22K gold leaf) Mary creates custom
> calligraphic art made to your specifications.</p>
>
> Then click STYLE menu at the top of NOF, and then the CSS Code tab and
> paste the following at the bottom of that area:
>
> .initial { display: none; }
> p.capitalW {
> line-height: 1em;
> background-image: url(capitalW.gif);
> background-repeat: no-repeat;
> text-indent: 95px;
> padding-top: 72px;
> }
>
> You may need to play around with the px settings above to get the W
> correctly, but that's about it. Repeat for all letters you require.
>
> If it's just a one off W and no other pages need it, then just create the
> W as a GIF file and then place it inline with the text by clicking the
> IMAGE icon and then click next to the "hen" of "When" deleting the actual
> letter "W".
> --
> Andrew Baker
> Technology Ideas
> http://www.technologyideas.com.au
> Australia
>
> "dwolf" <jojonospam@hotmail.com> wrote in message
> news:hm788e$mst$1@DailyPlanet.news.netobjects.com. ..
>> Looks like great advice ??
>> But over my head
>>
>> "Technology Ideas Pty Ltd" <info@(remove)technologyideas.com.au> wrote in
>> message news:hm76sn$m7v$1@DailyPlanet.news.netobjects.com. ..
>>> You can do this via code & CSS:
>>>
>>> CTRL+T where you want the text:
>>> <p class="capitalW"><span class="initial">W</span>ith in this web site,
>>> you'll find beautiful custom calligraphy designed, hand-lettered and
>>> illustrated by professional artist Mary Teichman. With over 30 years of
>>> experience, Mary can transform your wedding certificate, poem, citation,
>>> announcement or invitation into a beautiful work of art. Mary
>>> specializes in wedding certificates for Quaker or non-Quaker marriage
>>> ceremonies, honorary degrees, illuminated letters, decorated borders,
>>> certificates, citations, gifts and custom egg tempera illustrations.
>>> Inspired by historical examples and using archival materials that will
>>> last over time (permanent inks, 100% rag paper, 22K gold leaf) Mary
>>> creates custom calligraphic art made to your specifications.</p>
>>>
>>> Add to your CSS:
>>> .initial { display: none; }
>>> p.capitalW {
>>> line-height: 1em;
>>> background-image: url(capitalW.gif);
>>> background-repeat: no-repeat;
>>> text-indent: 95px;
>>> padding-top: 72px;
>>> }
>>>
>>> You need to do the span so the capital etter doesn't repeat in the
>>> paragraph.
>>> This can be done for all letters of course using this theory.
>>> --
>>> Andrew Baker
>>> Technology Ideas
>>> http://www.technologyideas.com.au
>>> Australia
>>>
>>> "dwolf" <jojonospam@hotmail.com> wrote in message
>>> news:hm72ff$jo6$1@DailyPlanet.news.netobjects.com. ..
>>>> When I bring it over to the text box it's overlapping and we know NOF
>>>> does not like that.
>>>>
>>>> "Twayne" <nobody@spamcop.net> wrote in message
>>>> news:hm70r2$iom$1@DailyPlanet.news.netobjects.com. ..
>>>>> In news:hm6ujt$hat$1@DailyPlanet.news.netobjects.com,
>>>>> dwolf <jojonospam@hotmail.com> typed:
>>>>>> Client would like to have her handmade W used as the first letter of
>>>>>> the text on this page...
>>>>>> http://webpages.charter.net/joel40/
>>>>>>
>>>>>> I always spend some time before asking... but could not figure it
>>>>>> out....
>>>>>> Thanks
>>>>>> Joel
>>>>>
>>>>> Use an image as the first letter or wherever you want the "W". A .png
>>>>> will likely give you the smallest filesize, plus allow transparency
>>>>> like a .gif so you don't see the background or borders around the
>>>>> letter.
>>>>>
>>>>> HTH,
>>>>>
>>>>> Twayne
>>>>>
>>>>>
>>>>>
>>>>>
>>>>> --
>>>>> --
>>>>> Life is the only real counselor; wisdom unfiltered
>>>>> through personal experience does not become a
>>>>> part of the moral tissue.
>>>>
>>>
>>>
>>
>
>

[dwolf]

Here is how it came out
http://webpages.charter.net/joel40/e...__invites.html

"dwolf" <jojonospam@hotmail.com> wrote in message
news:hm8h0d$99t$1@DailyPlanet.news.netobjects.com. ..
> It is a one off... so I tried that approach... It works but does not place
> it where I want. I want the W to stick up from the text. That approach
> aligned the W with the top of the text and then there was a big gap
> between line one and two
>
> "Technology Ideas Pty Ltd" <info@(remove)technologyideas.com.au> wrote in
> message news:hm78oj$n5n$1@DailyPlanet.news.netobjects.com. ..
>> Create a graphic called capitalW.gif that is the right font, size and
>> colour as you want it.
>>
>> Instead of typing the paragraph out, highlight all of that text area and
>> then press CTRL+T at the same time and paste:
>> <p class="capitalW"><span class="initial">W</span>ith in this web site,
>> you'll find beautiful custom calligraphy designed, hand-lettered and
>> illustrated by professional artist Mary Teichman. With over 30 years of
>> experience, Mary can transform your wedding certificate, poem, citation,
>> announcement or invitation into a beautiful work of art. Mary
>> specializes in wedding certificates for Quaker or non-Quaker marriage
>> ceremonies, honorary degrees, illuminated letters, decorated borders,
>> certificates, citations, gifts and custom egg tempera illustrations.
>> Inspired by historical examples and using archival materials that will
>> last over time (permanent inks, 100% rag paper, 22K gold leaf) Mary
>> creates custom calligraphic art made to your specifications.</p>
>>
>> Then click STYLE menu at the top of NOF, and then the CSS Code tab and
>> paste the following at the bottom of that area:
>>
>> .initial { display: none; }
>> p.capitalW {
>> line-height: 1em;
>> background-image: url(capitalW.gif);
>> background-repeat: no-repeat;
>> text-indent: 95px;
>> padding-top: 72px;
>> }
>>
>> You may need to play around with the px settings above to get the W
>> correctly, but that's about it. Repeat for all letters you require.
>>
>> If it's just a one off W and no other pages need it, then just create
>> the W as a GIF file and then place it inline with the text by clicking
>> the IMAGE icon and then click next to the "hen" of "When" deleting the
>> actual letter "W".
>> --
>> Andrew Baker
>> Technology Ideas
>> http://www.technologyideas.com.au
>> Australia
>>
>> "dwolf" <jojonospam@hotmail.com> wrote in message
>> news:hm788e$mst$1@DailyPlanet.news.netobjects.com. ..
>>> Looks like great advice ??
>>> But over my head
>>>
>>> "Technology Ideas Pty Ltd" <info@(remove)technologyideas.com.au> wrote
>>> in message news:hm76sn$m7v$1@DailyPlanet.news.netobjects.com. ..
>>>> You can do this via code & CSS:
>>>>
>>>> CTRL+T where you want the text:
>>>> <p class="capitalW"><span class="initial">W</span>ith in this web site,
>>>> you'll find beautiful custom calligraphy designed, hand-lettered and
>>>> illustrated by professional artist Mary Teichman. With over 30 years
>>>> of experience, Mary can transform your wedding certificate, poem,
>>>> citation, announcement or invitation into a beautiful work of art.
>>>> Mary specializes in wedding certificates for Quaker or non-Quaker
>>>> marriage ceremonies, honorary degrees, illuminated letters, decorated
>>>> borders, certificates, citations, gifts and custom egg tempera
>>>> illustrations. Inspired by historical examples and using archival
>>>> materials that will last over time (permanent inks, 100% rag paper, 22K
>>>> gold leaf) Mary creates custom calligraphic art made to your
>>>> specifications.</p>
>>>>
>>>> Add to your CSS:
>>>> .initial { display: none; }
>>>> p.capitalW {
>>>> line-height: 1em;
>>>> background-image: url(capitalW.gif);
>>>> background-repeat: no-repeat;
>>>> text-indent: 95px;
>>>> padding-top: 72px;
>>>> }
>>>>
>>>> You need to do the span so the capital etter doesn't repeat in the
>>>> paragraph.
>>>> This can be done for all letters of course using this theory.
>>>> --
>>>> Andrew Baker
>>>> Technology Ideas
>>>> http://www.technologyideas.com.au
>>>> Australia
>>>>
>>>> "dwolf" <jojonospam@hotmail.com> wrote in message
>>>> news:hm72ff$jo6$1@DailyPlanet.news.netobjects.com. ..
>>>>> When I bring it over to the text box it's overlapping and we know NOF
>>>>> does not like that.
>>>>>
>>>>> "Twayne" <nobody@spamcop.net> wrote in message
>>>>> news:hm70r2$iom$1@DailyPlanet.news.netobjects.com. ..
>>>>>> In news:hm6ujt$hat$1@DailyPlanet.news.netobjects.com,
>>>>>> dwolf <jojonospam@hotmail.com> typed:
>>>>>>> Client would like to have her handmade W used as the first letter of
>>>>>>> the text on this page...
>>>>>>> http://webpages.charter.net/joel40/
>>>>>>>
>>>>>>> I always spend some time before asking... but could not figure it
>>>>>>> out....
>>>>>>> Thanks
>>>>>>> Joel
>>>>>>
>>>>>> Use an image as the first letter or wherever you want the "W". A .png
>>>>>> will likely give you the smallest filesize, plus allow transparency
>>>>>> like a .gif so you don't see the background or borders around the
>>>>>> letter.
>>>>>>
>>>>>> HTH,
>>>>>>
>>>>>> Twayne
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>> --
>>>>>> --
>>>>>> Life is the only real counselor; wisdom unfiltered
>>>>>> through personal experience does not become a
>>>>>> part of the moral tissue.
>>>>>
>>>>
>>>>
>>>
>>
>>

[gotFusion LLC]

"dwolf" <jojonospam@hotmail.com> wrote in message
news:hm8h0d$99t$1@DailyPlanet.news.netobjects.com. ..
> It is a one off... so I tried that approach... It works but does not place
> it where I want. I want the W to stick up from the text. That approach
> aligned the W with the top of the text and then there was a big gap
> between line one and two


Change the alignment on the graphic from "top" to "bottom".

You should also go away from inline html formating and create your formating
in css. This will cut your coding in half and make for much cleaner page
code

--

Mike - (a.k.a. turtle) - gotFusion Extended Support
www.gotfusion.com

[dwolf]

Hi Mike...
Well no stupid questions... right ?

Ahhh..... found the alignment after all... looks like I should get it to
look the way she wants...
The CSS is more complicated to do ?

"gotFusion LLC" <newsgroup-support@autoresponder-gotfusion.com> wrote in
message news:A921.1267193942.39@gfwebforum.com...
>
> "dwolf" <jojonospam@hotmail.com> wrote in message
> news:hm8h0d$99t$1@DailyPlanet.news.netobjects.com. ..
>> It is a one off... so I tried that approach... It works but does not
>> place it where I want. I want the W to stick up from the text. That
>> approach aligned the W with the top of the text and then there was a big
>> gap between line one and two
>
>
> Change the alignment on the graphic from "top" to "bottom".
>
> You should also go away from inline html formating and create your
> formating in css. This will cut your coding in half and make for much
> cleaner page code
>
> --
>
> Mike - (a.k.a. turtle) - gotFusion Extended Support
> www.gotfusion.com
>
>
>
>