cluce Posted March 24, 2009 Share Posted March 24, 2009 I am trying to split my background div tags into two but I do not want it to push the body of my website down. What is the code to layer one tag on top of the other. I am trying to layer this tag (background-effect)beneath the body tag. any help? <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Css/Div9.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="background-effect"></div> <form id="form1" runat="server"> <div id="page-container"> <div id="header"> <h1></h1> </div> <div id="main-nav">Main Nav</div> <div id="sidebar-a"> <div class="padding"> </div> </div> <div id="content"> <div class="padding"> </div> </div> <div id="footer">Footer <div id="altnav"> </div> </div> </div> </form> </body> </html> html, body { margin: 0; padding: 0; } body { background-position: #ffffff; font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 12px; color: #666666; background: #000080; } #background-effect { background-color: Gray; clear: both; height:50px; } .hidden { display: none; } #page-container { width: 800px; margin: auto; } #header { height: 150px; font-family: 'Ant Olive Cp'; font-size: 32px; font-weight: normal; font-style: normal; padding-left: 5px; background-color: #FFFFFF; } h1 { margin: 0; padding: 15px; font-size: medium; } #main-nav { background:red; height: 25px; } #sidebar-a { float:left; width: 180px; line-height: 18px; } #sidebar-a .padding { padding: 25px; } #content { margin-left: 280px; padding-left: 10px; padding-right: 10px; line-height: 18px; background-color: #FFFFFF; } #content .padding { padding: 25px; } #content h2 { margin: 0; padding: 0; padding-bottom: 15px; } #content p { margin: 0; padding: 0; padding-bottom: 15px; } #footer { height: 66px; clear: both; text-align:center; } Quote Link to comment Share on other sites More sharing options...
rhodesa Posted March 24, 2009 Share Posted March 24, 2009 if you set the CSS of "position:absolute;" then you can use top/bottom and left/right to position it on the page edit: the value for top/bottom and left/right will be relative to the body tag Quote Link to comment Share on other sites More sharing options...
cluce Posted March 24, 2009 Author Share Posted March 24, 2009 if you set the CSS of "position:absolute;" then you can use top/bottom and left/right to position it on the page edit: the value for top/bottom and left/right will be relative to the body tag I did this but I want the body tag to be on top NOT the background-effect tag. How do I achieve this? Quote Link to comment Share on other sites More sharing options...
rhodesa Posted March 24, 2009 Share Posted March 24, 2009 you should be able to adjust this with z-index: http://www.w3schools.com/Css/pr_pos_z-index.asp Quote Link to comment Share on other sites More sharing options...
cluce Posted March 24, 2009 Author Share Posted March 24, 2009 you should be able to adjust this with z-index: http://www.w3schools.com/Css/pr_pos_z-index.asp great. thanks. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.