Reputation: 26051
I noticed an unusual issue today while throwing together a quick "under construction" type page where I'm moving text onto an image using relative positioning. (This page was "inspired" by SO's offline page, if you care)
<html>
<head>
<title>Bronco Marching Band</title>
</head>
<body style="background-color: #888;">
<div style="text-align: center;">
<img src="standby.jpg" width="799px" height="600px" alt="Please Stand By"
title="The Bronco Band website is down for a major upgrade. Please check back later."
style="width: 620px; height: 465px; opacity: 0.8;" />
<div style="color: #C69C6D; font-size: 397%; font-weight: bold; font-family: sans, arial, helvetica; position: relative; top: -300px; left: 0px;">
PLEASE STAND BY
</div>
</div>
</body>
</html>
It seems to be that the area where the relatively positioned div used to be is still taking up space. i.e. it leaves whitespace below the image where the div would be if it wasn't positioned.
Is there any way around this?
Upvotes: 1
Views: 2726
Reputation: 159590
Relative-positioned elements still take up space. You actually want an absolutely-positioned element... you just want it to be positioned absolutely relative to the container!
<div style="text-align: center;position:relative; zoom: 1;">
<img src="standby.jpg" width="799px" height="600px" alt="Please Stand By" title="The Bronco Band website is down for a major upgrade. Please check back later." style="width: 620px; height: 465px; opacity: 0.8;" />
<div style="color: #C69C6D; font-size: 397%; font-weight: bold; font-family: sans, arial, helvetica; position: absolute; top: 200px; left: 0px; width: 100%; text-align:center">
PLEASE STAND BY
</div>
</div>
Key changes:
div
has position: relative
style setdiv
has position: absolute
style set, causing it to be positioned at absolute coordinates within the parent.div
full-width to allow text-align: center
to work.Edit:
In order for IE6 to position correctly, I've used a hack to force layout for the container DIV: the zoom: 1
style. If you don't need to support IE6, you can omit this.
Tested in: FF3, IE6, Chrome1, Chromium2
Demo: http://jsbin.com/uqisa
Upvotes: 5
Reputation: 14644
Rather than this:
position: relative;
top: -300px;
Try this:
margin-top: -300px;
On a separate note, within your <img />
tag, you should also change this:
width="799px" height="600px"
to this:
width="799" height="600"
Upvotes: 3