December 18, 200718 yr Hello, I am having problems with a website layout which has css and div and some backgrounds involved. I am using 4 images bg.png which is the main background with stripes and gradient top.png which is the rounded corners + shadow top of the white content field - transparent image bgmain.png which is the background + shadow for the white content field - transparent image end.png which is the bottem with rounded corners + shadow of the white content field- transparent image Problem In the footer i have end.png set as a background but bgmain.png is also popping up there, so both backgrounds are overlapping. How can i solve this ? I hope i explained well. This is the html code <body> <div id="wrapper"> <div id="header"> </div> <div id="content"> <p>test</p> <p>1234568797 </p> <div id="footer"> </div> </div> </div> </body> And this is the css code body { margin: 0; padding: 0; background-color: #cbc6b8; background-image: url(images/bg.png); background-repeat: repeat-x; } #wrapper { position: relative; width: 963px; margin-right:auto; margin-left:auto; margin-top:0; padding:0; } #header { position: absolute; top: 0px; left: 0px; width: 963px; height: 51px; background: url(images/top.png); } #content { position: absolute; top: 51px; left: 0px; width: 963px; height: auto; background: url(images/bgmain.png) top left; text-align: center; } #footer { width: 963px; height: 128px; background: url(images/end.png) top left no-repeat; }
December 18, 200718 yr Two issues: You've closed one to many divs and the footer div sites inside of the content div.
December 18, 200718 yr Author Two issues: You've closed one to many divs and the footer div sites inside of the content div. Hi thanks for taking a look at my code. I have changed the code as you said but it gets worse then.
December 18, 200718 yr get rid of your positioning, as you are having everything underneath each other and contained in a warpper that is the same width as all of your other divs they will fall one underneath each other automatically so do this... CSS: body { margin: 0; padding: 0; background-color: #cbc6b8; background-image: url(images/bg.png); background-repeat: repeat-x; } #wrapper { position: relative; width: 963px; margin-right:auto; margin-left:auto; margin-top:0; padding:0; } #header { width: 963px; height: 51px; background: url(images/top.png); } #content { width: 963px; height: auto; background: url(images/bgmain.png) top left; text-align: center; } #footer { width: 963px; height: 128px; background: url(images/end.png) top left no-repeat; } Then with your html do this you need to move your footer out of your content div but keep it in the wrapper like this: <div id="wrapper"> <div id="header"></div> <div id="content"> <p>test</p> <p>1234568797 </p> </div> <div id="footer"></div> </div>
Create an account or sign in to comment