Welcome to WebmasterWorld Guest from 54.147.220.66

Forum Moderators: incrediBILL

Message Too Old, No Replies

how do you create floating layers in a webpage

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

5+ Year Member



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

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

WebmasterWorld Senior Member 10+ Year Member



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.
11:00 am on Aug 17, 2005 (gmt 0)

5+ Year Member



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

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

5+ Year Member



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.

<style>
#layer1 {position:absolute; top:50px; left: 150px}
</style>
<div id=layer1><b>YO!YO!YO!YO!YO!YO!YO!</b></div>

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

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

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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>

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

5+ Year Member



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>

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

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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]
5:00 am on Aug 20, 2005 (gmt 0)

5+ Year Member



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.
5:01 am on Aug 20, 2005 (gmt 0)

5+ Year Member



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.
6:14 am on Aug 20, 2005 (gmt 0)

10+ Year Member



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