PDA

View Full Version : Placing a Layer



kpw81
Aug 26th, 2007, 11:51 PM
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
Aug 27th, 2007, 02:54 AM
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
Aug 27th, 2007, 03:12 AM
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
Aug 27th, 2007, 03:21 AM
Have you tried using the clear: both; property on the footer?

kpw81
Aug 27th, 2007, 02:47 PM
Have you tried using the clear: both; property on the footer?

what does this property do?

VIPStephan
Aug 27th, 2007, 03:46 PM
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
Aug 27th, 2007, 04:41 PM
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
Aug 27th, 2007, 07:01 PM
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
Aug 27th, 2007, 07:42 PM
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
Aug 27th, 2007, 08:19 PM
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
Aug 28th, 2007, 01:52 AM
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.