HTML - Div Positioning : Layers

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!

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

Hi,
I have a cell within a table and into that I would like to place 4 x layers, all on top of each other. Adjacent to this I have 4 rows in a table, each with an image - the aim is to use OnMouseOver to hide / unhide the layers depending on which of the 4 smaller images are hovered over...

The problem I have is that my website uses tables (width 950px) that are centred on the screen - and with resizing the screen in different browsers, the layers go out of alignment.

Is there an easy way to ensure the layers always stay within the table cell?

I'm using Dreamweaver MX2004.

Thank you in advance for your very kind help.

Matt

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.

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!

this issue has been solved

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.

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

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.

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.

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>

Is there anyway to make a container DIV LAYER that contains multiple other layers to extend just as far as its contained layers vertically? By this I mean, can you set the height of a div layer to extend to the bottom of the page instead of stopping exactly at where that layer's content stops? I know I could always set the height to a fixed high number, but I don't want all that extra scroll space at the bottom.

I've made an example page to better explain what I mean:

http://www.willamette.edu/~nsawir/tester222.html


See how the white background with black side borders (this is my container div layer) only goes as far as the black text? This black text is the content of that one div layer. The white background and black borders do not extend down to where the red text reading "THIRD LAYER OF ITEMS" (this would be my third div layer) is.

I would like the white background/black border of my container layer to extend to the very bottom of the page, where ever it may be (and no further). Is there any way around this???

PLEASE HELP!!!!!!