p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   HTML Code Clinic (http://p2p.wrox.com/forumdisplay.php?f=90)
-   -   Text over Images in HTML (http://p2p.wrox.com/showthread.php?t=76321)

ROCXY September 24th, 2009 03:17 PM

Text over Images in HTML
 
Hi All,

I am trying to place the text over the Images in the HTML file

I had refer some examples of HTML files that were built using tables and the image are placed as a background object in the table and the problem is the text data appears only at the bottom, right, left and center.

But the Images I have has text data are spread all the area over the images. The main objective is to enable the search option in my HTML without losing the image presentation of graphics as well as the text presentation – Where as the input file is full of Image with text data in between like-COMIC books.

Any help would be grateful.

JimJoe November 18th, 2009 06:05 PM

The best way I know of to have text over images is to do it using a css file. Then call the filename.css in the head section of the web page.

chroniclemaster1 November 29th, 2009 03:55 AM

If you're asking what I think you're asking, this is so easy you'll kick yourself. On your webpage you need a block level element to contain the text. If there's a handy structure use it, otherwise just wrap the text in a div.

<div id="accessibleImageText">
Here's the text I want to appear on top of the image.
</div>

Then in your CSS file write...

#accessibleImageText {
background: url(../Images/TopRightCorner1.jpg) no-repeat;
top: 0;
right: 0;
width: 100px;
height: 100px;
}

Naturally you can use left right, and set whatever units and/or distances you want. The width and height of the HTML element should be identical to the image dimensions, whatever they are.

HTH,
Wayne

p2p4life2 July 21st, 2010 09:12 PM

Thats great advice, thanks for the code, chroniclemaster! It works! Previously I did all kinds of workarounds to achieve text over image, like typing the text into the image via paint shop pro and then using that. The quality of the letters usually decreased though when the image was saved and used on the website. Oh well, no more. [:D]

_______________________________________
“Technology... is a queer thing. It brings you great gifts with one hand, and it stabs you in the back with the other.” - Carrie P. Snow
Check out my USB Flash Drive Blog.

chroniclemaster1 July 21st, 2010 10:27 PM

Quote:

Originally Posted by p2p4life2 (Post 260652)
Thats great advice, thanks for the code, chroniclemaster! It works! Previously I did all kinds of workarounds to achieve text over image, like typing the text into the image via paint shop pro and then using that. The quality of the letters usually decreased though when the image was saved and used on the website. Oh well, no more. [:D]

It really is a beautiful technique. You can lay out whatever images you want to add texture and imagery to the website and still keep all the content in the XHTML file where anyone can access it. It avoids splitting your message between the XHTML and the images, and you can neatly avoid the text quality degradation that you've noticed.

PS Photoshop has the exact same problem; If you need to do something really special (like a homepage H1 title in distressed or very artistic font) I know a couple designers who actually export .psd files to Illustrator when they're finished to add text. Apparently that improves things a bit.

The other option which is accessible, but a bit more of a pain is to render your stylized text in Illustrator or Inkscape letter by letter (vector-based package is required, pixel-based editors don't typically produce good results). Just isolate each letter on it's own layer so you can produce each letter on it's own.

Then import the images into something like FontForge and have it trace the letters to generate a font from them (Note you can differentiate between a capital letter and a lower case, but you couldn't do two different Xs without messing with ligatures and things I don't know much about. Then you can embed your font into the page with Sifr. A little more work but really slick.


All times are GMT -4. The time now is 05:21 PM.

Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.