Alliedassault

Alliedassault (alliedassault.us/index.php)
-   Offtopic (alliedassault.us/forumdisplay.php?f=13)
-   -   HTML help (alliedassault.us/showthread.php?t=46487)

imported_Grim_Reaper 05-26-2005 08:53 PM
HTML help
 
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]

Poseidon 05-27-2005 11:07 AM
Quote:
Originally Posted by Zoner
You could also try setting that image as the background of its cell in the table...like so:

[code:59d14]<td background="images/window_03.gif" width="314" height="274">TEXT GOES HERE</td>[/code:59d14]
Thats the way i'd have done it

Judas 05-27-2005 02:05 PM
it works but its not valid html

from : http://validator.w3.org/

Line 29, column 30: there is no attribute "BACKGROUND"
<td background="images/window_03.gif" width="314" height="274">TE

Proteus 05-27-2005 02:11 PM
Uuuum on all of my websites I use iframes:

[code:99f7b]<iframe src="home.html" name="iframe" frameborder="0" width="" height=""></iframe>[/code:99f7b]

And when you try to link something it would look like:

[code:99f7b]<a href="home.html" target="iframe">[/code:99f7b]

That makes it load in the iframe. If you need help (if you even try this method) catch me on aim.

Usually you just put that code in place of your image that you want to have the iframe over, and then make the image you replaced the background of all your pages so it gives the effect of the text being over it. It's basically a page inside a page, so it saves the time of loading all the same images over again. Very easy when you get the hang of things.

Zoner 05-27-2005 02:47 PM
Quote:
Originally Posted by Judas
it works but its not valid html

from : http://validator.w3.org/

Line 29, column 30: there is no attribute "BACKGROUND"
<td background="images/window_03.gif" width="314" height="274">TE
Valid or not, it works. *shrug*

lasagna 05-27-2005 02:48 PM
Quote:
Originally Posted by Zoner
Quote:
Originally Posted by Judas
it works but its not valid html

from : http://validator.w3.org/

Line 29, column 30: there is no attribute "BACKGROUND"
<td background="images/window_03.gif" width="314" height="274">TE
Valid or not, it works. *shrug*
ZONERTOTHERESCUEEE

Zoner 05-27-2005 02:55 PM
[img]http://www.latelatecrew.net/zoner/zonesignal.jpg[/img]

Coleman 05-27-2005 02:57 PM
+1 ha

Mr.Buttocks 05-27-2005 03:00 PM
Quote:
Originally Posted by Coleman
+1 ha

-1 Sycophant.

imported_Grim_Reaper 05-31-2005 08:18 PM
Not too sure if this is what Proteus was talking about but now I am finishing up the site and so forth and also making a new one for something else. I am using the code Judas posted. How can I make it so that area with the text has its own scrollbars and whatever so I can always add more and more info and I can just scroll that area to read it?

TonyMontana 05-31-2005 08:24 PM
Yeah, it's exactly what Proteus was talking about. It's called an Iframe. Use the code he provided

imported_Grim_Reaper 05-31-2005 08:25 PM
Ok cool, I wasn't too sure.

imported_Grim_Reaper 05-31-2005 08:37 PM
I am not doing this right, how would I go about making that image the background for it and adding text over it? The code is on the first page...

Judas 05-31-2005 09:14 PM
i ve never used iframes before but ... you can use that style sheet with any tag that supports the class attribute. so if you use iframe what ever tag holds the image just use class="content_cell" and it will work the same way.


All times are GMT -6. The time now is 08:42 AM.

Powered by vBulletin® Version 3.8.12 by ScriptzBin
Copyright ©2000 - 2025, vBulletin Solutions Inc.
© 1998 - 2007 by Rudedog Productions | All trademarks used are properties of their respective owners. All rights reserved.