Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > HTML > HTML Code Clinic
Password Reminder
Register
| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old September 24th, 2009, 03:17 PM
Authorized User
Points: 345, Level: 6
Points: 345, Level: 6 Points: 345, Level: 6 Points: 345, Level: 6
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Dec 2005
Location: , , .
Posts: 71
Thanks: 10
Thanked 0 Times in 0 Posts
Smile 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.
__________________
Thanks,
Rocxy.
Reply With Quote
  #2 (permalink)  
Old November 18th, 2009, 06:05 PM
Registered User
 
Join Date: Nov 2009
Location: Earrh
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.
Reply With Quote
  #3 (permalink)  
Old November 29th, 2009, 03:55 AM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

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
__________________
-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
Reply With Quote
The Following User Says Thank You to chroniclemaster1 For This Useful Post:
andypandyrox456 (April 7th, 2010)
  #4 (permalink)  
Old July 21st, 2010, 09:12 PM
Registered User
 
Join Date: Jul 2010
Location: Arkansas + California
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default

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.

_______________________________________
“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.

Last edited by p2p4life2; October 14th, 2010 at 09:47 AM..
Reply With Quote
  #5 (permalink)  
Old July 21st, 2010, 10:27 PM
Friend of Wrox
Points: 1,749, Level: 16
Points: 1,749, Level: 16 Points: 1,749, Level: 16 Points: 1,749, Level: 16
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2007
Location: San Diego, CA, USA.
Posts: 477
Thanks: 10
Thanked 19 Times in 18 Posts
Default

Quote:
Originally Posted by p2p4life2 View Post
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.
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.
__________________
-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.
Reply With Quote
Reply


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
XML to rtf and html .Can not see images bvprasad XSLT 6 November 28th, 2006 01:27 AM
show html email with images dr_huda Pro PHP 1 April 9th, 2006 01:07 PM
Html Table Display with images Jorge HTML Code Clinic 8 April 13th, 2005 12:21 AM
embed images in html allang Pro JSP 0 August 22nd, 2004 09:43 PM
Ch3, P.76 - text.html/text.php not working Hostile BOOK: Beginning PHP4/PHP 5 ISBN: 978-0-7645-4364-7; v5 ISBN: 978-0-7645-5783-5 4 May 15th, 2004 11:09 AM



All times are GMT -4. The time now is 07:53 PM.


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