Current location: Hot Scripts Forums » General Web Coding » CSS » displaying text over image

displaying text over image

Reply
  #1 (permalink)  
Old
Newbie Coder
 
Join Date: Feb 2008
Posts: 25
Thanks: 0
Thanked 0 Times in 0 Posts
displaying text over image

In the code below, first it displays the button, and then it displays the text. But I want them on top of each other so that the text appears on the image button. How can I display the text of the link on the button image?
HTML Code:
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="b1b.jpg";
}
function mouseOut()
{
document.b1.src ="b1c.jpg";
}
</script>
</head>
<body>
<a href="<A href="http://www..../....php"><img border="0" src="b1c.jpg" name="b1" width="150" height="26" onmouseover="mouseOver()" onmouseout="mouseOut()" />TEXT OF LINK HERE</a>
</br>
</body>
</html>

Last edited by UnrealEd; 05-19-08 at 03:37 AM. Reason: please use the [html] wrapper when posting html code
Reply With Quote
  #2 (permalink)  
Old
UnrealEd's Avatar
Community Liaison
 
Join Date: May 2005
Location: Antwerp, Belgium
Posts: 3,165
Thanks: 4
Thanked 27 Times in 27 Posts
Moving this to the CSS forum...
__________________
"Good judgement comes from experience, and experience comes from bad judgement." - Fred Brooks

Reply With Quote
  #3 (permalink)  
Old
scott2500uk's Avatar
Coding Addict
 
Join Date: Apr 2006
Posts: 275
Thanks: 2
Thanked 2 Times in 2 Posts
http://www.the-art-of-web.com/css/textoverimage/

That might help

also if u google "place text over image css" then there are lots of results
Reply With Quote
  #4 (permalink)  
Old
Newbie Coder
 
Join Date: Jun 2006
Posts: 31
Thanks: 0
Thanked 0 Times in 0 Posts
If I where you I would use the following:

PHP Code:

<div style="position:relative">

<
div style="top:0px; left:0px; z-index:0;" id="image">
<
img src="somepicturehere" alt="description here"/>
</
div>
<
div style="top:0px; left:0px; z-index:1;" id="text">
Place text here
</div>
</
div
The box with the id text, you can change the top and left values to move where the text lies, to make the text wrap add a width to the style, ie width:100px;

Hope that Helps
Reply With Quote
  #5 (permalink)  
Old
job0107's Avatar
Community Liaison
 
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 141 Times in 138 Posts
Here is a bit simpler method:
HTML Code:
<style>
.text_over_image
{
 background:url(images/image1.JPG);  /* image to display */
 width:100px;                     /* width of image */
 height:100px;                    /* height of image */
 color:#ffffff;                   /* text color */
 font-size:12px;                  /* font size */
 font-weight:bold;                /* font weight */
 font-family:Arial;               /* font family */
 text-decoration:underline;       /* text decoration */
 padding-left:5px;                /* left position of text */
 padding-top:84px;                /* top position of text */
 border:1px solid #FF0000;        /* border around image if desired */
 overflow:hidden;                 /* so div won't change size */
 }
</style>
<div class="text_over_image">
Place text here
</div>
__________________
Jerry Broughton

Last edited by job0107; 06-02-08 at 02:13 AM.
Reply With Quote
  #6 (permalink)  
Old
job0107's Avatar
Community Liaison
 
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 141 Times in 138 Posts
This will give you total control:
HTML Code:
<style>
.background_image
{
 background:url(your_image.jpg);  /* image to display */
 width:100px;                     /* width of image */
 height:100px;                    /* height of image */
 border:1px solid #FFFF00;        /* border around image if desired */
 overflow:hidden;                 /* so div won't change size */
 }
.text_properties
{
 border:1px solid #FFFFFF;        /* border around text if desired */
 padding-left:2px;                /* position of text in inner div */
 padding-top:0px;                 /* position of text in inner div */
 padding-right:2px;               /* position of text in inner div */
 padding-bottom:2px;              /* position of text in inner div */
 color:#ffffff;                   /* text color */
 font-size:12px;                  /* font size */
 font-weight:bold;                /* font weight */
 font-family:Arial;               /* font family */
 text-decoration:underline;       /* text decoration */
 margin-left:2px;                 /* left position of text */
 margin-top:76px;                 /* top position of text */
 }
</style>
<div class="background_image">
<div class="text_properties">Place text here</div>
</div>
__________________
Jerry Broughton

Last edited by job0107; 06-02-08 at 02:47 AM.
Reply With Quote
  #7 (permalink)  
Old
New Member
 
Join Date: Sep 2008
Location: Dallas, TX
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
One more clarification...

Hi Jerry. I read this post with interest and it has ALMOST helped me solve my problem. My initial goal was to place an image on my site and then put HTML text over the TOP of the image. Your coding suggestions were EXCELLENT and you can see that I have put together a TRIAL page at this location:

http://www.getalook.com/page2/page2.html

As you can see, the image is on the page as well as some sample HTML text over the image.

What I'm trying to figure out now is HOW DO I WRAP the body text AROUND this image/html div that I created. I appreciate any help you can provide.

I'm brand new to this forum and can't believe the quality of your posts. They're excellent. Thx.

Sam
Reply With Quote
  #8 (permalink)  
Old
job0107's Avatar
Community Liaison
 
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 141 Times in 138 Posts
Quote:
Originally Posted by samrini@mac.com View Post
Hi Jerry. I read this post with interest and it has ALMOST helped me solve my problem. My initial goal was to place an image on my site and then put HTML text over the TOP of the image. Your coding suggestions were EXCELLENT and you can see that I have put together a TRIAL page at this location:

http://www.getalook.com/page2/page2.html

As you can see, the image is on the page as well as some sample HTML text over the image.

What I'm trying to figure out now is HOW DO I WRAP the body text AROUND this image/html div that I created. I appreciate any help you can provide.

I'm brand new to this forum and can't believe the quality of your posts. They're excellent. Thx.

Sam
This will work in FireFox, but you have something wrong with your layout because your display is not working right in IE.
HTML Code:
.background_image
{
 background:url(http://www.samrini.com/Graphics/DesertTan/Web-Coupons-blank.png);  /* image to display */
 width:264px;                     /* width of image */
 height:264px;                    /* height of image */
 border:1px solid #FFFF00;        /* border around image if desired */
 overflow:hidden;                 /* so div won't change size */
 float:left;   /* This command will cause the text to wrap around the div. */
 margin-right:30px;  /* Adjust this value for spacing between right side of div and text. */
 }
One of the main reasons why people have problems with their layout is because they try to make them too complicated.

Your layout looks fairly strait forward until I removed the doctype.
You have a header, a navigation section, a left sidebar and a right content.
At least that's the way it appears until I removed the doctype.
Keep your sections grouped together so they will stay together.
This way you will gain more control over the layout.
__________________
Jerry Broughton

Last edited by job0107; 09-11-08 at 06:11 AM.
Reply With Quote
  #9 (permalink)  
Old
job0107's Avatar
Community Liaison
 
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 141 Times in 138 Posts
Hello samrini@mac.com,

I have been playing around with your web page and I have come up with a layout that will work in both IE and FireFox.
I have tried to make it look as identical as possible.
As you may have noticed I had to change the doctype to make it work.

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Wrap Text Example</title>
<style>
body
{
 font: 0.75em/1.8em "Lucida Grande", LucidaGrande, Lucida, "Lucida Sans", Tahoma, Arial, Helvetica, sans-serif;
 margin:0px;
 margin-bottom:20px;
 background:#000;
 }
.background_image
{
 background:url(http://www.samrini.com/Graphics/DesertTan/Web-Coupons-blank.png);  /* image to display */
 width:264px;                     /* width of image */
 height:264px;                    /* height of image */
 border:1px solid #FFFF00;        /* border around image if desired */
 overflow:hidden;                 /* so div won't change size */
 float:left;
 margin:0px;
 margin-top:5px;
 margin-right:15px;
 }
.text_properties
{
 border:0px solid #FFFFFF;        /* border around text if desired */
 padding-left:0px;                /* position of text in inner div */
 padding-top:0px;                 /* position of text in inner div */
 padding-right:2px;               /* position of text in inner div */
 padding-bottom:2px;              /* position of text in inner div */
 color:#fF3333;                   /* text color */
 font-size:12px;                  /* font size */
 font-weight:bold;                /* font weight */
 font-family:Arial;               /* font family */
/* text-decoration:underline;       /* text decoration */
 margin-left:20px;                 /* left position of text */
 margin-top:76px;                 /* top position of text */
 }
.border_space
{
 width:12%;
 }
.header_row
{
 height:130px;
 }
.header_td
{
 background:#000000;
 vertical-align:top;
 }
.header_div
{
 background:#aa8571;
 width:780px;
 margin-top:20px;
 }
.side_bar
{
 width:200px;
 background:#CCCC99;
 vertical-align:top;
 }
.side_top
{
 background:#BBBB88;
 height:23px;
 }
#spacer
{
 height:20px;
 }
.side_content_1
{
 background:#CCFF66;
 height:25px;
 padding-left:22px;
 padding-top:1px;
 cursor:pointer;
 }
.side_content_2
{
 background:#CCFF66;
 height:26px;
 padding-left:22px;
 font-weight:bold;
 cursor:pointer;
 }
.content_td
{
 width:580px;
 background:#F9F9F9;
 vertical-align:top;
 }
.content_1
{
 background:#CCFF66;
 height:23px;
 padding-left:20px;
 }
span
{
 font-size:11px;
 }
a:link, a:visited
{
 text-decoration: underline;
 }
a:hover, a:active
{
 text-decoration: none;
 }
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="all" />
<meta name="generator" content="RapidWeaver" />
<meta name="generatorversion" content="4.1.1" />
</head>
<body>
<table cellspacing=0 cellpadding=0 style="width:100%;height:100%;border-collapse:collapse;background:#000;">
 <tr>
  <td class="border_space"></td>
  <td colspan="2" class="header_td"><div class="header_div"><img src="http://www.getalook.com/rw_common/themes/diamond/images/custom/image3.jpg" alt="header image 3" width="780"/></div></td>
  <td class="border_space"></td>
 </tr>
 <tr>
  <td class="border_space"></td>
  <td class="side_bar">
   <div class="side_top"></div>
   <div id="spacer">&nbsp;</div>
   <div class="side_content_1" onmouseover="this.style.background='#EEFF88';" onmouseout="this.style.background='#CCFF66';" onclick="location.href='../index.html';"><span>Welcome</span></div>
   <div class="side_content_2" onmouseover="this.style.background='#EEFF88';" onmouseout="this.style.background='#CCFF66';" onclick="location.href='page2.html';"><span>Wrap Text Example</span></div>
  </td>
  <td class="content_td">
   <div class="content_1"></div>
   <div style="padding:40px;padding-top:15px;padding-bottom:10px;">
    <div class="background_image">
     <div class="text_properties">This is HTML text over an Image.</div>
    </div>
    <span>I want this text to WRAP around the image above.  The image is contained within a DIV and has HTML text (shown in RED) floating over the image.  I want this text to WRAP around the image above.  The image is contained within a DIV and has HTML text (shown in RED) floating over the image.  I want this text to WRAP around the image above.  The image is contained within a DIV and has HTML text (shown in RED) floating over the image.  I want this text to WRAP around the image above.  The image is contained within a DIV and has HTML text (shown in RED) floating over the image.
    I want this text to WRAP around the image above.  The image is contained within a DIV and has HTML text (shown in RED) floating over the image.  I want this text to WRAP around the image above.  The image is contained within a DIV and has HTML text (shown in RED) floating over the image.  I want this text to WRAP around the image above.  The image is contained within a DIV and has HTML text (shown in RED) floating over the image.  I want this text to WRAP around the image above.</span>
    <div id="footer">
     <div style="border-top:1px solid #ccc;margin-top:25px;margin-bottom:20px;"></div>
      <span>&copy; 2008 Desert Tan, <a href="#" id="rw_email_contact">Contact Us</a></span>
     <!--<script type="text/javascript">var _rwObsfuscatedHref0 = "mai";var _rwObsfuscatedHref1 = "lto";var _rwObsfuscatedHref2 = ":ni";var _rwObsfuscatedHref3 = "kit";var _rwObsfuscatedHref4 = "ari";var _rwObsfuscatedHref5 = "bbl";var _rwObsfuscatedHref6 = "e@g";var _rwObsfuscatedHref7 = "mai";var _rwObsfuscatedHref8 = "l.c";var _rwObsfuscatedHref9 = "om";var _rwObsfuscatedHref = _rwObsfuscatedHref0+_rwObsfuscatedHref1+_rwObsfuscatedHref2+_rwObsfuscatedHref3+_rwObsfuscatedHref4+_rwObsfuscatedHref5+_rwObsfuscatedHref6+_rwObsfuscatedHref7+_rwObsfuscatedHref8+_rwObsfuscatedHref9; document.getElementById('rw_email_contact').href = _rwObsfuscatedHref;</script>-->
     </div>
   </div>
  </td>
  <td class="border_space"></td>
 </tr>
</table>
</body>
</html>
__________________
Jerry Broughton

Last edited by job0107; 09-11-08 at 02:21 PM.
Reply With Quote
  #10 (permalink)  
Old
New Member
 
Join Date: Sep 2008
Location: Dallas, TX
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Thank Jerry. You put a lot of work into my question and I really appreciate it. Let me clarify a few things because I think I might have complicated this more than I needed to.

I don't program HTML directly. I work on a Macintosh and use a program called RapidWeaver. This is why I get lost if I dig too deeply into raw code. Especially CSS styles. I plan to go to a class and learn more but haven't yet... 99% of what I need to do I can do within the confines of the RapidWeaver program since it allows me to OVERRIDE any CSS style as needed...

I put your code into Dreamweaver just to look at it and can't believe you recreated the entire page. That's amazing. BUT, because I work wthin CSS style sheets through the RapidWeaver program, all I need to do is modify the code that is controlling the CONTENT in the body section. I don't want to touch the header, navigation or anything that's standard across the pages.

What you coded LOOKS PERFECT as it relates to the BODY TEXT wrapping around the image and HTML DIV. Is there as way for you to give me just the code I need to use in the BODY of the page to do what you did? I tried cutting out just the pertinent sections but have not had luck figuring out the sections I really need.

If I need to change something about the page like the doctype, maybe I can put that into the CSS override panel in RapidWeaver which is how I normally add unique CSS elements to my pages as needed.

Does this make sense? I really appreciate the help.
Thanks,
Sam
Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
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 On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
text box with scroll bar silvermane CSS 7 01-16-09 04:03 AM
Draggable Tables Ares JavaScript 10 08-03-06 07:55 AM
Need Your HelP! Loading Multiple External Text into Multiple Dynamic Text Fields Flash_Boi Flash & ActionScript 2 03-30-06 04:27 PM
Displaying Database Text on Image redsox2k4 ASP 3 05-11-05 07:42 PM
picking random entries with a filter... Double selection problem dsumpter PHP 7 11-16-03 08:19 PM


All times are GMT -5. The time now is 07:13 AM.
vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.