HTML help

imported_Grim_Reaper · **HTML help -** 05-26-2005, 08:53 PM

Decided to drop by for a bit. Anyway, I am new to making websites and wondering how would I add text inside the white box on [url=http://img279.echo.cx/img279/2651/untitled23qn.jpg:844c8]this image?[/url:844c8]
I can't seem to figure out how to make text be ontop of the image. It is always just a colored area with text, which is great, but would look much better if it had text. Help me if possible. I can also post the html for the site and its slices and so forth. It isn't uploaded or anything yet, but will be maybe one day.

[DAS REICH] Blitz · 05-26-2005, 08:58 PM

I have a similar problem as well on my website. I know how to put the text over the image, but whenever people use different browsers, the text seems to not be where it should be (like rather than be in a text box, the words would be over my banner, or on the sidebar).

KTOG · 05-26-2005, 09:00 PM

Don't use 1 image for a website. It looks hokey and as you said, it will look different on different browser. What you should do is cut up your images like building blocks and piece them together in a table and make the one cell have text in it.

imported_Grim_Reaper · 05-26-2005, 09:02 PM

Quote:

Originally Posted by KTOG

Don't use 1 image for a website. It looks hokey and as you said, it will look different on different browser. What you should do is cut up your images like building blocks and piece them together in a table and make the one cell have text in it.

I have it all sliced and everything from Imageready, and that area in the white box is an image by itself. But how would I go adding text on top of that single image?

Judas · 05-26-2005, 09:06 PM

pm me the html and images and ill hook it up for you. theres tons of ways you can do it ...

imported_Grim_Reaper · 05-26-2005, 09:08 PM

Here is the code:
[code:048ce]<html>
<head>
<title>window</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="400" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<table id="Table_02" width="400" height="126" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
[img]images/window_01.gif[/img]</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<a href="home.html">
[img]images/window_02.gif[/img]</a></td>
<td rowspan="12">
<table id="Table_02" width="314" height="274" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
[img]images/window_03.gif[/img]</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<table id="Table_02" width="86" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
[img]images/window_04.gif[/img]</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<a href="bio.html">
[img]images/window_05.gif[/img]</a></td>
</tr>
<tr>
<td>
<table id="Table_02" width="86" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
[img]images/window_06.gif[/img]</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<a href="disco.html">
[img]images/window_07.gif[/img]</a></td>
</tr>
<tr>
<td>
<table id="Table_02" width="86" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
[img]images/window_08.gif[/img]</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<a href="media.html">
[img]images/window_09.gif[/img]</a></td>
</tr>
<tr>
<td>
<table id="Table_02" width="86" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
[img]images/window_10.gif[/img]</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<a href="contact.html">
[img]images/window_11.gif[/img]</a></td>
</tr>
<tr>
<td>
<table id="Table_02" width="86" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
[img]images/window_12.gif[/img]</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<a href="links.html">
[img]images/window_13.gif[/img]</a></td>
</tr>
<tr>
<td>
<table id="Table_02" width="86" height="102" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
[img]images/window_14.gif[/img]</td>
</tr>
</table></td>
</tr>
</table>

</body>
</html>[/code:048ce]

As for the images.. Well the names are right there. If I get around to uploading them I will give a link. The image I want the text on is window_03.gif.

Judas · 05-26-2005, 09:15 PM

what does window_03.gif look like?

Sniper101 · 05-26-2005, 09:20 PM

What did you make this graphic with? If you use photoshop, use the slices tool to go around the box, then switch to image ready. then right click on the slice and look down at the Slices window if you dont see it, go to windows > slices. set it to no image and type the html code. to get the basic code if your not good with html, type what you want and how you want it in MS Word, save as web page open it in IE or w/e right click > view source (this is for IE idk about firefox and other browsers). copy the code and paste in the space in Image Ready.

imported_Grim_Reaper · 05-26-2005, 09:22 PM

Judas: [img]http://img151.echo.cx/img151/2171/window032dd.gif[/img]

Sniper101: When you do that (no image) it makes it one solid color, I want to keep the image and have text overlayed.

Judas · 05-26-2005, 09:31 PM

[code:d500c]<html>
<head>

<link rel="stylesheet" type="text/css" href="grim_style.css">

<title>window</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="400" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<table id="Table_02" width="400" height="126" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
[img]images/window_01.gif[/img]</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<a href="home.html">
[img]images/window_02.gif[/img]</a></td>
<td rowspan="12">
<table id="Table_02" width="314" height="274" border="0" cellpadding="0" cellspacing="0">
<tr>

<td class="content_cell">dsfsdafdafasdf
</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<table id="Table_02" width="86" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
[img]images/window_04.gif[/img]</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<a href="bio.html">
[img]images/window_05.gif[/img]</a></td>
</tr>
<tr>
<td>
<table id="Table_02" width="86" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
[img]images/window_06.gif[/img]</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<a href="disco.html">
[img]images/window_07.gif[/img]</a></td>
</tr>
<tr>
<td>
<table id="Table_02" width="86" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
[img]images/window_08.gif[/img]</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<a href="media.html">
[img]images/window_09.gif[/img]</a></td>
</tr>
<tr>
<td>
<table id="Table_02" width="86" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
[img]images/window_10.gif[/img]</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<a href="contact.html">
[img]images/window_11.gif[/img]</a></td>
</tr>
<tr>
<td>
<table id="Table_02" width="86" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
[img]images/window_12.gif[/img]</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<a href="links.html">
[img]images/window_13.gif[/img]</a></td>
</tr>
<tr>
<td>
<table id="Table_02" width="86" height="102" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
[img]images/window_14.gif[/img]</td>
</tr>
</table></td>
</tr>
</table>

</body>
</html> [/code:d500c]

create another file called : grim_style.css
and paste this:

[code:d500c].content_cell {
color:#FFFFFF;
background-image:url(images/window_03.gif)
}
[/code:d500c]

save the grim_style.css in the same dir as the .html

Sniper101 · 05-26-2005, 10:01 PM

[quote="Grim_Reaper":d4a30]Judas: [img]http://img151.echo.cx/img151/2171/window032dd.gif[/img]

Sniper101: When you do that (no image) it makes it one solid color, I want to keep the image and have text overlayed.[/quote:d4a30]

ive had luck with it before so...w/e though

imported_Grim_Reaper · 05-26-2005, 10:24 PM

Thank you very much Judas! +1 karma.

Mr.Buttocks · 05-27-2005, 07:03 AM

Slices. eek: annoy:

elstatec · 05-27-2005, 07:05 AM

[quote="Mr.Buttocks":56dcd]Slices. eek: annoy:[/quote:56dcd]

Zoner · 05-27-2005, 07:35 AM

You could also try setting that image as the background of its cell in the table...like so:

[code:4c5f7]<td background="images/window_03.gif" width="314" height="274">TEXT GOES HERE</td>[/code:4c5f7]