layering text over image

**skyadrenaline** · 09-04-2010 12:15 AM

I got a simple problem, should be easy to fix except I don't know much beyond basic HTML.

I'm trying to layer a text over an image, and have both be links to the same link. I used simple tables, with div tags for the text. I'm trying to avoid making an image for every link, trying to go for minimal data transfer needed. So instead of nine images, I have one that serves as the background for all of them. It works in IE, but not in Firefox. What gives?

Is there a more elegant solution?

http://staco.net23.net/formstest.html

Thanks in advance.

**Fang** · 09-04-2010 04:26 AM

Use a background image

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
a:link {color:#FFF;}      /* unvisited link */
a:visited {color:#FFF;}  /* visited link */
a:hover {color:#FFF;}  /* mouse over link */
a:active {color:#FFF;}  /* selected link */
a:link, a:visited, a:hover, a:active {text-decoration:none;}
.foo {
display:block;
background:#000 url(formstest_files/FormGradient.jpg) no-repeat;
line-height:5em;;
height:150px; 
width:150px; ; 
color: rgb(255, 255, 255);
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight:bold; 
font-size: 22px;
}
</style>

</head>
<body>
<p>
<a href="http://staco.net23.net/AAA.html" class="foo">AAA</a>
</p>
</body>
</html>

**skyadrenaline** · 09-04-2010 08:54 AM

Hi Fang,

Thanks for the reply. Unfortunately, if I make the image a background, then I can't use it as a link anymore. I would like to use both image and text as links if possible. Got any other methods?

**skyadrenaline** · 09-04-2010 08:56 AM

Wait, actually let me try it out first... haha thanks Fang!!

**iRedMedia** · 09-05-2010 01:32 AM

I believe if you make the entire div an anchor, it should work. Though if you're making it clickable, there's no reason to use a background image.

With the text directly below the image, use the position & top css properties to move the text up far enough so that it overlaps!

Happy hunting.

**skyadrenaline** · 09-07-2010 10:50 AM

Fang,

Your code works pretty well, except when the text I put in there takes up more than one row. Do you have any ideas? I really appreciate your help so far. http://staco.net23.net/formcss.html

iRedMedia,

Can you show me some sample code? I have no idea how to implement what you are talking about... Thanks!

**iRedMedia** · 09-07-2010 12:25 PM

HTML Code:

<img src="image.png" />
<h1 style="margin-top:-50px">A happy negative</h1>

Note: using positions is tricky business. I usually don't like relative, because it removes the element from the flow, while leaving behind the space it previously took up, uninhabitable.

Some may find it *slightly* anoying.

IE 6 and negative margins anyone?

**iRedMedia** · 09-07-2010 12:27 PM

Ah, now I see what you're doing. His code will work. If you set the line height, and with w/h to the correct size of the image, using a BG image for the link is much more semantic. However, if you were using it like a portfolio or something (which i figured you were) then the other way would be more suitable. I recommend giving his way a shot first!

Thread: layering text over image

Thread Tools

Display

layering text over image

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions