PDA

Click to See Complete Forum and Search --> : layering problem

webbie321
12-02-2003, 02:24 PM
I'm having a problem trying to control the exact positioning of my layers. I'm using the DIV tag (i.e. <DIV ID="layer1" STYLE="position:relative; top: 0; left: 0; z-index: 1">)

I know that you can control the top and left position of where the layering starts. But can you control where the layering ends, that is the right point of the layer?

For example:

I have a table with a width of 450 pixels with three columns. Col 1 is 150 pixels in width and Col 2 is 200 pixels in width and Col 3 is 100 pixels in width.

I want col 1 to overlap col 2 for 10 pixels in width, so they both share the region of the first 10 pixels in width in col 2.

And I want col 2 to bump up against col 3.

So esentially, col 1 is really 160 pixels in width and col 2 is 200 pixels in width and col 3 is 100 pixels in width.

Does anyone know how to do this??

Any help would be much appreciated!!

Thanks.
Pittimann
12-02-2003, 03:35 PM
Hi!

You got the top and left stuff absolutely right concerning the div-style. A right point cannot be defined directly, but you can add the width and height for your layer.

In your example:
<DIV ID="layer1" STYLE="position:relative; top: 0; left: 0; width: x; height: y; z-index: 1">
x: width in pixels
y: height in pixels

Hope, that helps you a bit

Cheers - Pit
webbie321
12-02-2003, 03:39 PM
When I define the width and height in the DIV tag, all it does is pushes the column over. I don't get the layering effect.
soccer362001
12-02-2003, 03:45 PM
Use something like this
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="dan_gabbard@anadarko.com">
<meta name="generator" content="AceHTML 5 Freeware">
<style type="text/css">
#content{
position: absolute;
width: 10em;
left: 0px;
top: 0px;
right: 20px;
padding-right: 20px;
}
#content1{
position: absolute;
width: 10em;
left: 155px;
top: 0px;
right: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="content">
<div style="text-align:left; padding: 8px; background-color:#ffffff; border:solid 1px #000000;">
this is where your text goes
</div>
</div>
<div id="content1"><div style="text-align:left; padding: 8px; background-color:#ffffff; border:solid 1px #000000;">
this is where your text goes
</div></div>
</body>
Pittimann
12-02-2003, 03:47 PM
You did not mention, where your table is (in the div or elsewhere). Overlapping table columns don't exist afaik.

I'm sure, that for your purposes you have to get rid of the table and put your contents into different div's or spans - these ones can overlap.

Cheers - Pit
webbie321
12-04-2003, 03:55 PM
I got it to work!

Thanks you two for taking the time to help.