Dreamweaver iFrame in DIV - Problem @ tutorials.de: Tutorials, Forum & Hilfe

Cage_TwoK · 27.01.10 16:57

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

Maik · 27.01.10 17:10

Zitat von Cage_TwoK

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-Code:

<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>

Code 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.

Code css:

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

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Dreamweaver Problem

Dreamweaver Problem

Dreamweaver: Iframe ?

Mein PS design verschiebt sich am iframe im dreamweaver!?

Problem mit Dreamweaver

E-Mail:

Abonnieren Abbestellen