| SitePoint Sponsor |
|
|
User Tag List
Results 1 to 2 of 2
-
May 19, 2009, 10:13 #1Addicted to the Source of Life
- Join Date
- Feb 2004
- Location
- Loveland Co
- Posts
- 548
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
-
May 19, 2009, 10:15 #2Addicted to the Source of Life
- 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