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">)<br />
<br />
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?<br />
<br />
For example:<br />
<br />
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.<br />
<br />
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.<br />
<br />
And I want col 2 to bump up against col 3.<br />
<br />
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.<br />
<br />
Does anyone know how to do this??<br />
<br />
Any help would be much appreciated!!<br />
<br />
Thanks.<!--content-->Hi!<br />
<br />
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.<br />
<br />
In your example:<br />
<DIV ID="layer1" STYLE="position:relative; top: 0; left: 0; width: x; height: y; z-index: 1"><br />
x: width in pixels<br />
y: height in pixels<br />
<br />
Hope, that helps you a bit<br />
<br />
Cheers - Pit<!--content-->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.<!--content-->Use something like this<br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
<title></title><br />
<meta name="description" content=""><br />
<meta name="keywords" content=""><br />
<meta name="author" content="[email protected]"><br />
<meta name="generator" content="AceHTML 5 Freeware"><br />
<style type="text/css"><br />
#content{<br />
position: absolute;<br />
width: 10em;<br />
left: 0px;<br />
top: 0px;<br />
right: 20px;<br />
padding-right: 20px;<br />
}<br />
#content1{<br />
position: absolute;<br />
width: 10em;<br />
left: 155px;<br />
top: 0px;<br />
right: 20px;<br />
padding-right: 20px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="content"><br />
<div style="text-align:left; padding: 8px; background-color:#ffffff; border:solid 1px #000000;"><br />
this is where your text goes<br />
</div><br />
</div><br />
<div id="content1"><div style="text-align:left; padding: 8px; background-color:#ffffff; border:solid 1px #000000;"><br />
this is where your text goes<br />
</div></div><br />
</body><!--content-->You did not mention, where your table is (in the div or elsewhere). Overlapping table columns don't exist afaik.<br />
<br />
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.<br />
<br />
Cheers - Pit<!--content-->I got it to work! <br />
<br />
Thanks you two for taking the time to help.<!--content-->
<br />
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?<br />
<br />
For example:<br />
<br />
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.<br />
<br />
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.<br />
<br />
And I want col 2 to bump up against col 3.<br />
<br />
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.<br />
<br />
Does anyone know how to do this??<br />
<br />
Any help would be much appreciated!!<br />
<br />
Thanks.<!--content-->Hi!<br />
<br />
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.<br />
<br />
In your example:<br />
<DIV ID="layer1" STYLE="position:relative; top: 0; left: 0; width: x; height: y; z-index: 1"><br />
x: width in pixels<br />
y: height in pixels<br />
<br />
Hope, that helps you a bit<br />
<br />
Cheers - Pit<!--content-->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.<!--content-->Use something like this<br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
<title></title><br />
<meta name="description" content=""><br />
<meta name="keywords" content=""><br />
<meta name="author" content="[email protected]"><br />
<meta name="generator" content="AceHTML 5 Freeware"><br />
<style type="text/css"><br />
#content{<br />
position: absolute;<br />
width: 10em;<br />
left: 0px;<br />
top: 0px;<br />
right: 20px;<br />
padding-right: 20px;<br />
}<br />
#content1{<br />
position: absolute;<br />
width: 10em;<br />
left: 155px;<br />
top: 0px;<br />
right: 20px;<br />
padding-right: 20px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="content"><br />
<div style="text-align:left; padding: 8px; background-color:#ffffff; border:solid 1px #000000;"><br />
this is where your text goes<br />
</div><br />
</div><br />
<div id="content1"><div style="text-align:left; padding: 8px; background-color:#ffffff; border:solid 1px #000000;"><br />
this is where your text goes<br />
</div></div><br />
</body><!--content-->You did not mention, where your table is (in the div or elsewhere). Overlapping table columns don't exist afaik.<br />
<br />
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.<br />
<br />
Cheers - Pit<!--content-->I got it to work! <br />
<br />
Thanks you two for taking the time to help.<!--content-->