PDA

Click to See Complete Forum and Search --> : layers problem

Nebu
11-24-2005, 09:41 PM
I'm using DIV layers for the first time, and it's not really working...

I'm trying to make it so that it goes down to the bottom of the screen (most of the time, the text doesn't, and it looks really ugly...)

Here is what the site looks like: http://www.secret-star.net/fencing/holycrapthisisugly.gif

here is what I want it to look like: (Obviously, I'll put the text in...)
http://www.secret-star.net/fencing/whateva.gif

my HTML looks like this:
<html>
<head>
<title>Stevenson Fencing</title>
<link rel="Stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
hello
<div id="footer">d</div>
<div id="columnl">
</div>
</div>
<div id="column">

hello
<p class="bot">d</p>
</div>
</div>

my CSS looks like this:
body {
background-image:url(back.gif);
text-align: center;
font: .8em "arial";}
#container {background: url(images/bg.gif) repeat-y; width: 514px; margin: auto; text-align: justify; margin-bottom: 0; Z-index:1;}
#header {height: 295px; background: url(image.gif) bottom no-repeat;z-index:2;}
#content {width: 365px; margin: 0px 0 0 0px; float: left; text-align: center; background: url(cback.gif) right repeat-y; : 0;z-index:2;}
#column {width: 134px; margin: 0px 0 0 0px; float: left; background-image:url(navback.gif); margin-bottom: 0; z-index:2;}
#columnr {width: 50px; height=90; position: absolute; bottom: 0; background: url(images/cback.gif) repeat-y; z-index:2;}

Anyone have any idea how I can fix it? (ignore the little "d" on the bottom)

Thanks!
genomarb
11-25-2005, 11:37 AM
u shuld add positioning to your divs if you want to use z-index properly

I would have one main div to act as a container with absolute positioning, then all other div's inside will react to the main container and you can position the divs wherever you want down to the pixel
genomarb
11-25-2005, 11:39 AM
oh and height=90 is bad syntax -- should be -- height:90px;

if you get web developer tool for mozilla you can validate your stylesheets --- it'll save u tonnes of time
drhowarddrfine
11-25-2005, 01:19 PM
Since you are using floats and absolute positioning you have to remember that the div collapses as if it wasn't there. This is why some of your things are moving up on the page. Didn't have time to look at your code.

There is no such thing as "layers" in html or css. Call them divs because that is what they are and divs aren't always layered on a page.