Back To Website Design Forum

How to add overlaying text to a picture?

  • Jepps98
  • Graduate
  • Graduate
  • User avatar
  • Joined: Nov 28, 2004
  • Posts: 149
  • Loc: Umm, not exactly sure...
  • Status: Offline

Post May 13th, 2006, 10:53 am

Alright, Ive made a template, but the content area is a picture, so I need to know how to add overlaying text.

Here is the site, so you know what i mean


A code would be really appreciated :).
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post May 13th, 2006, 10:53 am

  • Katmandu
  • Student
  • Student
  • No Avatar
  • Joined: May 02, 2006
  • Posts: 69
  • Loc: Spain, Mallorca
  • Status: Offline

Post May 13th, 2006, 12:29 pm

Ok, this is the difficult way of doing things, but it's the correct way. Maybe someone could give you an easier code.

Change this

Code: [ Download ] [ Select ]
<img src="content.png" width="695" height="708">


with this:

Code: [ Download ] [ Select ]
<div id="container">Your Text here</div>


In the header of your html put this:

Code: [ Download ] [ Select ]

#container {
  background-image: url(content.png);
  background-repeat: no-repeat;
  margin: 0;
  color: white;
  font-family: verdana, sans-serif;
  width: 658px;
  height: 667px;
  padding: 25px 14px;
}
  2. #container {
  3.   background-image: url(content.png);
  4.   background-repeat: no-repeat;
  5.   margin: 0;
  6.   color: white;
  7.   font-family: verdana, sans-serif;
  8.   width: 658px;
  9.   height: 667px;
  10.   padding: 25px 14px;
  11. }


For this to work in Internet Explorer replace at the very beginning of your html this:

Code: [ Download ] [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">


with this:

Code: [ Download ] [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


Also change this line:

Code: [ Download ] [ Select ]
<div align="justify"><img src="header.png" width="695" height="159"><img src="navigation.png" width="695" height="18" border="0" usemap="#Map">


with this one:

Code: [ Download ] [ Select ]
<div align="justify"><img src="header.png" width="695" height="159" /><img src="navigation.png" width="695" height="18" border="0" usemap="#Map" />
  • Jepps98
  • Graduate
  • Graduate
  • User avatar
  • Joined: Nov 28, 2004
  • Posts: 149
  • Loc: Umm, not exactly sure...
  • Status: Offline

Post May 13th, 2006, 12:31 pm

Wow, thanks alot man... It is hard, but oh well :)
  • Jepps98
  • Graduate
  • Graduate
  • User avatar
  • Joined: Nov 28, 2004
  • Posts: 149
  • Loc: Umm, not exactly sure...
  • Status: Offline

Post May 13th, 2006, 12:39 pm

Wait, when I put the

Code: [ Download ] [ Select ]
#container {
  background-image: url(content.png);
  background-repeat: no-repeat;
  margin: 0;
  color: white;
  font-family: verdana, sans-serif;
  width: 658px;
  height: 667px;
  padding: 25px 14px;
}
  1. #container {
  2.   background-image: url(content.png);
  3.   background-repeat: no-repeat;
  4.   margin: 0;
  5.   color: white;
  6.   font-family: verdana, sans-serif;
  7.   width: 658px;
  8.   height: 667px;
  9.   padding: 25px 14px;
  10. }


in, where do i put it? After the <head> tag?
  • Katmandu
  • Student
  • Student
  • No Avatar
  • Joined: May 02, 2006
  • Posts: 69
  • Loc: Spain, Mallorca
  • Status: Offline

Post May 13th, 2006, 12:51 pm

Oh I forgot.

Yes, whereever you like between <head> and </head>

but use this code instead:

Code: [ Download ] [ Select ]
<style type="text/css">
<!--
#container {
  background-image: url(content.png);
  background-repeat: no-repeat;
  margin: 0;
  color: white;
  font-family: verdana, sans-serif;
  width: 658px;
  height: 667px;
  padding: 25px 14px;
}
-->
</style>
  1. <style type="text/css">
  2. <!--
  3. #container {
  4.   background-image: url(content.png);
  5.   background-repeat: no-repeat;
  6.   margin: 0;
  7.   color: white;
  8.   font-family: verdana, sans-serif;
  9.   width: 658px;
  10.   height: 667px;
  11.   padding: 25px 14px;
  12. }
  13. -->
  14. </style>


Also if you want to skip all this and use the simple code, it is something like this:

Code: [ Download ] [ Select ]
<table width="695" height="708" border="0" cellpadding="25">
 <tr>
  <td valign="top" background="/images/content.png"><font color="#FFFFFF">Your Text Here</font></td>
 </tr>
</table>
  1. <table width="695" height="708" border="0" cellpadding="25">
  2.  <tr>
  3.   <td valign="top" background="/images/content.png"><font color="#FFFFFF">Your Text Here</font></td>
  4.  </tr>
  5. </table>


If you use this then forget everything else I said, but it's the wrong way of doing things. Allthough the result is the same.
  • Jepps98
  • Graduate
  • Graduate
  • User avatar
  • Joined: Nov 28, 2004
  • Posts: 149
  • Loc: Umm, not exactly sure...
  • Status: Offline

Post May 13th, 2006, 12:57 pm

... Alright, it works, but when i put that in, the green thin bar on the right disappears...
  • Katmandu
  • Student
  • Student
  • No Avatar
  • Joined: May 02, 2006
  • Posts: 69
  • Loc: Spain, Mallorca
  • Status: Offline

Post May 13th, 2006, 1:02 pm

Well, you did not copy the code like I put it in.


There says:

width: 600px;

but I said:

width: 658px;
  • Jepps98
  • Graduate
  • Graduate
  • User avatar
  • Joined: Nov 28, 2004
  • Posts: 149
  • Loc: Umm, not exactly sure...
  • Status: Offline

Post May 13th, 2006, 1:03 pm

Oops, alright. Man your like a hero in a way.
  • Katmandu
  • Student
  • Student
  • No Avatar
  • Joined: May 02, 2006
  • Posts: 69
  • Loc: Spain, Mallorca
  • Status: Offline

Post May 13th, 2006, 1:04 pm

No, I am just learning myself.
  • Jepps98
  • Graduate
  • Graduate
  • User avatar
  • Joined: Nov 28, 2004
  • Posts: 149
  • Loc: Umm, not exactly sure...
  • Status: Offline

Post May 13th, 2006, 1:08 pm

Okay, I dont suppose you know how to center the site?
  • Katmandu
  • Student
  • Student
  • No Avatar
  • Joined: May 02, 2006
  • Posts: 69
  • Loc: Spain, Mallorca
  • Status: Offline

Post May 13th, 2006, 1:08 pm

By the way, you still have it wrong.

I said

width: 658px;

but now you have:

width: 695px;


Once you type some text in your code will flow beyond the borders of the image with your code.
  • Katmandu
  • Student
  • Student
  • No Avatar
  • Joined: May 02, 2006
  • Posts: 69
  • Loc: Spain, Mallorca
  • Status: Offline

Post May 13th, 2006, 1:11 pm

See this tutorial, but you have to use another name for the id of the div because you allready used id="container". You have to put this div around everything that is inside your <body>

http://www.maxdesign.com.au/presentation/center/

Page 1 of 1

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 197 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© Unmelted Enterprises 1998-2009. Driven by phpBB © 2001-2009 phpBB Group.