mrbert Posted January 2, 2007 Share Posted January 2, 2007 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 More sharing options...
Reg Edit Posted January 3, 2007 Share Posted January 3, 2007 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)! Link to comment Share on other sites More sharing options...
ste Posted January 3, 2007 Share Posted January 3, 2007 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 More sharing options...
mrbert Posted January 4, 2007 Author Share Posted January 4, 2007 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 More sharing options...
mrbert Posted January 4, 2007 Author Share Posted January 4, 2007 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now