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; } Link to comment https://forums.phpfreaks.com/topic/150875-solved-how-to-stop-my-div-tag-from-pushing-the-body-down/ 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 Link to comment https://forums.phpfreaks.com/topic/150875-solved-how-to-stop-my-div-tag-from-pushing-the-body-down/#findComment-792593 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? Link to comment https://forums.phpfreaks.com/topic/150875-solved-how-to-stop-my-div-tag-from-pushing-the-body-down/#findComment-792622 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 Link to comment https://forums.phpfreaks.com/topic/150875-solved-how-to-stop-my-div-tag-from-pushing-the-body-down/#findComment-792625 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. Link to comment https://forums.phpfreaks.com/topic/150875-solved-how-to-stop-my-div-tag-from-pushing-the-body-down/#findComment-792665 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.