How can i make a layer?

?

[Kivshany]

im a newb..sory, lol

well my simple qustion is; how can i make a layer?

i want to make a floating layer so it wont move..

the big thing is that i want my main menu to only change the pages in that layer.. and the main frame/background will allways stays..

hope i get that right, but here's an example of a site like that:

<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>

if u click on the menu up top..u'll see that the only thing changing is whats in the frame..im pretty sure it's a lyaer (if not so tell me)

PLEASE HELP ME..IM LOSING HOPE :(

[edited by: DrDoc at 6:20 pm (utc) on Oct. 5, 2004]

[DrDoc]

Welcome to WebmasterWorld! [WebmasterWorld.com]

The easiest way of doing that is by using an iframe.

[Kivshany]

i did an iframe, but it has to be in another layer or it will messed up my site

[DrDoc]

Can you expand a little bit on what you mean by "another layer"?
In your initial post you mention about a "floating layer" that "won't move"... That's exactly how iframes work.

[Kivshany]

well yeah..but if i want to place an image next to the iframe, i wont succeed..if i want the image to go down i put some "br"s but then the iframe will come down also..

[DrDoc]

You can always float or position either the image or the iframe, or a container of either of the two.

[Kivshany]

great..how do i do that?

[DrDoc]

img {
float: left;
margin-top: 100px;
}

...for example.

[Kivshany]

where do i put the image link?

[createErrorMsg]

Go check out this site [css.maxdesign.com.au]. It'll teach you the basics of using floats.

[Kivshany]

10x, i'll check it

[Kivshany]

i still don't get it..it's complicate

i need to see an example

let's say i want to float this image-
<snip>

what code do i need?

[edited by: engine at 11:53 am (utc) on Oct. 6, 2004]
[edit reason] No urls, thanks. See TOS [webmasterworld.com] [/edit]

[createErrorMsg]

It sounds like you want a text area with an image next to it. I don't know anything about Iframes, so I'll use just a generic 'text' div in this example. You should be able to plug in any sort of element you want to replace it, including an iframe (someone correct me if I'm wrong).

SO you have a text div and an image and you want them side by side. First, order the source code so that the floated element is first...

<img class="floatedimage" src="image.gif" />
<div id="textdiv">Content text.</div>

Next, in your stylesheet, style the image to float. Here I'll move it to the right of the text div, but it could just as easily go left...

.floatedimage {
float: right;
width: WHATEVER;
}

That's it. The image will be placed in the flow, the lifted out and moved to the right until it hits the edge of the containing block. Then the text <div> will be placed and filled. Any text that is longer than the image will wrap underneath it. If you don't want this, style the text div like so...

#textdiv {
margin-right: WHATEVER; /*equal to width of the floated image*/
}

This will line up the text and image into two neat columns.

Bear in mind this is a SIMPLE example. I can't possibly code around all the problems you might run into without knowing exactly what's going on on your page (for instance, you'll need to clear the float in whatever element comes after these elements in your code, and other strange things can happen depending on whether or not these elements are inside of a container box or not). Play around with it and keep reading float tutorials. Search for answers to specific questions on WebmasterWorld. Floats can be tricky at first, but once you understand how they work the mystery goes away.

Some basic float info is also covered in this thread [webmasterworld.com].

[Kivshany]

10x man! thanks alot!