www.webdeveloper.com
Results 1 to 2 of 2

Thread: My Divs won't overlap :S

  1. #1
    Join Date
    Apr 2009
    Posts
    37

    My Divs won't overlap :S

    Hiya, as the title says I can not get my divs to overlap, I'm sure I must be overlooking something really daft, but can't for the life of me see what.

    I've tried added different positioning, setting left/right/top with pixel values

    I've attached an image of what I'm trying to achieve so I geuss now I should post my code too.

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body {
    	background-color:#000000;
    	background-image:url(fade.png);
    	background-repeat:repeat-x;
    	margin:0px;
    }
    
    #container {
    	margin-left:auto;
    	margin-right:auto;
    	width:960px;
    }
    	
    	/* nested within container */	
    	#header {
    		height:370px;
    		width:960px;
    	}
    
    		/* nested within header */
    		#logo {
    			float:left;
    			height:370px;
    			width:845px;
    			z-index:1;
    		}
    		
    		#nav {
    			color:#FFFFFF;
    			float:right;
    			padding-right:10px;
    			text-align:right;
    			top:50px;
    			width:220px;
    			z-index:2;
    		}
    		
    		#login_1 {
    		}
    		
    		#login_2 {
    		}
    		/* end of nested divs */
    	
    	#content {
    		width:960px;
    	}
    	
    	#dates {
    		float:left;
    		width:140px;
    	}
    	
    	#timeline {
    		float:right;
    		width:820px;
    	}
    	/* end of nested divs */
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <
    title>lil_bugga's Project Page</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
       <div id="container">
          <div id="header">
              <div id="logo">
                     <img src="logo.png" />
              </div><!-- end of logo div -->
              <div id="nav">
                    Home<br />
                    About Me<br />
                    My Plans<br />
                    My Progress<br />
                    Inventory<br />
                    Images<br />
                    Videos
              </div><!-- end of nav div -->
          </div><!-- end of header div -->
        
           <div id="content">
                dummy text
           </div><!-- end of content div -->
        </div><!-- end of container div -->
    </body>
    </html> 
    Attached Images Attached Images
    Last edited by lil_bugga; 03-28-2012 at 07:23 AM.

  2. #2
    Join Date
    Mar 2012
    Posts
    1,372
    Use:
    position: absolute;

    instead of the default (mplied):
    position: static;

    then you will need to specify at least:
    left: 10px;
    top: 10px;
    z-index: 1;

    and either:
    right: 10px;
    bottom: 10px;

    or:
    width: 100px;
    height: 100px;

    If you define a div without the position: statement, it defaults to "static". If you specify absolute divs, they can overlay statics and each other. The 10px and 100px are just examples, not minima.

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