displaying text over image

ketanco · #1 (**permalink**) 05-18-08, 07:17 PM

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>

UnrealEd · #2 (**permalink**) 05-19-08, 03:39 AM

Moving this to the CSS forum...

scott2500uk · #3 (**permalink**) 05-23-08, 06:49 AM

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

-tg · #4 (**permalink**) 06-01-08, 03:39 PM

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

job0107 · #5 (**permalink**) 06-02-08, 01:56 AM

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>

job0107 · #6 (**permalink**) 06-02-08, 02:37 AM

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>

samrini@mac.com · #7 (**permalink**) 09-11-08, 02:35 AM

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

job0107 · #8 (**permalink**) 09-11-08, 05:56 AM

Quote:

Originally Posted by samrini@mac.com

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.

job0107 · #9 (**permalink**) 09-11-08, 02:19 PM

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>

samrini@mac.com · #10 (**permalink**) 09-11-08, 07:27 PM

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