CSS positioning query... [Archive]

vouzamo

06-05-2008, 07:13 AM

Hi,

I have made a page and it is to feature and image with a semi-transparent overlayed description. I have managed to achieve this by using relative positioning on a div containing the necessary overlay. However, when the div is moved above the image, the space where it originated from isn't automatically used by the following HTML. How can I allow the following HTML to use the space where the div would have been but for the relative positioning?

The URL of the page is: http://www.drakeshead.co.uk/test/index.asp

The code for the image and associated overlay:

<img src="images/uploaded/0536.jpg" alt="This is an image of a screen grab" style="border: 1px solid #000000;">
<div style="position: relative; width: 300px; height: 30px; top: -<%= (Session("rel_pix") + 30) %>px; background-image: url('images/layout/image_description.png'); color: #ffffff;">
<table width="300" cellpadding="0" cellspacing="0">
<tr>
<td width="300" height="30" align="center" valign="middle">
This is an image of a screen grab and it intentionally goes on a bit to check how the word wrapping looks and if it can break
</td>
</tr>
</table>
</div>

The full source code of the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<%
if(Session("rel_pix") = "") then
Set objBCap = Server.CreateObject("MSWC.BrowserType")
if(objBCap.Browser = "IE" And CInt(objBCap.Version) >= 3) then
Session("rel_pix") = 3
else
if(InStr(Request.ServerVariables("HTTP_USER_AGENT"), "MSIE 6")) then
Session("rel_pix") = 3
else
if(objBCap.Browser = "Netscape" And CInt(objBCap.Version) >= 3) then
Session("rel_pix") = 3
else
Session("rel_pix") = 1
end if
end if
end if
end if
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="description" content="Drakeshead.co.uk is the official website for Drakeshead Labradors - specialising in breeding the prestigeous Drakeshead pedigree, Sandra and John Halstead can provide a professional service with a sterling reputation.">
<meta name="Author" content="John Askew">
<meta name="keywords" content="drakeshead, labrador, gundog, dog, sandra, john, halstead, chorley">
<meta name="robots" content="follow, index">
<meta name="revisit" content="7 days">
<meta name="rating" content="general">
<title>Drakeshead</title>
<style type="text/css">
body
{
background-image: url('images/bg.jpg');
font-family: Tahoma;
font-size: 11px;
}
.nav
{
font-size: 13px !important
}
.nav a:link
{
color: #ffffff;
text-decoration: none;
}
.nav a:active
{
color: #ffffff;
text-decoration: underline;
}
.nav a:visited
{
color: #ffffff;
text-decoration: none;
}
.nav a:hover
{
color: #ffffff;
text-decoration: underline;
}
</style>
</head>
<body>
<table width="900" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="900" height="100" colspan="3">
<img src="images/logo.png" alt="Drakeshead Logo">
</td>
</tr>
<tr>
<td width="30" height="30" style="background-image: url('images/layout/tl.png');">
</td>
<td width="840" height="30" style="background-image: url('images/layout/tc.png'); color: #ffffff;" align="center" valign="middle">
<span class="nav">
<a href="/">Home</a>
 | 
<a href="/about_us.asp">About Us</a>
 | 
<a href="/gallery.asp">Gallery</a>
 | 
<a href="/stud_dogs.asp">Stud Dogs</a>
 | 
<a href="/puppies.asp">Puppies</a>
 | 
<a href="/dvd_video.asp">DVD / Video</a>
 | 
<a href="/contact_us.asp">Contact Us</a>
</span>
</td>
<td width="30" height="30" style="background-image: url('images/layout/tr.png');">
</td>
</tr>
<tr>
<td width="30" height="100%" style="background-image: url('images/layout/ml.png');">
</td>
<td width="840" height="100%" style="background-image: url('images/layout/mc.png');">
<table width="840" cellpadding="0" cellspacing="0">
<tr>
<td width="840" height="10">
</td>
</tr>
<tr>
<td width="840" height="100%">
<center>
<h1>Welcome to the official Drakeshead website</h1>
<img src="images/uploaded/0536.jpg" alt="This is an image of a screen grab" style="border: 1px solid #000000;">
<div style="position: relative; width: 300px; height: 30px; top: -<%= (Session("rel_pix") + 30) %>px; background-image: url('images/layout/image_description.png'); color: #ffffff;">
<table width="300" cellpadding="0" cellspacing="0">
<tr>
<td width="300" height="30" align="center" valign="middle">
This is an image of a screen grab and it intentionally goes on a bit to check how the word wrapping looks and if it can break
</td>
</tr>
</table>
</div>
<p>Blah blah blah blah<br>blah blah blah blah blah blah</p>
<p>etc<br>etc<br>etc</p>
</center>
</td>
</tr>
<tr>
<td width="840" height="10">
</td>
</tr>
</table>
</td>
<td width="30" height="100%" style="background-image: url('images/layout/mr.png');">
</td>
</tr>
<tr>
<td width="30" height="30" style="background-image: url('images/layout/bl.png');">
</td>
<td width="840" height="30" style="background-image: url('images/layout/bc.png'); color: #ffffff;" align="center" valign="middle">
Drakeshead Labradors, The Lodge, Lodge Bank, Brinscall, Chorley, PR5 1EB
</td>
<td width="30" height="30" style="background-image: url('images/layout/br.png');">
</td>
</tr>
</table>
</body>
</html>

Note: The ASP code detects the browser and modifies the offset of the div position by 30px + offset.

Hope you can help because I cannot figure this one out at all.

Centauri

06-05-2008, 09:05 AM

Offestting using relative position only offsets the display of the object whilst the object itself still occupies the original space. Using a negative top margin instead of the offset will do the job - the relative position is still required to be set to ensure the div displays on top.<div style="position: relative; width: 300px; height: 30px; margin-top: -16px; background-image: url(images/layout/image_description.png); color: rgb(255, 255, 255);">

vouzamo

06-05-2008, 09:14 AM

Great response. Just tried that and it works beautifully.

Thank you for your help.