Trying to create overlapping CSS div boxes.

rose_bud4201 · 05-13-2007, 02:17 AM

Here's hoping that any language really is fair game

In a nutshell, I'm -trying- to make two transparent CSS <div>s overlap, vertically, by about 30 pixels. In other words, I want the 2nd one to begin 30px before the 2nd one looks like it begins. I get that I'll probably have to adjust the z-axis of at least one of the two boxes, but no matter what I do I can't seem to get them to overlap, and it's getting frustrating!

What I've got now is this --

Code:

<style>
...
          .t  {background: url(./images/border/dot5.jpg) 0 0 repeat-x; z-index:1}
          .b   {background: url(./images/border/dot5.jpg) 0 100% repeat-x; z-index:1}
          .l   {background: url(./images/border/dot5.jpg) 0 0 repeat-y; z-index:1}
          .r   {background: url(./images/border/dot5.jpg) 100% 0 repeat-y; z-index:1}
          .bl  {background: url(./images/border/tr5.jpg) 0 100% no-repeat; z-index:1}
          .br  {background: url(./images/border/tl5.jpg) 100% 100% no-repeat; z-index:1}
          .tl  {background: url(./images/border/br5.jpg) 0 0 no-repeat; z-index:1}
          .tr  {background: url(./images/border/bl5.jpg) 100% 0 no-repeat; padding:10px; z-index:1}
          .t2 {background: url(./images/border/dot5.jpg) 0 0 repeat-x; z-index:2;}
          .b2  {background: url(./images/border/dot5.jpg) 0 100% repeat-x; z-index:2;}
          .l2  {background: url(./images/border/dot5.jpg) 0 0 repeat-y; z-index:2;}
          .r2  {background: url(./images/border/dot5.jpg) 100% 0 repeat-y; z-index:2;}
          .bl2 {background: url(./images/border/tr5.jpg) 0 100% no-repeat; z-index:2;}
          .tl2 {background: url(./images/border/br5.jpg) 0 0 no-repeat; z-index:2;}
          .br2 {background: url(./images/border/tl5.jpg) 100% 100% no-repeat; z-index:2;}
          .tr2 {background: url(./images/border/bl5.jpg) 100% 0 no-repeat; padding:10px; z-index:2;}
</style>
</head>
...etc.

<div style="text-align:left; padding:3px; font-family:tahoma; font-size:10;">
    <div class="tp"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">

Some text inside of Box #1

</div></div></div></div></div></div></div></div>
</div>

<div style="text-align:left; padding:3px; font-family:tahoma; font-size:10;">
    <div class="tp2"><div class="b2"><div class="l2"><div class="r2"><div class="bl2"><div class="br2"><div class="tl2"><div class="tr2">

Some text inside of Box #2

</div></div></div></div></div></div></div></div>
</div>

Basically what all that does it it takes the specified images and builds a box dynamic box with them, as described here.
As it is now, Box #2 starts a few px after Box #1 ends. I tried screwing with setting margin-top of t2 to a negative number, but either I'm not sure which of the ids to put it in or it's an invalid theory, because it doesn't change a thing. I'm getting pretty frustrated just changing random values.

If anyone has any suggestions, I'd love to hear them!
Thanks --

nkoplm · 05-13-2007, 04:45 AM

maybe try using relative positioning?

ie (you will have to adapt this to your own code, but paste this into a file and see how it works)

Code:

<div style="text-align:left; padding:3px; font-family:tahoma; font-size:10;
		background:red;width:100px;height:100px; /*this is just to colour and size the box*/ ">
Some text inside of Box #1
</div>
<div style="text-align:left; padding:3px; font-family:tahoma; font-size:10;
		background:green;width:100px;height:100px; /*this is just to colour and size the box*/
		position:relative;top:-90px;left:10px; /* this positions the second div */">
 Some text inside of Box #2

</div>

as a side note i personaly found w3schools.com to be a great website for learning CSS

rose_bud4201 · 05-13-2007, 02:27 PM

Thank you! I fooled around with it a bit and finally came up with the solution that I wanted. Works perfectly, and your help was much appreciated!

(Redesign thus completed, the site's here if you want to see what I was trying to accomplish...

)