www.webdeveloper.com
Results 1 to 3 of 3

Thread: Lavering divs like cards

  1. #1
    Join Date
    Apr 2006
    Posts
    56

    Lavering divs like cards

    Hey all, I am trying to layer overlapping divs like a hand of cards, does anyone know a way to do this. I tried using negative left margins on all but the first cards and it ended up pulling all of the cards way to the left of where they should be. Anyone know of a better way?

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    I threw this together I don't know if its what your looking for though:

    HTML Code:
    <html>
    <head>
    <style type="text/css">
     #container {
    	width: 600px;
    	height: 600px;
    	border: 1px solid #000;
    	background: #000;
     }
    
     .card1, .card2, .card3, .card4, .card5 {
    	position: absolute;
    	background: #000;
    	border: 1px solid #fff;
    	width: 150px;
    	height: 250px;
    	color: #fff;
     }
    
     .card1 {
    	margin: 100px 0;
     }
    
     .card2 {
    	margin: 75px 75px;
     }
    
     .card3 {
    	margin: 50px 150px;
     }
    
     .card4 {
    	margin: 25px 225px;
     }
    
     .card5 {
    	margin: 0 300px;
     }
    </style>
    </head>
    <body>
     <div id="container">
    
      <div class="card1">
    	first card
      </div>
    
      <div class="card2">
    	second card
      </div>
    
      <div class="card3">
    	third card
      </div>
    
      <div class="card4">
    	fourth card
      </div>
    
      <div class="card5">
    	fifth card
      </div>
    
     </div>
    </body>
    </html>
    I know it doesn't have the doctype stuff, and you might need to hack it in IE, but it works in FF right now.....I'm too lazy to make it real good.

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Actually, -it looks 99% identical in IE to Fx! That is rather impressive! I'll have to grab that and study it some more...
    Nicely done!!
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles