chadf 0 Posted August 29, 2003 Share Posted August 29, 2003 (edited) OK, I've been beating my head up against the CSS wall (again!), and I've finally got my web site layout how I want it - with one exception. I can't figure out how to add a footer to the bottom of the page. My web site is a personal site, so I don't want to post it here. But I have created a simple page using the same layout and I have posted it below. Surely someone has been down this road before. (I just noticed something: you obviously don't have the file "sidebar3.jpg". It is just a background image that gives my navbar a different color. I'll attach it if it helps.) <html><head> <style type="text/css"> body { margin: 10px; background-color: white; } #box { position: absolute; top: 10px; left: 50%; margin-left: -400px; padding-bottom: 80px; width: 800px; background-image: url("sidebar3.gif"); background-color: silver; border: 2px solid black; } #title { position: absolute; top: 0px; left: 0px; width: 796px; height: 70px; background-color: purple; border-bottom: 2px solid black; } #navbar { position: absolute; top: 80px; left: 10px; height: auto; width: 170px; } #main { position: relative; top: 80px; left: 0px; width: 600px; margin-left: 150px; } </style> </head> <body> <div id="box"> <div id="title"> <center><H1>This is the Page Title</H1></center> </div> <div id="navbar"> Navbar<br> test<br> test<br> </div> <div id="main"> Main Section<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> </div> </div> </body> </html> Edited August 29, 2003 by chadf Quote Link to post Share on other sites
surefire 0 Posted August 29, 2003 Share Posted August 29, 2003 You've got some cross browser issues with your current CSS. In mozilla, your words in the main div are crossing over into the header. I think your problem would be solved by using some of the layouts you'll find here http://www.sitepoint.com/article/379/1 http://www.glish.com/css/ (good one) http://www.thenoodleincident.com/tutorials...sson/boxes.html http://developer.apple.com/internet/css/in...ocsslayout.html The layout you are looking to achieve is pretty straight forward. Quote Link to post Share on other sites
chadf 0 Posted August 29, 2003 Author Share Posted August 29, 2003 (edited) Jack, I have looked through your recommended links - some of which I had already been to - but they don't cover my particular design problem. What I am doing differently than all of these is I am centering my page in the browser window. My page width is fixed, but my page height is variable - since my main body content changes depending on which page I'm on. Any other suggestions? Also, as far as the problem with Opera, it is a simple fix and I believe it works fine in its original form. This is just a scaled-down version without all of my content. But my main concern is adding a footer at the bottom of the page. Thanks. (I corrected the code in my original post which should fix the overlap problem) Edited August 29, 2003 by chadf Quote Link to post Share on other sites
TCH-JimE 0 Posted August 29, 2003 Share Posted August 29, 2003 (edited) Hi, Let the me have a look! Right, I hate to say this but ditch the positioning, it gets very complicated with it in and when you have a whole page designed around it, you just need one thing to put it all out. Instead, try this why. It works so far in IE 6.0 and Morzilla firebird (if it works in firebird it should work in Morzilla bog standard and NS without a problem. I have colour coded it so you can see how it works and its flexible. ><html> <head> <title>My Page</title> <style> body { text-align:center; } #frame { width:800px; margin-right:auto; margin-left:auto; margin-top:10px; padding:0px; background-color: gold; text-align:left; } #contentleft { width:170px; padding:0px; float:left; } #contentcenter { width:630px; padding:0px; float:left; background-color: blue; } #bottom { height: 20px; width: 800px; text-align:center; background-color: green; } #top { width: 800px; text-align:center; background-color: purple; height: 93px; } </style> </head> <body> <div id="frame"> <div id="top">This is your title</div> <div id="contentleft"> The Nav Area Nav Item 1<br> Nav Item 2<br> Nav Item 3<br> Nav Item 4<br> Nav Item 5<br> Nav Item 6<br> Nav Item 7<br> </div> <div id="contentcenter"> This is where my main content goes :-) test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> </div> <br clear="all" /><!-- without this <br /> NS6, IE5PC Screw up so leave it in :) --> <div id="bottom"> Your bottom footer. Do with it as your please :-) </div> </div> </body> </html> Thumbs Up Edited August 29, 2003 by Jimuni Quote Link to post Share on other sites
chadf 0 Posted August 30, 2003 Author Share Posted August 30, 2003 Jimuni, At a first glance, this looks just like what I need! Thanks a lot! When I have time I'll plug it into my code and see if it works. I'll let you know. -Chad Quote Link to post Share on other sites
surefire 0 Posted August 30, 2003 Share Posted August 30, 2003 Way to go, Jimuni. That's infinitely better. Quote Link to post Share on other sites
chadf 0 Posted September 1, 2003 Author Share Posted September 1, 2003 Thanks for all the help. I ended up getting it work exactly how I wanted it, but I basically had to start over and re-think it. Jimuni - your method looked promising, but it started falling apart when I tried customizing it (like adding borders). But I did learn from your code and I was able to use it to help me come up with my final design. I won't get into all the details, but I'll post the code I ended up using in case anyone is interested. (remember you must have the background image for it display correctly - I'll attach it to this message) <html> <head> <style> body { background-color: lightblue; } #box1 { width: 800px; background-color: purple; border: 2px solid black; height: 100px; } #box2 { position: relative; text-align: left; width: 800px; height: auto; background-image: url("sidebar3.gif"); background-color: silver; border: 2px solid black; border-top: 0px; } #left { position: absolute; top: 0px; left: 5px; } #right { position: relative; top: 0px; left: 150px; } #box3 { width: 800px; } </style> </head> <body> <center><div id="box1"> <h1>Header goes here</h1> </div></center> <center><div id="box2"> <div id="left"> navbar<br> navbar<br> navbar<br> navbar </div> <div id="right"> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content<br> content </div> </div></center> <center><div id="box3"> This is where the footer goes </div></center> </body> </html> Quote Link to post Share on other sites
TCH-JimE 0 Posted September 1, 2003 Share Posted September 1, 2003 Chadf, It only falls apart if you go beyound the sizes. So say the main box is 800px wide and then you have two boxs inside that, one 200px and one at 600px, and then put a border in say 2px for each, you suddenly have 200+600+2+2+2+2 = 808px which is why it starts to fall apart. Jim Quote Link to post Share on other sites
chadf 0 Posted September 1, 2003 Author Share Posted September 1, 2003 It only falls apart if you go beyound the sizes. So say the main box is 800px wide and then you have two boxs inside that, one 200px and one at 600px, and then put a border in say 2px for each, you suddenly have 200+600+2+2+2+2 = 808px which is why it starts to fall apart. Well that explains it. I was getting so frustrated because everytime I would get something to work in IE, it would fall apart in Firebird - and vice versa. But all of my CSS struggles have paid off in the end because I learned a lot and I got it working exactly how I wanted it - with help from you and Jack of course. Thanks again! Quote Link to post Share on other sites
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.