PDA

Click to See Complete Forum and Search --> : Overlay Text

Cory R
09-13-2009, 09:15 PM
Here's the issue I'm running in to:

http://i32.tinypic.com/2ujmvqp.png

Here's the source code:

<td class="c_topicfoot" colspan="2">
<div class="c_topicfoot-right"/ >
<a href="#">« Previous Topic</a> · <a href="#"><strong>Surrounding Communities</strong></a> · <a href="#">Next Topic »</a>
<div class="c_topicfoot-left"/ >
</td>
Here's the CSS:

td.c_topicfoot {
padding: 0;
}

.c_topicfoot-left {
background: url(http://209.85.62.24/269/184/0/p211668/tdFootBluGradL.png) #E7F1E4 no-repeat left;
width: 300px;
height: 24px;
float: left;
}

.c_topicfoot-right {
background: url(http://209.85.62.24/269/184/0/p211669/tdFootBluGradR.png) #E7F1E4 no-repeat right;
width: 300px;
height: 24px;
float: right;
}
Now, how would I go about having the content overlay the two DIV elements with a set background?

This is a fluid design, by the way.
cfajohnson
09-16-2009, 08:31 AM
Please post a URL; the problem may not be in the code you posted.
coothead
09-16-2009, 11:35 AM
Hi there Cory R,

does this help...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#container {
position:relative;
border:1px solid #c5c6d0;
}
#top,#bottom {
height:24px;
background-color:#e7f1e4;
background-repeat:no-repeat;
}
#top {
background-image:url(http://209.85.62.24/269/184/0/p211668/tdFootBluGradL.png);
}
#bottom {
background-image:url(http://209.85.62.24/269/184/0/p211669/tdFootBluGradR.png);
background-position:right 0;
}
#links {
position:absolute;
top:14px;
width:100%;
text-align:center;
}
#links a {
font-family:arial,verdana,helvetica,sans-serif;
font-size:0.9em;
color:#487bad;
text-decoration:none;
}
#links span {
margin:0 5px;
}
</style>

</head>
<body>

<div id="container">

<div id="top"></div>

<div id="links">
<a href="#"><span>&laquo;</span>Previous Topic</a><span>&middot;</span><a href="#"><strong>Surrounding Communities</strong></a><span>&middot;</span><a href="#">Next Topic<span>&raquo;</span></a>
</div>

<div id="bottom"></div>

</div>

</body>
</html>

coothead