Dreamweaver iFrame in DIV - Problem

Cage_TwoK

Grünschnabel
Hallo Ihr,

ich habe ein Problem bezüglich des iFrames.
Das iFrame wird mithilfe eines DIVs frei positioniert und solle eine Seite wiedergeben. Klartext: Das iFrame steckt in einem DIV.
Das ist eine feine Sache, jedoch erscheint der iFrame nicht am richtigen Fleck! Es erscheint mir fast so, als wird es einfach mittig auf dem Bildschirm gelegt.
Ich hätte es aber gerne, dass das DIV angibt wo das iFrame erscheinen soll. Ich hoffe das Problem wird verstanden, wenn nicht, ich habe noch ein Beispiel angehangen.

Ich hoffe, mir kann jemand helfen! Ich danke auf jedenfall schonmal im Voraus!!

LG, cage
 

Anhänge

  • dw_iFrame_div.zip
    5,5 KB · Aufrufe: 36
M

Maik

ich habe ein Problem bezüglich des iFrames.
Das iFrame wird mithilfe eines DIVs frei positioniert und solle eine Seite wiedergeben. Klartext: Das iFrame steckt in einem DIV.
Das ist eine feine Sache, jedoch erscheint der iFrame nicht am richtigen Fleck! Es erscheint mir fast so, als wird es einfach mittig auf dem Bildschirm gelegt.
Ich hätte es aber gerne, dass das DIV angibt wo das iFrame erscheinen soll.
Der iFrame sitzt trotz deiner beiden im <iframe>-Tag gesetzten HTML-Attribute left="353" und top="234" exakt links oben im DIV #Div-Frame, das sich wiederum im Viewport an deine absoluten Positionsangaben hält.

Vielmehr hast du da offensichtlich ein Problem, das DIV mit dem iFrame beständig über das darunter befindliche <img>-Element zu positionieren, das einen speziellen Bereich für den iFrame besitzt, wenn im Browser die Fenstergröße (= Breite) skaliert wird, womit sich Bild bedingt durch das Attribut align="center" seines umschliessenden DIVs zur horizontalen Fenstermitte ausrichtet, und gegenüber dem DIV / iFrame verschiebt.

Lösung: Im HTML-Code ein weiteres DIV erzeugen, das das bestehende DIV mit dem iFrame in sich aufnimmt, es relativ positionieren, Breite und Höhe entsprechend der vorliegenden Bilddimension festlegen, und das Grafikelement stattdessen als sein Hintergrundbild definieren.

Auf diese Weise beziehen sich nun die absoluten Positionsangaben auf die Boxengrenzen dieses DIV-Blocks (verhalten sich darin also "relativ"), und nicht mehr auf den Dokumentkörper, sprich den Rand des Browserfensters.

HTML:
<body>
<div id="Div-Wrapper">
     <div id="Div-Frame">
    	<iframe src="home.html" name="iFrame" width="600" marginwidth="0" height="340" marginheight="0" align="middle" scrolling="auto" frameborder="0" hspace="0" vspace="0" allowtransparency="true"></iframe>
     </div>
</div>
</body>
CSS:
#Div-Wrapper {
position:relative;
width:851px;
height:590px;
background:url(images/main.jpg) no-repeat;
margin:auto;
}

Achtung: Mit dieser Maßnahme ergeben sich nun für #Div-Frame ganz andere left- / top-Koordinaten.

CSS:
#Div-Frame{
        position:absolute;
        left:195px;
        top:185px;
        width:600px;
        height:340px;
        z-index:auto;
        overflow: auto;
}

mfg Maik
 

Neue Beiträge