boo_lolly Posted November 29, 2007 Share Posted November 29, 2007 i'm having trouble figuring out the best way to design a stylesheet file and an html file for the following desired layout. can anyone help me? the header would have a background image. the page would be 100% from top to bottom, about 530 pixels from left to right. background image for the left and right gradients obviously. i'm just not sure what to do. here's what i've got so far and it's not working out at all: stylesheet #container { width: 560px; background: #fff; } body, html { margin-top: 0px; margin-bottom: 0px; margin-left: 125px; padding: 0px; background: #cbcaca; color: #000; } #header { width: 515px; height: 60px; background-image: url('images/popupheader.gif'); background-repeat: no-repeat; background-position: top; padding: 0px; margin: 0px; border: 1px solid black; } #leftborder { background-image: url('images/beachhouse_gradientleft.gif'); background-repeat: repeat-y; background-position: left; width: 560px; border: 1px solid red; } #rightborder { background-image: url('images/beachhouse_gradientright.gif'); background-repeat: repeat-y; background-position: right; width: 560px; border: 1px solid blue; } #photo { padding: 10px: border: 1px solid green; } #footer { padding: 10px; border: 1px solid black; } html <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Photo Gallery</title> <link rel="stylesheet" type="text/css" href="gallerystyle.css" /> </head> <body> <div id="container"> <div id="leftborder"> <div id="rightborder"> <div id="header"> dirka </div> <!-- header --> <div id="photo"> <p>image</p> </div> <!-- photo --> <div id="footer"> previous / next </div> <!-- footer --> </div> <!-- rightborder --> </div> <!-- leftborder --> </div> <!-- container --> </body> </html> what's going on here? by the way i'm only using borders to help me debug this thing. i'm not good at stylesheeting so i need help like a noob. thanks. [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
sKunKbad Posted November 29, 2007 Share Posted November 29, 2007 What you really want to do is have the gradient that is on the sides be the background of the body. Then you want to center the header/main content area/footer in a big div called "wrapper". Each of these divs would have width:100%; , then you just float them into position. Very simple. You will of course have to add content before they will have any height. <body style="background: url(img/gradient.gif) repeat-x; text-align:center;"> <div id="wrapper" style="width:760px; margin:0px auto;"> <div id="header" style="width:100%; float:left;"></div> <div id="content" style="width:100%; float:left;></div> <div id="footer" style="width:100%; float:left;></div> </div> </body> If you want a "sticky" footer, you best learn how to float divs before trying to accomplish that. 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.