how do you create floating layers in a webpage

Forum Moderators: open

Message Too Old, No Replies

how do you create floating layers in a webpage

massacre90

7:39 pm on Aug 16, 2005 (gmt 0)

I am in the middle of creating a Html site, in order to get it to look similer to my flash site i need to use layers but i i am not too sure how to create them and i have not used HTML in a while it would be apreciated if any one could help help me as a need both sites to be up before i can launch my server...

Thanks

drhowarddrfine

8:27 pm on Aug 16, 2005 (gmt 0)

Not sure what you mean by layers. You can partition your page into sections with each section contained within a <div> tag. Or, using CSS code, there is a 'z' index which would position one page behind another but I have not played with this in so long I don't recall anything about it.

massacre90

11:00 am on Aug 17, 2005 (gmt 0)

In flash you are able to place images,text ect in any place you want, layers allow you to have a little freedom in the placing of objects aparently, i was simply trying to set out my page looking like a frame set with out the use of them as it buggers up in some browsers.

and i was aiming to have it all set up my birthday tomorrow but it does not look like it is goin to happen.

Thax any way

bibby

5:54 am on Aug 18, 2005 (gmt 0)

the only mention of layers I know is with CSS.
Normal rules state tag names,
classes begin with a ".",
and layers with a "#".

Add this to your page, then play with it.

You can set anything as a layer.
Read about CSS, and read the CSS forum on this site if this is what you need.

tedster

8:35 am on Aug 18, 2005 (gmt 0)

Sorry, bibby, your css is fine, but you've misundertood something here. # indicates an ID - to which you can give any name you want, including "layer". The difference between a CLASS and an ID is that an ID can only be used once in an html document, but a class can be applied many times.

<layer> was an html element that only appeared in Netscape 4 and it never became part of the standard. However, Dreamweaver uses the word "layer" (and confuses many people) to describe a div that is positioned on a z-axis and out of the normal flow of the document because it's positioned absolutely by coordinates. Often this is part of a dHTML system where javascript further changes either the div's position or it's visibility.

So, massacre90, it sounds like you may be looking for a <div> with absolute postition - something like this in the css:

#onmyown {
position:absolute;
top:100px;
left:150px;
z-index:10;
}

and then in the html:

<div id="onmyown">content content content</div>

massacre90

8:53 am on Aug 18, 2005 (gmt 0)

thanx i was using a div before, buti was unsure of where to make the changes, also where would this part of the code go

#onmyown {
position:absolute;
top:100px;
left:150px;
z-index:10;
}

in the <head> tag or Under the <body>

tedster

7:25 pm on Aug 18, 2005 (gmt 0)

Either in a <style> element in the thead, or in an external .css file that is linked from the head. For more detail, see the first section of our CSS Crash Course [webmasterworld.com]

Conscientious Reject

5:00 am on Aug 20, 2005 (gmt 0)

Yeah, I am afraid you should look for any shortcuts using layers either. There a pain to position just right. You should also consider the size of the users browser window. Keep in mind that html is often wrapped or condensed. Just because your coordinates are right doesn't mean it will keep its design after the window is resized. Still, layers do work best with JavaScript. But it's no overnight job, unless the page is simple. Then you might as well keep the layers oyut of it.

Conscientious Reject

5:01 am on Aug 20, 2005 (gmt 0)

Yeah, I am afraid you SHOULDN'T look for any shortcuts using layers either. There a pain to position just right. You should also consider the size of the users browser window. Keep in mind that html is often wrapped or condensed. Just because your coordinates are right doesn't mean it will keep its design after the window is resized. Still, layers do work best with JavaScript. But it's no overnight job, unless the page is simple. Then you might as well keep the layers oyut of it.

pixelkat

6:14 am on Aug 20, 2005 (gmt 0)

in my experience, I have found that IE support for z-index layering is sometimes unpredictable. give your topmost layer a z-index of 100 instead of 10. in your stylesheet, declare your bottom layer first. all subsequent layers will be in front of its predecessor. in other words, if I were coding 3 layers, I would give the bottom layer a z-index of 10. I'd give the middle layer a z-index of 100, and the top layer a z-index of 300 or even 500. and lastly, I've had to code the top layer(s) using an inline style directly in the html between the <body> tags in order to get IE to play nice.
hope this helps.
cheers,
kat