Placing a Layer

[kpw81]

hello,

i have a layer on a webpage which i use for the main content of the page, for this layer, i have set properties for top, left, width, background colour and font colour. the height of the layer is variable and is determined by the amount of content (text only, no pictures) within it. i want to place another layer underneath this layer, which will act as a footer for the page. so my question is, is there a way of setting the top property of this second layer so that it takes into account the height of the first layer, and positions itself underneath it, for example, to say that the second layer has a top attribute of "layer1's height + 200pixels"? or any other way to ensure that the second layer appears at the bottom of the page.

any help would be much apreciated
karl

[twodayslate]

z-index changes the layer (which is on top of each other etc;)
Might need Js for this but I am not 100% sure on what you are asking.

[kpw81]

ok, to explain it another way, i want to place a layer at the bottom of the webpage (not behind other layers, but below them on the page), but i have another layer on the page which is of variable length, so i can't set a value for my new layer to put it at the bottom of the page because i don't know the height of the first layer, so i need to find out whether i can either,

a) set a value for the top property of the layer i want at the bottom of the page which isn't an exact value, but a calculation which takes into account the height of the layer which has a variable height, or
b) is there another way to ensure that the layer appears at the bottom of the page below all other content including the layer of variable height.

does this make it any clearer (i'm finding it hard to explain, but hopefully this will help a little)

[httpdev]

Have you tried using the clear: both; property on the footer?

[kpw81]

Have you tried using the clear: both; property on the footer?

what does this property do?

[VIPStephan]

Why do I get a headache when I read such stupid advice like using clear: both; in this case? :rolleyes:

I suppose when you say “layer” you are talking about absolutely positioned elements? Rule #1: Absolute positioning is almost never needed for most regular layouts in website development. And I’m sure you don’t need it as well. Post your code or provide a link to the page in question and we can tell you how to do it right.

[kpw81]

ok, for the code, there is very little in the html, as i want to control it from an external css file, so all i have at present in the html code is the names of the layers.

the code from the css file is as follows

body{ background-color: rgb(102, 204, 255);}


divheader{ background-color:pink;
position:absolute;
top:15;
left:15;
width:975;
height:150;}


divrec{ background-color: red;
color: white;
font-weight: bold;
position: absolute;
top: 210;
left: 805;
width: 175;
height: 300;}


divcontent{ background-color:white;
color:black;
position:absolute;
top:200;
left:15;
width:975;}


divfooter{ background-color:orange;
color:black;
width:400;
height:100;
left:50;}

just a couple of things to explain,
1) the colours are not the colours i will use for the website, but are chosen cos i have bad sight, so need bold standout colours to help me whilst setting up the layout.
2) the layers listed in the css file are as follows:
divheader = where the logo/title image for the site will go
divrec = a place for links to certain parts of the site (there will be a seperate menu structure added later)
divcontent = where the main content of the page will be added (the width will be changed later when i can test it out with some sample content, but the height is dependant on how much content goes into it)
divfooter (this is the layer i want to appear at the bottom of the page underneath divcontent, but i cannot specify a specific top property for it as the divcontent height is unknown to me and will change from page to page)

is there any more info you need, if so, please let me know and i'll post it for you. i can't post a link to the page at the moment, as i don't have anywhere to host it.

thanks for your help

[VIPStephan]

Well, yeah, actually your HTML would help as well because sometimes there are things that poeple don’t think about, and thus forget to explain (like the kind of doctype used etc.).

Anyway, your explanation is sufficient for now as it’s very obvious that you have the wrong approach yet. At first: You don’t have to excuse for the use of colors or whatever because we all know that your site is in development. Also coloring elements or giving them an border/outline while working on them helps to see how they behave. I’m doing this all the time.

Now, can you actually explain me why you are using absolute positioning? What is your intention behind that? And can you claim that you really know what absolute positioning does?

How about just leaving the positioning out?

Also I’d suggest to always validate your HTML (http://validator.w3.org/) and CSS (http://jigsaw.w3.org/css-validator/) because at least in the CSS you posted here are a lot of errors, and I suspect your HTML doesn’t make a big difference.

[kpw81]

thanks for the response.

when you ask about absolute positioning, do you mean the specific property of position:absolute, if so, then i use that because i am lead to believe that it is required if you are using the top and left properties to position the content on the page, if this is incorrect then there is no specific reason for me to use it. if however, you are asking why i am using top and left values on layers and placing content within them rather than directly onto the page, this is because some of the content will come from a database, and i want to ensure i have as much control over where this data is displayed, and to make sure it does not interfere with the layout of the site.

As for the errors in the css code, can you be more specific please, if it is in reference to those face things above, that is something i've only just noticed, and is something that has happened as a result of copying/pasting the code from the css file onto the forum, but as far as i can tell, the css is working fine.

as for my html code, it is as follows

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>test</title>
<link rel="stylesheet" type="text/css"
href="stylesheet.css">
</head>
<body>
<divheader>
</divheader><divcontent></divcontent><divrec>
</divrec><divfooter></divfooter>
</body>
</html>

if positioning the content the way i have is incorrect, can you please suggest what alternatives you would recommend.

thank you
karl

[VIPStephan]

when you ask about absolute positioning, do you mean the specific property of position:absolute, if so, then i use that because i am lead to believe that it is required if you are using the top and left properties to position the content on the page

That is correct. Well, actually top and left can be used with either absolute, relative, or fixed but not with out it, yes. However, I was asking you why you are using absolute positioning, and I mean the entire concept/approach, not just to hear that top and left can’t be used without. Why positioning at all?

But I see already that you don’t really know everything about absolute positioning. I can’t find a really good source right now, as everywhere it’s not explained properly and leading to the problems you currently have.
However, please forget the position property and all its associated offset properties for now because that’s more an intermediate/advanced thing, can cause more problem than it helps, and you really don’t need ot for a simple layout like you’re trying to achieve.

As for the errors in the css code, can you be more specific please, if it is in reference to those face things above, that is something i've only just noticed, and is something that has happened as a result of copying/pasting the code from the css file onto the forum, but as far as i can tell, the css is working fine.

Seems like there are different things coming together here. As I said use the validators to check whether or not your code is alright (click the two links in my previous post). That it seems to be working in one browser doesn’t mean it’s good code, and you are likely to encounter problems in other browsers.

For one, you are lacking the units for the numeric values (e.g. px or em). There are more things, though, that don’t come from copy/paste insufficiencies. And I can tell you without validator that your HTML is wrong. The tags you are using don’t even exist. I suppose you want <div id="header>…</div>? Again, that it works in one browser (namely Firefox) doesn’t mean it’s working in all the other browsers.

Another important fact is, as I said, the doctype (http://alistapart.com/stories/doctype/). Currently your page is in quirks mode (as opposed to standards mode) because you are using an incomplete doctype (without URL). I suggest you always use this one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
…and have nothing before that doctype.

Then, again, you really don’t need positioning at all. We know the code now. Now you just need to tell us how the page layout is supposed to look like then it’s more clear how the HTML should be styled. In any case direct positioning (i.e. position: absolute; or position: relative;) most likely aren’t needed at all.

Maybe Bon Rouge’s site wil give you some inspiration. At least it’s a great source to learn how to lay out a site (and that direct positioning isn’t needed in 99% of all cases).

One of the most important things for you to know is: Web development is all about semantic (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html) code (http://brainstormsandraves.com/articles/semantics/structure/) (note: these are two links).

And in future please use the smal '#' button to post code.

[kpw81]

i've had a look at those links you posted, and found them useful, especially bonrouge.com, i've also found out how to get the layout i want, so a big thank you for your help.