...

View Full Version : Text over images



Wardy118
02-04-2007, 07:07 PM
This is probably something really simple but its been racking my brain for ages now. Basically what i want to do is write some text over an image. But for some reason it won't let me.




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Untitled Page</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000">

<IMG src="C:\Documents and Settings\Owner\My Documents\My Pictures/logo.gif" style="position:absolute;left:150px;top:1686px;width:699px;height:45px;z-index:37">


<DIV style="position:absolute;left:393px;top:1698px;width:150px;height:16px;z-index:1" align="left">
<FONT style="font-size:13px" color="#000000" face="Arial">Hello, insert text here</FONT>
</DIV>


</BODY>
</HTML>


Thanks

drippin
02-04-2007, 07:18 PM
The only way to do this, is using an image as a background.
By using a div you can set the background image to the image you wish to write over, and then simply write over the image.

Lets use your div as an example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Untitled Page</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF" text="#000000">

<DIV style="position:absolute;left:393px;top:1698px;width:150px;height:16px;z-index:1; background-image: url('C:\Documents and Settings\Owner\My Documents\My Pictures/logo.gif')" align="left">
<FONT style="font-size:13px" color="#000000" face="Arial">Hello, insert text here</FONT>
</DIV>


</BODY>
</HTML>

Also, try and restrain from using folders and extensions which have spaces... such as "My Pictures". If your images are in the same folder/directory as your webpages you can simple reference them as logo.gif without adding the rest of the directories.

Excavator
02-04-2007, 07:19 PM
Hello Wardy,
make the logo image your background. Then you can put text over it.
Typically you would have a header div with a background... like this:

#header {
width: 699px;
height: 45px;
background-image: url(My Pictures/logo.gif);
}

<div id-"header"><p>Hello, insert text here</p></div>

VIPStephan
02-04-2007, 07:26 PM
I see that you are using a lot of deprecated (compared to current techniques) and needless code for what you wanna achieve.
I won't get into every detail but there is no text attribute and the font element is outdated and shouldn't be used anymore.

Let me guess, you don't know HTML and CSS and you're using a WYSIWYG (what you see is what you get) editor, right? You should learn a little HTML and CSS because those editors (especially the bad ones) don't help very much and one shouldn't trust them (what we can see as we speak).

You can place text over an image by making the image a background of the element where the text is inside, like:


<div style="background: url(image path) no-repeat; height: 200px; width: 400px;">text here</div>

or by using the positioning correctly:


<img src="image path" alt="" style="position: absolute; top: 10px; left: 20px;">
<p style="position: absolute; top: 10px; left: 20px;>text here</p>

But I don't recommend the latter method as this isn't very flexible and will lead to more problems if you don't know what yu're doing.

Damn, I was too slow again. However, after looking at your code again it seems that the folloing is the actual direct problem:


<IMG ... style="... z-index:37">
<DIV style="... z-index:1" align="left">

The image will be above the text unless its z index is lower than the text's. Or to say it vice versa: The element with higher z index will be above elements with lower z index.

Arbitrator
02-05-2007, 05:45 AM
A very simple example, properly coded (Live Copy (http://jsg.byethost4.com/demos/CF%20106694.html)):


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-US">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CF 106694</title>

<style type="text/css">
html {
background-color: white;
}
p {
width: 699px;
height: 45px;
margin: 0 auto;
background: url("fire.gif") center;
color: white;
text-align: center;
font: 13px/45px Arial, sans-serif;
}
</style>

</head>
<body>

<p>To boldly go where no one has gone before.</p>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum