/    Sign up×
Community /Pin to ProfileBookmark

layering text over image

Copy linkTweet thisAlerts:
Sep 04.2010

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?

[url]http://staco.net23.net/formstest.html[/url]

Thanks in advance.

to post a comment
HTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangSep 04.2010 — 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>[/CODE]
Copy linkTweet thisAlerts:
@skyadrenalineauthorSep 04.2010 — 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?
Copy linkTweet thisAlerts:
@skyadrenalineauthorSep 04.2010 — Wait, actually let me try it out first... haha thanks Fang!!
Copy linkTweet thisAlerts:
@iRedMediaSep 05.2010 — 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.
Copy linkTweet thisAlerts:
@skyadrenalineauthorSep 07.2010 — 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!
Copy linkTweet thisAlerts:
@iRedMediaSep 07.2010 — [code=html]<img src="image.png" />
<h1 style="margin-top:-50px">A happy negative</h1>
[/code]
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?
Copy linkTweet thisAlerts:
@iRedMediaSep 07.2010 — 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!
×

Success!

Help @skyadrenaline spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...