HTML - Layers

I own a website at, www.Catwiskers.co.nr
If you look, there are two characters on both sides of the main page.
In order to position them there, I used a div position:absolute; script.
Also if you notice, there is movement behind them.
That's a flash movie I made, but then the movie disappears.
But I also used div position:absolute; to place that there as well.
How do I get the flash movie to be ONTOP of everything else on the page?
Is there some sort of alpha:true or something?

http://www.zouklambada.com/eventsNew.asp

This is the page I'm working on. Basically i need it to work in the following way.

When you click on all the images at the moment, it is working fine (sort of)- each time you click, a layer comes up over the three small ones - BUT i need the small images to stay in position and these big images to go ontop (ie. you dont see the small images in that same row - they should not jump to the bottom. There will be more rows. When a big image is displayed in first row, the second row must slip underneath.

Hope this makes sense!
Please help!

Hi,

if you take a look at the following page:

http://www.vub.ac.be/ARCH/reis.php

you will see that - in IE - the footer overlaps with the content layer.
in FF everything is ok

any ideas?

thanks

I have this Web page I'm working on and I'm not sure on how to get the overlayed images to line up 'automatically'. Here is the code I have:
<div id="main-copy">
<h3>NorthEast Regional Radar</h3>

<div id="topo" style="Z-INDEX: 1; LEFT: 0px; POSITION: relative; TOP: 0px" >

<img src="http://www.srh.noaa.gov/ridge/Overlays/Topo/Short/box_Topo_Short.jpg" border="2" alt="Topo Base" ></img>
</div>
<div id="radar" style="Z-INDEX: 2; LEFT: 0px; POSITION: relative; TOP: -555px">
<img src="http://www.srh.noaa.gov/ridge/RadarImg/N0R/box_N0R_0.gif" border="2" alt="Radar Image"></img>
</div>
<div id="county" style="Z-INDEX: 3; LEFT: 0px; POSITION: relative; TOP:-1113px">
<img src="http://www.srh.noaa.gov/ridge/Overlays/County/Short/box_County_Short.gif" border="2" alt="State Borders" ></img>
</div>
<div id="legend" style="Z-INDEX: 4; LEFT: 0px; POSITION: relative; TOP: -1668px">

<img src="http://www.srh.noaa.gov/ridge/Legend/N0R/OKX_N0R_Legend_0.gif" border="2" alt="Legend Overlay"></img>
</div>
</div>

You can see I've attempted to get these to line up by specifying a "-" TOP offset. Doesn't work in all cases. How do I fix this the proper way ?? Thanks.

Hello all together,

I'm trying to build this layout:


The grafics are ready. I have the 4 corners as well as 1px slices for the left, top, bottom, right sides.

I don't / can't use tables as I have done in the past.
I have read dozens of tutorials and know about properties like "floating", display as table by using "display: ...." but didn't make it!

Apart from that do I have to look at what HTML definition I have in my files? HTML4.0 etc.?

Thanks alot for any tips!

Dear HTMLForums.com!

I'm currently new to designing pages from scratch, and i have some questions about how to "frame" your website in Dreamweaver.
So, i found out that AP-divs would let you draw layers / boxes, but at the same time, it doesent center the content of the AP-divs on every computer.

It kind of has a fixed position, wich of course, if viewed on a different monitor, then would not center. (if the layer is placed at W:300px and H:400 px, then it would not be centered on every viewers screen)

Is there any way i could get the same posibillities, where the content would be centered in any browser, on any resolution etc.?
If there is any function in Dreamweaver that would let me design boxes etc. to get somewhat of a structure on the page, while also making the boxes centered, etc.

Sorry for describing my problem so badly, i really don't know how to explain properly.

Cheers.

I've spent the past three days trying different codes in order to get this layout to align - literally it's been the most frustrating thing I've ever had to do.

www.aftermath.russian-silver.net/index2.html

Basically I'm trying to get the "left" div to cover the left side of the background image (so that when people click on the blue rose, paw print, or heart, a new navigational image appears on that side. I can get it to line up in just IE or just Firefox - but not both. Usually there is a pixel or two difference from the top and things are off (or I can't get the image map to work because other div layers are covering it).

My brain is fried and I'm at a loss as to what to do - and I feel like I'm sitting on a jumble of coding. If anyone knows what to do, please share!

I've moved away from the difficult Liquid background and have came up with a more simpler solution...yet i still need help here, amazing isnt it?

So heres what im trying to do; notice the word "trying". I have a plain background colour ( a dark green ), I then added a layer containing a image of parchment to set the background for text, which i then centered on the page so this fixes the problem of people with different screen resolutions. I now want to add text, so i made another layer, typed the text for the welcome page, and clicked centre....uh ohhh, guess what? It didnt work! I then tried copying codes from the first table i centered, but it simply refuses to hate me and doesnt work. If you cant visulise what im trying to get i drew a pretty picutre for you; Link shown below.

http://s195.photobucket.com/albums/z...nt=Website.jpg

So heres the big question. How do i set the writing to be centered on the page ( not centered text, the text is left alligned but i need it to apear in the centre of the page), and a certain amount of pixles from the top so as it will always fit on the background parchment layer wihtout moving about all over the place?

Many Thanks, Nathan

Here's what I currently have on my screen:
http://img291.imageshack.us/my.php?i...4169031eq4.jpg

What I'm trying to do is Save the Layers as JPEGs so I can place them into Dreamweaver and continue Editing my Webpage. I wasn't able to Edit some of the Images in Dreamweaver so I had to Edit the actual PSD File, but now that I've edited the PSD File, I can't seem to transfer the updated Graphics back to individual JPEG Form, I can only save the entire document as a giant JPEG, and that's not what I want.

Slicing isn't viable either, the PSD didn't come with any... I would think it has something to do with those blue lines running across the page, but I don't know what that means? How do I save the Graphics I updated so I can transfer them into Dreamweaver?

Hi people, I have a website which allows you to switch content without a page refresh. This is done with javascript.

However, the downside is, it takes much longer to load the website at the start as it has to load the whole site's content. I would like to know how I can call out content from external html files to my main div layer when a tab is clicked? This means that only the div layer refreshes when a tab is clicked.

this issue has been solved

Hi, Since we know we can use Div tag to right align and left align but everytime we use it, it gets printed on the next line. Suppose we have 2 paragraphs and we want to right align one and the other left align on the same line, how do we achieve it.

can you show and hide layers with text? I know that you can use the behavior function on images to use it, but i just can't figure out how i can do it with text

For example: have a layer in a HTML (hidden), when i put my mouse over a text "testing", it shows that layer, and vice-versa on mouse out.

Okay, so as you can see from this page:

http://ggmdolly.com/headersample.php

The only problem with the page is that the text is overflowing out of the supposed layout area. The reason for this is that if I add padding to the div, the layer's BACKGROUND IMAGE (which is the grey area plus the shading over the main background) also moves, and looks really messed up.

So I need to know how I can add padding to the text - what way is there? I tried making a new div layer within the div layer that contains the background - but the div doesn't 'stretch' for the text so the background doesn't repeat itself, if you get what I mean.

Any solutions?

My code looks like this:

<div id=layer2 style="position:absolute; top:348px; left:276px; width:785px; z-index:2; padding-left:0px; padding-right:0px; padding-top:0px; background-image:url(http://ggmdolly.com/divbackground.png);">

<body>

(Body text)

</body>
</div>

Hi,

I created a new website that works great in Internet Explorer. When I tried it in Firefox I had a few problems: my layer widths appeared differently and I was unable to click on any links on the page.

I was able to fix the widths of the layers by using conditional comments, however I am unable to fix the problem with the hyperlinks.

I think the problem is caused by the DHTML vertical dropdown menu covering up the other layers--because when I hide the menu layer and test it in firefox I am able to click on the hyperlinks and use my overflow scrollbars, etc.

If I move the menu behind the other layers, the menu becomes hidden.

Is there a solution to this problem that will allow me to keep the DHTML menu without covering up the other layers on the page?

All help is appreciated.

Thanks,

James