Jump to content

DIV formating/positionning/scrolling problem


mrbert
 Share

Recommended Posts

Hi I am trieing to get this working for days now without anu luck:SI want to make a page with:A Header window header ( 50pix heigh) finally containing some small other div.s for a 2nd menuA footer at the bottom, window wide (90 pix) containing mail info and home buttonA menu at the left between header and footer (130 pix wide)A main part for the rest of the screen with variable size content, most text.an example is at: http://www.mrbertdesign.nl/verhalen/main2.php(If you look at it with a large window it shows properly)Now i got it working I guess with FF, when I reduce the size of the window and the tekst block does not fit I get a scrollbar at the right of the main window as I want. The footer does noet overlap with the main window.However:In IE the footer overlaps with the main window when making the browser window smaller.also I cannot really use all space for the main window.I have to use a percentage for the width of the main window. If I use auto I get X and Y scrollbars.I would like to get something like window widht - leftmenu widthstylesheet DIVs:

#wrapper {position: absolute;top :1px;left :1px;width:99%;height:99%;border:1px solid red;visibility: visible;}/*-- Bepaal de plaats en grootte de header */#header {position: absolute;top: 5px;height: 50px;width:99%;border: 1px solid green;}#main {position: absolute;top: 100px;left:130px;bottom:100px;width:82%;margin-bottom:auto;overflow:auto;border: 1px solid white;}/*-- Bepaal de plaats en grootte de footer */#footer {position: absolute;bottom: 15px;height:90px;/*toegevoegd*/width:90%;border: 1px solid green;clear: both;}#navigatie_L{position: absolute;top: 150px;left: 5px;width: 120px;/*randje om het menu*/border: 1px solid blue;}[end code]The HTML is:[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>MrBerttestpage</title><META NAME=""<META NAME="KeyWords" CONTENT="boek schrijfster,debutant,debuut, roman, aspekt,raven,dice,genot,prooi,spanning,uitdagend,vrouw,passie"><link rel="stylesheet" type="text/css" href="/style/navigatie.css" /><link rel="stylesheet" type="text/css" href="/style/divsizes2.css" /><link rel="stylesheet" type="text/css" href="/style/stijlen.css" /></head><body><div id="wrapper"><div id="header"><h2>Waargebeurde Verhalen</h2></div><div id="navigatie_L"><?phpinclude("smenu.htm");?></div><div id="main"><?phpinclude("tekstblok.php");?></div><div id="footer"><?phpinclude("footer.htm");?></div></div></body></html>[endcode]This really is driving me crazy  I hope someone can show me the light.Bert
Link to comment
Share on other sites

I want to make a page with:A Header window header ( 50pix heigh) finally containing some small other div.s for a 2nd menuA footer at the bottom, window wide (90 pix) containing mail info and home buttonA menu at the left between header and footer (130 pix wide)A main part for the rest of the screen with variable size content, most text.
you really dont need to use absolute positioning to acheive this layout. i think your making this way harder than it needs be.
Link to comment
Share on other sites

you really dont need to use absolute positioning to acheive this layout. i think your making this way harder than it needs be.
Hi STE,Hou can I do it without absolute and keep the div's from covering each other and keep them all on the screen?I know how I can make the footer right below the main, mut it will scroll off the screen then:S
Link to comment
Share on other sites

It's to do with using "top:" & "bottom:" together in the same style. IE6 does not behave how you want when you do this (but IE7 is OK). This may help: http://archivist.incutio.com/viewlist/css-discuss/47122It describes the same problem, and has a link to some javascript to work around it (which I did not try out)!
Hi Reg,Just had a look at that page.It looks like the only solid way to make what I want will be usung frames:SThe methode described on the pages is not compatible with quite some browsers?I guess I have to drop the footer at a fixed position and a scrolling mainpart. Just to preserve compatibility.Frames is something I do not want to deviate to. For al knwown reasons like bookmarking
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...