• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 659
  • Last Modified:

relative positioning of <div> tag for a page with a centered layout

Greetings,

I have a site (http://www.themaurypeople.com/featured.php) where I want to take an existing layout and center it.

The whole page is in a table and I would like to just center the table as such:
<table width="800" border="0" cellspacing="0" cellpadding="0" align=center>

Currently there is a small image that is overlapped over a larger using a div tag such as this:
<div id="Layer1" style="position:absolute; left:16px; top:126px; width:110px; height:177px; z-index:1">

My question is, how can I make the positioning of this div tag relative to the centered table and the top of the page or perhaps relative to the image below it?

I am knowledgeable in web development generally but not an expert at css positioning.

Thanks very much

Schuyler



0
Schuyler Kuhl
Asked:
Schuyler Kuhl
  • 2
1 Solution
 
Göran AnderssonCommented:
When you use absolute positioning, the element is positioned relative to the closest parent that is a layer. An element is a layer if it has position set to absolute or relative.

So, just set position:relative; on the parent element that you want to use as origin for the positioning.
0
 
Schuyler KuhlAuthor Commented:
Thank you.

By modifying the positioning to relative I have the picture positioned as I want.  However it is pushing down the content below it.

http://www.themaurypeople.com/homeowners.php

There is only one <div> tag, so I am not sure how it will chose its parent element.

Sky


<table width="800" border="0" cellspacing="0" cellpadding="0" align=center>
  <tr>
    <td><a href="index.php"><?php include('./inc/header_nav_interior_sotheby.inc'); ?></a></td>
  </tr>
  <tr>
    <td height="13" background="images/home/blue_line.gif"><?php include('./inc/interior_navigation.inc'); ?></td>
  </tr>
  <tr>
    <td>
	<?php include('./inc/interior_background.inc'); ?>
      This is the part that I have be experimenting with.
    <div id="Layer1" style="position:relative; left:16px; top:-207px; z-index:1">
<?php include('./inc/interior_smaller.inc'); ?>
</div>
	</td>
  </tr>
Everything is being pushed down below this.
  <tr>
    <td><img src="images/interior/nav/info.gif" width="800" height="44"></td>
  </tr>
  <tr>
    <td height="75">

Open in new window

0
 
Schuyler KuhlAuthor Commented:
Thank you.

I think I got it.

I put my fixed image inside a <div> tag and set it to position: absolute.

Then I had my other image set to position:relative.

Thanks again for your help.

Sky




<div id="Layer5" style="position:absolute; z-index:1"><img src-"image.jpg></div>
    <div id="Layer1" style="position:relative; left:16px; top:7px; z-index:2">
<img src="image2.jpg"></div>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now