SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Location
    Brazil
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to create multiple elements using only one div?

    Hi fellas, how to create something like this below, using only one div and elements CSS3?

    img.JPG

    edit: It is as if they were three boxes on top of one another, but using only one div.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If its just for a pretty effect then you can do it like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .test1{
    	width:300px;
    	height:300px;
    	border:20px solid lightgreen;
    	outline: 20px solid brown;
    	background:#fcf;
    	margin:30px;	
    }
    .test2{
    	width:300px;
    	height:300px;
    	border: 20px solid brown;
    	background:lightgreen;
    	margin:10px;	
    	padding:20px;
    	position:relative;
    }
    .test2:after{
    	content:" ";
    	position:absolute;
    	top:20px;
    	bottom:20px;
    	left:20px;
    	right:20px;
    	background:#fcf;	
    }
    
    
    </style>
    </head>
    
    <body>
    <div class="test1"></div>
    <div class="test2"></div>
    
    </body>
    </html>

    Or you could use box-shadow for multiple borders.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Location
    Brazil
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But in this case, you're using two divs test1 and test2, isn't possible create using only one?

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    It is one div, Paul has two to show you two possible techniques. There should be two boxes showing up in the test, both doing what you want but in different ways. The second way won't work in IE7.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Location
    Brazil
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, sorry! Now I understand why he put two squares and my figure only shows one. *ashamed*

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    It is one div, Paul has two to show you two possible techniques. There should be two boxes showing up in the test, both doing what you want but in different ways. The second way won't work in IE7.
    Thanks for explaining Mallory


Tags for this Thread

Bookmarks

Posting Permissions

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