Jump to content

Need Css Help


Recommended Posts

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>

post-25-1062180253_thumb.jpg

Edited by chadf
Link to post
Share on other sites

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.

Link to post
Share on other sites

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 by chadf
Link to post
Share on other sites

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 by Jimuni
Link to post
Share on other sites

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>

post-25-1062375728_thumb.jpg

Link to post
Share on other sites

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

Link to post
Share on other sites
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!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...