SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Normal Flow, Floats, Relative Positioning Questions

    Hi there guys and gals!

    Well I have a layout where I want to place transparent elements over the top of a back ground image. So my logo and header image would be placed over a background div.

    I have started to play with it a little and I floated two divs and they are now out of normal flow and the back ground image is not showing through.

    I have provided my code. Would some one be willing to suggest an approach?


    Thanks for your input!


    CSS
    HTML Code:
    /* stylesheet-1 Document */
    
    body {
     background: #fff; 
     font:76% arial, verdana, helvetica, sans-serif;
    }
    
    * { margin:0; padding:0;
    }
    
    #wrapper {width:1006px; margin:0 auto;
    }
    
    #logo {background: #000 url(logo.jpg) top left no-repeat; width:250px; height:120px;
    float:left;
    }
    #banner {background: #000 url(header.png) top left no-repeat; width:756px; height:120px;
    float:left;
    }
    
    /* ------- Section Pages ------- */
    
    #environment {background: #000 url(bg-pink.jpg) no-repeat; width:1006px; height:750px;
    }


    HTML
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>New Man Test</title>
    <meta name="keywords" content="" />
    <meta name="description" content=""  />
    <meta name="title" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="includes/stylesheet-1.css" />
    </head>
    <body>
    <div id="wrapper">
       <div id="environment">
          
    	  <div id="logo"></div>
          <div id="banner"></div>
    
       </div>
    </div>
    
    </body>
    </html>

  2. #2
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So the two elements floated left are no longer in the containing block of the #environment. Would I relatively position these to place them over the #environment background image?


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
  •