✔ Problem mit I-Frame Größe und Position

Status
Nicht offen für weitere Antworten.
O

outdoorshop24

Mitglied
Hallo,

ich habe foldende PHP-Datei erstellt (PHP, weil noch PHP-Code dazukommt):

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<?php



?>

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta name="generator" content="Adobe GoLive" />
		<title>Als Kunde registrieren</title>
		<link rel="stylesheet" type="text/css" href="styles/outframe.css">
	</head>

	<body bgcolor="#ffffff">
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
 <tr>
  <td height="85"> 
 	<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
	 <tr>
	  <td width="150" background="http://www.tutorials.de/forum/images/top.gif">
	   <div id="CompanyName">OutdoorShop24.net</div>
	   <div id="CompanySloagan"><img src="http://www.tutorials.de/forum/images/clear.gif" width="2" height="1">als Kunde registrieren</div>
      </td>
      <td width="100" background="http://www.tutorials.de/forum/images/top2.gif">
       <img src="http://www.tutorials.de/forum/images/clear.gif" width="2" height="1">
      </td>
      <td background="http://www.tutorials.de/forum/images/top3.gif" align="left" valign="bottom">
      <div id="links">
       <img border="0" src="http://www.tutorials.de/forum/images/clear.gif" width="20">
      <!--Menü hier eingfügen -->
      <a class="nav" href="#" target="MainIFrame">&bull; Schritt 1</a><img border="0" src="http://www.tutorials.de/forum/images/clear.gif" width="20">
      <a class="nav" href="#" target="MainIFrame">&bull; Schritt 2</a><img border="0" src="http://www.tutorials.de/forum/images/clear.gif" width="20">
      <a class="nav" href="#" target="MainIFrame">&bull; Schritt 3</a><img border="0" src="http://www.tutorials.de/forum/images/clear.gif" width="50">
      <a class="nav" href="#" target="MainIFrame">AGBs</a><img border="0" src="http://www.tutorials.de/forum/images/clear.gif" width="20">
      <a class="nav" href="#" target="MainIFrame">Datenschutzerkl&auml;rung</a>
      </div>
      </td>
     </tr>
	</table>
  </td>
 </tr>
 <tr>
  <td height="9" background="http://www.tutorials.de/forum/images/top4.gif">
  <img border="0" src="http://www.tutorials.de/forum/images/clear.gif" width="2" height="1">
  </td>
 </tr>
 <tr>
  <td>
   <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
    <tr>
     <td background="http://www.tutorials.de/forum/images/menu.gif" width="200" valign="top">
      <img src="http://www.tutorials.de/forum/images/frau.jpg" width="200" height="150"><br>
      <table border="0" width="180" cellpadding="5" cellspacing="0" class="box">
       <tr>
        <th>Warum registrieren?</th>
       </tr>
       <tr>
        <td>
        <div align="justify">
        &bull; Sie erhalten als registrierter Kunde 2% Online-Rabatt bei Bestellung in unserem Onlineshop. Einzelne Sonderangebote k&ouml;nnen von dieser Regelung ausgeschlossen sein.
        Die Registrierung ist kostenlos und verpflichtet Sie zu nichts.<br><br>
        &bull; Senden Sie online eine Mitteilung an Ihren pers&ouml;nlichen Kundenbetreuer. Diese Mitteilungen werden bevorzugt bearbeitet.<br><br>
        &bull; Sie erhalten exklusive Angebote, welche im Onlineshop nicht erh&auml;ltlich sind.
        </div>
        </td>
       </tr> 
      </table>
     </td>
     <td valign="top">
      <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
       <tr>
        <td height="29" background="http://www.tutorials.de/forum/images/top5.gif" valign="top">
         <img src="http://www.tutorials.de/forum/images/clear.gif" width="2" height="1">
        </td>
       </tr>
       <tr>
        <td align="center">
<!-- HIER BEGINNT ANSCHEINEND MEIN PROBLEM: -->
<!-- Das IFrame füllt nicht den gesamten Bereich aus, sondern nur ein drittel -->
         <iframe id="MainIFrame" name="MainIFrame" width="100%" height="100%" src="pages/blank.htm" border="0" frameborder="0">
         Ihr Browser unterst&uuml;tzt keine IFrames.
         </iframe>
        </td>
       </tr>
      </table>
     </td>
     <td background="http://www.tutorials.de/forum/images/menu.gif" width="200" valign="top">
      Testtext soll im rechten Infobereich erscheinen...
     </td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td height="24" background="http://www.tutorials.de/forum/images/bottom1.gif">
   <img src="http://www.tutorials.de/forum/images/clear.gif" width="2" height="1">
  </td>
 </tr>
 <tr>
  <td height="44" background="http://www.tutorials.de/forum/images/bottom2.gif" align="center">
   &copy; Copyright 2007 OutdoorShop24.net<img src="http://www.tutorials.de/forum/images/clear.gif" width="2" height="1">
  </td>
 </tr>
</table>
	</body>

</html>

Mein Problem: Das IFrame sollte 100% der verfügbaren Höhe ausfüllen, tut es aber offensichtlich nicht, sondern nimmt nur ca. ein Drittel ein.

Warum? Ich komme einfach nicht drauf.

Hier ein Link, damit Ihr sehen könnt, was ich meine. Seite aufrufen und einfach mal einen der Links im oberen Seitenbereich anklicken.

Hoffe, irgend jemand kann mir helfen
 
Hi,

wozu soll man denn die "toten" Links anklicken?

Zu deinem Problem, probier mal Folgendes:

  • Erweiterung für das Stylesheet outframe.css:
Code: 
html,body {
margin: 0;
padding: 0;
}

td {
vertical-align: top;
}
  • Änderungen und Ergänzungen im HTML-Code:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<?php



?>
<html>

.
.
.

<td align="center" height="100%">
         <iframe name="MainIFrame" width="100%" height="100%" src="pages/blank.htm" frameborder="0">
          Ihr Browser unterstützt keine IFrames.
         </iframe>
</td>
 
Hi,

ich habe die vorgeschlagenen Änderungen gemacht und auf der Seite unter dem Link "registrieren" (vorher Schritt 1) mal ein einfaches Formular hinterlegt, welches definitiv größer ist, als das IFrame anzeigen kann.

Leider hat sich durch die Codeänderung nur geändert, dass die Links nicht mehr richtig platziert sind, sondern weiter oben stehen.
 
Du hast vergessen, den Doctype zu ändern, denn der von dir verwendete ist für HTML-Dokumente mit iFrames nicht vorgesehen - aus diesem Grund funktioniert's derzeit auch noch nicht mit der 100%-Höhe für den iFrame.

Wenn die Links nicht mehr richtig positioniert sind, dann liegt es an der empfohlenen CSS-Regel für die Tabellenzellen, die dann für die umgebende Tabellenzelle der Links wieder umgeschrieben werden muss (vertical-align:bottom).

Die CSS-Angabe vertical-align:top soll nämlich sicherstellen, dass die Tabellenzelleninhalte nicht in der Vertikalen zentriert werden, was im IE zu Layoutverschiebungen führt.
 
Sorry, das habe ich wohl übersehen :eek:

Ich habe den Doctype mal geändert und jetzt funktioniert es wunderbar.

An dieser Stelle mal gaaanz herzlichen Dank für die tolle und v.a. schnelle Hilfe!!
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück