iFrame scalen op 100% - Softwareontwikkeling

donderdag 2 februari 2006 23:04

Acties:

Topicstarter

Ik heb de volgende situatie

Afbeeldingslocatie: http://tinypic.com/n2nak9.jpg

Nou is het de bedoeling dat die Iframe meeschaalt met de grootte van het venster, alleen moet er links en boven het iframe ruimte blijven voor twee divjes, hoe doe ik dit?

Ik had zelf ongeveer dit

code:

1	<iframe style="position: absolute; width: 100%; height: 100%; top: 100px; left: 200px"></iframe>

maar dat werkt niet

is het mogelijk dit te maken zonder het gebruik van javascript?

[ Voor 10% gewijzigd door plakbandrol op 02-02-2006 23:18 ]

donderdag 2 februari 2006 23:26

Acties:

Arjan

copyright is wrong

code:

<div boven></div>
<div onder>
  <div links></div>
  <iframe></iframe>
</div>

Alles relatief positioneren, en alles binnen <div onder> naar left laten floaten.
Dan kun je die iframe gewoon 100% meegeven. Check trouwens eens of je het probleem niet beter zonder iframe kan oplossen.

oprecht vertrouwen wordt nooit geschaad

vrijdag 3 februari 2006 00:40

Acties:

plakbandrol

Topicstarter

Atgast schreef op donderdag 02 februari 2006 @ 23:26:
code:
1
2
3
4
5
<div boven></div>
<div onder>
  <div links></div>
  <iframe></iframe>
</div>
Alles relatief positioneren, en alles binnen <div onder> naar left laten floaten.
Dan kun je die iframe gewoon 100% meegeven. Check trouwens eens of je het probleem niet beter zonder iframe kan oplossen.

hmm ik krijg het niet voor elkaar, heb even een test gemaakt naar jou voorbeeld

code:

<html>
<head>
</head>
<body>

<div id="boven" style="width: 500px; height: 100px; background-color:#CCCCCC;"></div>

<div id="onder" style="width: 100%; height: 100%; background-color:#C0C0C0;"> 
<div id="links" style="width: 200px; height: 200px; background-color: #FFCCFF;"></div>
  <iframe src="http://www.nu.nl"  style="position: relative; width: 100%; height: 100%; left: 200px; top: 200px;</iframe>
</div>

</body>
</html>

wat klopt er niet?

[ Voor 34% gewijzigd door plakbandrol op 03-02-2006 00:41 ]

vrijdag 3 februari 2006 04:13

Acties:

Arjan

copyright is wrong

hmm, goede vraag.
Ik dacht altijd dat div's de width en height parameters berekenden ten opzichte van hun parent

Nu las ik op een pagina dat dit niet meer opgaat zodra je gaat floaten, maar ook zonder floats pakt de testdiv bij mij de volle mep. beetje raar.

Hier is een oplossing die niet in IE werkt, daar heb je dus helaas niet veel aan.

HTML:

<html>
    <head>
        <style>
            html, head, body, iframe {
                margin: 0px;
            }
            #boven {
                width: 500px;
                height: 100px;
                background-color: lightgrey;
            }
            #links {
                background-color: blue;
                width: 200px;
                height: 200px;
            }
            iframe {
                position: absolute;
                top: 100px;
                left: 200px;
                right: 0px;
                bottom: 0px;
            }
        </style>
    </head>
    <body>
        <div id="boven">boven</div>
        <div id="links">links</div>
        <iframe src="http://www.google.nl"></iframe>
    </body>
</html>

[ Voor 11% gewijzigd door Arjan op 03-02-2006 04:16 ]

oprecht vertrouwen wordt nooit geschaad

vrijdag 3 februari 2006 05:28

Acties:

ZeilDude

Wat je wilt is sowieso best lastig, omdat je de vaste afmetingen van je header (hoogte) en het menu (breedte) wilt mixen met de div van het iframe. Die breedte is namelijk nooit 100%, maar 100% minus de breedte van het menu. Een analoge redenering gaat op voor de hoogte.

Er werd al vrij snel gesuggereerd om een oplossing te zoeken zónder iframes. Met die suggestie ben ik het volledig eens. Er zijn talloze argumenten om NIET met (i)frames te werken, daar valt genoeg over te vinden. Hier vind je een voorbeeld van een pagina, die werkt zoals jij wilt, maar dan zonder iframe.
Laat maar even zien wat voor moois je daarvan kunt maken.

Aanvulling: http://www.nice-design.co.uk/ werkt op een soortgelijke manier.

[ Voor 8% gewijzigd door ZeilDude op 03-02-2006 05:35 ]

vrijdag 3 februari 2006 17:16

Acties:

plakbandrol

Topicstarter

Tsja of je wel of geen frames moet gebruiken is altijd een discussie apart, in dit geval leek het me wel geschikt omdat het een (admin) pagina is waarbij de header en het menu statisch zijn, en alleen de content verwisselt, wanneer ik de content in een iframe zou plaatsen zou de pagina geen page refresh nodig hebben, en kan ik het menu mooi volledig met javascript maken..

vrijdag 3 februari 2006 23:25

Acties:

ZeilDude

plakbandrol schreef op vrijdag 03 februari 2006 @ 17:16:
(...) wanneer ik de content in een iframe zou plaatsen zou de pagina geen page refresh nodig hebben (...)

Ja, en wat gebeurt er dan met de content van de iframe? Die refresh je dan toch ook?

(...) kan ik het menu mooi volledig met javascript maken (...)

Bedoel je dat positief? Menu's probeer ik juist zónder javascript te maken. Daarbij, waarom kan in een situatie zonder iframes geen javascrupt gebruiken?

vrijdag 3 februari 2006 23:33

Acties:

plakbandrol

Topicstarter

ZeilDude schreef op vrijdag 03 februari 2006 @ 23:25:

Ja, en wat gebeurt er dan met de content van de iframe? Die refresh je dan toch ook?

Die wel, maar alles eromheen (header, menubalk, logo, etc) blijft staan

Bedoel je dat positief? Menu's probeer ik juist zónder javascript te maken. Daarbij, waarom kan in een situatie zonder iframes geen javascrupt gebruiken?

Tuurlijk kan dat wel, alleen dan moet het op een andere manier. Mijn idee was om de menustructuur in een javascript array te zetten waarin de gebruiker dan kan navigeren, wanneer er een optie wordt aangeklikt blijft het javascript menu in zijn huidige stand staan.