ansaurus

Question

Odd nitpicky issue with CSS relative positioning

Answer 1

+2 A:

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"

Ron DeVera 2009-04-25 00:02:23

Oops, forgot to take the width/height out. I manage that in CSS later.

Shadow 2009-04-25 00:07:54

Answer 2

+5 A:

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:

Container div has position: relative style set
Child div has position: absolute style set, causing it to be positioned at absolute coordinates within the parent.
I position relative to the top of the parent, and make the positioned 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

Shog9 2009-04-25 00:03:35

Answer 3

A:

The solution by Slog9 was perfect!! It took me hours to figure this out and I'm so happy I found this site. Thank you very much.

Jim Fusco 2010-09-10 01:43:02

ansaurus

tags:

views:

answers:

Odd nitpicky issue with CSS relative positioning

related questions