displaying text over image
05-18-08, 07:17 PM
|
|
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
|
05-19-08, 03:39 AM
|
 |
Community VIP
|
|
Join Date: May 2005
Location: Antwerp, Belgium
Posts: 2,724
Thanks: 0
Thanked 0 Times in 0 Posts
|
|
Moving this to the CSS forum...
__________________
"Good judgement comes from experience, and experience comes from bad judgement." - Fred Brooks
If you want to add me on any IM, pm me first
|
05-23-08, 06:49 AM
|
 |
Wannabe Coder
|
|
Join Date: Apr 2006
Posts: 221
Thanks: 0
Thanked 0 Times in 0 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
|
06-01-08, 03:39 PM
|
|
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
|
06-02-08, 01:56 AM
|
 |
Community Liaison
|
|
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 2,651
Thanks: 0
Thanked 21 Times in 21 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.
|
06-02-08, 02:37 AM
|
|
Community Liaison
|
|
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 2,651
Thanks: 0
Thanked 21 Times in 21 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.
|
09-11-08, 02:35 AM
|
|
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
|
09-11-08, 05:56 AM
|
|
Community Liaison
|
|
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 2,651
Thanks: 0
Thanked 21 Times in 21 Posts
|
|
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.
__________________
Jerry Broughton
Last edited by job0107; 09-11-08 at 06:11 AM.
|
09-11-08, 02:19 PM
|
|
Community Liaison
|
|
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 2,651
Thanks: 0
Thanked 21 Times in 21 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"> </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>© 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.
|
09-11-08, 07:27 PM
|
|
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
|
|
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
|
|
|
| Thread Tools |
|
|
| Display Modes |
 Linear Mode
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
