November 23, 201015 yr i have never really understood the positioning in CSS and also I have never used the z-index. I have my header and navbar inside a container below these I have a image that I need text to flow over the top of so I have give the image a z-index of -1 and set the position to absolute, the problem is now my footer is not recognising the image is there and is laying below my navbar, I assume its something to do witht the position element but cant figure it out. Thanks in advance for your help. <!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>Untitled Document</title> <link href="css/index.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="Container"> <div class="Header"> <img src="images/Header.jpg" /> </div><!-- Header Ends --> <div class="Navbar"> <a href="#">Home</a> <a href="#">Driveways</a> <a href="#">Blockpaving</a> <a href="#">Roofs & Walls</a> <a href="#">Landscaping</a> <a href="#">More Information</a> </div><!-- Navbar Ends --> <div id="content"> <img class="back" src="images/homebackground.jpg" /> <div class="Box"> <p>Homecare Cleaning are one of the UK'S leading drive patio restoration specialists. Homecare Cleaning use only the best concrete blockpaving sealer which should never be confused with cheap inefficient and totally unsuitable acrylic imitations!!!</p> <br /> <strong><p>Prevents</p></strong> <ul> <li>OIL AND DIESEL STAINS</li> <li>FOOD AND DRINK STAINS</li> <li>LOSS OF JOINTING SAND</li> </ul> <br /> <strong><p>Eliminates</p></strong> <ul> <li>WEEDS IN CRACKS</li> <li>GRASS IN JOINTS</li> <li>ANT NESTS</li> </ul> </div><!-- Text Box Ends --> </div><!-- content box ends --> <div id="Footer">dddd</div> </div><!-- Container Ends --> </body> </html> And My CSS @charset "UTF-8"; /* CSS Document */ /* Layout */ /* 1. Container */ /* 2. Header */ /* 3. Navbar */ /* 4. Footer */ /* 5. Box Classes */ #Container{ width:800px; height:auto; margin:auto; } .Header{ width:800px; height:150px; } .Navbar{ width:800px; height:30px; background-color:#09F; } .back{ position:absolute; left:0px; top:0px; z-index:-1; } #content{ width:800px; height:820px; position:absolute; } .Box{ width:300px; height:auto; float:right; margin-top:80px; } .Box2{ width:340px; height:auto; padding:10px; float:left; } .textbox{ width:294px; height:389px; } #Footer{ width:800px; height:100px; } /* ------------------ Layout ends */ /* Text Classes */ /* 1. P (used for all content text) */ /* 2. h1 (used for headers) */ /* 3. h2 (used for subheaders) */ /* 4. li */ p{ font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#039; word-spacing:3px; margin:0px; } ul{ margin:0px; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#039; word-spacing:3px; } a:link, a:visited, a:active{ font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:18px; padding-right:15px; padding-left:15px; text-decoration:none; line-height:30px; } a:hover{ font-family:Arial, Helvetica, sans-serif; color:#CCC; font-size:18px; padding-right:15px; padding-left:15px; text-decoration:none; }
November 23, 201015 yr It's a bit difficult to check without your images, but as the #Footer is higher than it should be, you need to clear the float of the Box div above it. That's not enough because the content div is position: absolute so the #Footer takes no notice of it. The height of 820px for #content seems far more than is necessary. I changed these styles:- #content{ width:800px; /*height:820px;*/ /*position:absolute;*/ } #Footer{clear: both; width:800px; height:100px; } Removing the position: absolute from .content means that #Footer now sits immediately under it. Removing the height means that there isn't a very large space below your text before you get to the #Footer. I hope that works, it made a difference in my test but I was using my images and I don't know what size your images are.
November 23, 201015 yr Author Hello, thanks for your reply. The reason I have the content as absolute is because I have a large image, and I need to put text over the top of it. Im not aware of any other way to do this so its probably not the best. when I remove absolute the image shifts to the left of the screen, but I have just changed it to relative and its working fine. sorry Im not to clever with the positioning element I dont really understand how it works. Thanks for your help, I appreciate it.
Create an account or sign in to comment