Share your knowledge at the LQ Wiki.
Go Back > Forums > Non-*NIX Forums > Programming
User Name
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.


  Search this Thread
Old 05-13-2007, 02:17 AM   #1
Registered: Aug 2002
Location: St Louis, MO
Distribution: Xubuntu, RHEL, Solaris 10
Posts: 929

Rep: Reputation: 30
Trying to create overlapping CSS div boxes.

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 --
          .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;}

<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 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

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 --
Old 05-13-2007, 04:45 AM   #2
Registered: May 2005
Distribution: Fedora
Posts: 92

Rep: Reputation: 15
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)
<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 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

as a side note i personaly found to be a great website for learning CSS
Old 05-13-2007, 02:27 PM   #3
Registered: Aug 2002
Location: St Louis, MO
Distribution: Xubuntu, RHEL, Solaris 10
Posts: 929

Original Poster
Rep: Reputation: 30
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... )


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
HTML/CSS/JS: Problem with <p> not having an absolute position with CSS. RHLinuxGUY Programming 7 03-03-2007 12:21 AM
If desktops are refered to as boxes do you also refer to laptops as boxes? dr_zayus69 General 14 12-24-2005 03:46 PM
hidding a DIV djgerbavore Programming 1 07-29-2005 03:51 PM
win2000 boxes cannot map but winnt boxes can - same user! starbeetlechick Linux - Networking 0 07-24-2003 07:24 AM > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 07:57 AM.

Main Menu
Write for LQ is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration