iframes layout for all resolutions? [Archive] - Lissa Explains it All: Web Design Forums

jessi15

07-05-2004, 05:07 PM

It's the first time I've made my own layout for my site. It's not the best, but whatever. I've just seen it for the first time in 800x600 resolution and it's awful!
the iframes move around and the layout moves stays put. How can I make the iframes stay in place? HELP! By the way, the site's here: http://www.lostdreamer.tk and I made it in 1024x768 resolution. I'm sure there's a way to do it.

Thanks,
Jessi

MaGiCSuN

07-05-2004, 07:43 PM

it's because your layout is set as background, while your actual content is scrolling :)

To fix that try this:

<html>
<head>
<title>Lost Dreamer ~ Lost In the Clouds</title>
</head>
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
<img src="layout.gif" border="0" style="position: absolute; top: 0px; left: 0px; z-index: 1;">

<IFRAME name="main" src="main.html" marginwidth=0 marginheight=0 frameborder=0 scrolling=auto style="position: absolute; left: 315px; top: 280px; width: 675px; height: 320px; z-index: 2;"></IFRAME>

<IFRAME name="updates" src="updates.html" marginwidth=0 marginheight=0 frameborder=0 scrolling=auto style="position: absolute; left: 648px; top: 98px; width: 320px; height: 150px; z-index: 2;"></IFRAME>

<IFRAME name="navigation" src="navigation.html" marginwidth=0 marginheight=0 frameborder=0 scrolling=auto style="position: absolute; left: 10px; top: 290px; width: 290px; height: 310px; z-index: 2;"></IFRAME>

</body></html>

I added the layout as a normal image, wich position set to 0 at left and top. Then i used z-index to layer the content. the image is z-index: 1; the iframes are z-index: 2;. This means that the higher the number, the more it will be on top. So in this case, the image is below the iframes, like it should :)

and i really like your layout !

Love,
Mirna