iFrame, position:absolute & percentuele grootte - Softwareontwikkeling

zaterdag 20 mei 2006 13:18

Acties:

Langharig tuig

Topicstarter

Ik heb een opzetje gemaakt voor een website, met een menu en een kop die met position:absolute op hun plaats gehouden worden.
Nu wil ik in dat zelfde venster ook een iFrame hebben, dat onder de kop, en naast het menu verschijnt.

Dit heb ik geprobeerd met:

code:

1	position:absolute; top:80px; left:120px; right:0px; bottom:0px;

Dit werkt uitstekend in Firefox, maar in IE krijg ik een heel klein iFrame venstertje.
Als ik dan dit toevoeg:

code:

1	width="100%" height="100%"

Dan wordt 'ie weer te groot, zowel in Firefox als in IE. Hij krijgt dan volgens mij het formaat 100% van body. Dit is wat mij betreft geen optie, want ik heb een hekel aan een dubbele scrollbar.

Ook heb ik geprobeerd om hem in een DIV of TABLE te plaatsen, zodat 'ie wellicht 100% van de DIV/TABLE gebruikt, maar helaas.

Nu heb ik het wel op weten te lossen, dmv een stukje javascript.

code:

<head>
  <script language="javascript" type="text/javascript">
    Hoogte=document.documentElement.clientHeight - 80
    Breedte=document.documentElement.clientWidth - 120 -16
  </script>
</head>

<body>
  <script language="javascript" type="text/javascript">
    document.writeln('<IFRAME src="nieuws.html" width="'+Breedte+'px" height="'+Hoogte+'px" scrolling="auto" frameborder="0" name="mainFrame" style="position:absolute; top:80px; left:120px; right:0px; bottom:0px;">Helaas, je browser ondersteund geen iFrames...<\/IFRAME>');
  </script>
</body>

En dit werkt zowel in IE als in Firefox uitstekend!
Nadeel is echter wel, dat zodra je het venster vergroot/verkleint, het iFrame niet meewijzigd, maar hier kan ik op zich mee leven.
Groter nadeel, is dat het niet blijkt te werken onder Firefox 1.08/Linux, dus ik ben bang dat er meer browsers zijn waarmee her niet werkt.
(Ik heb dit getest op mijn eigen laptop met Ubuntu, en een pc met Mandriva 2005. Na installatie van FF 1.5.3 op de Mandriva pc ziet de site er wel goed uit).

(Voorbeeld van de pagina is hier te vinden.)

Nu is mijn vraag, is er misschien toch nog een andere manier om dit voor elkaar te krijgen, gewoon met html/css, dus liefst zonder javascript oid, die wel overal zou moeten werken?

Ik heb gezocht, maar kon alleen onbeantwoorde vragen vinden...

zaterdag 20 mei 2006 14:01

Acties:

bRight

digitaal

Als je er een javascript functie van maakt kan die ook worden aangeroepen als je het venster groter/kleiner maakt:

code:

<head>
    <script language="javascript" type="text/javascript">
    function set_mainFrame_size() {
        document.getElementById('mainFrame').style.height = document.body.clientHeight - 80;
        document.getElementById('mainFrame').style.width = document.body.clientWidth - 136;
    }
    </script>
</head>

<body onload="set_mainFrame_size()" onresize="set_mainFrame_size()">
    <iframe id="mainFrame" name="mainFrame" src="nieuws.html" scrolling="auto" frameborder="0" style="position:absolute; top:80px; left:120px; right:0px; bottom:0px;">Helaas, je browser ondersteund geen iFrames...</iframe>
</body>

zaterdag 20 mei 2006 14:10

Acties:

highking

Langharig tuig

Topicstarter

Ok, maar het gaat mij er even voornamelijk om dat 'ie het ook in alternatieve/oudere browsers goed doet. Gezien ik niet de enigste zal zijn die FF 1.08 nog heeft draaien.
En ik ga er niet vanuit dat iemand anders zijn browser gaat updaten zodat mijn website goed zichtbaar wordt

/edit:
Ik heb jouw code er even in geknipt en geplakt (toch ff proberen

)
Maar helaas lijken zowel FF als IE zich niets van de door jouw code opgegeven hoogte/breedte aan te trekken.

[ Voor 26% gewijzigd door highking op 20-05-2006 14:32 ]