CSS Problem mit iframe

Donatien · 13.09.2010

Hallo zusammen

Ich hätte da mal ein Problem ........

Ich habe eine Website mit einem iframe erstellt theoretisch sollte es funktionieren, praktisch aber laden die Links die Seiten nicht in das iframe, sondern unterhalb der Seite :-(

Ich hab mir den Code immer wieder durchgelesen, finde aber den Fehler nicht...

Kann mir da mal jemand helfen? Danke!!

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
    <HEAD>
<META CONTENT="text/html; charset=iso-8859-1" HTTP-EQUIV="Content-Type">
<link rel="stylesheet" type="text/css" href="/menu/menu_style.css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>

</HEAD>

<BODY background="images2010/bg-grau-schraffiert.png" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">
  <TR>
        <TD COLSPAN="3"><IMG SRC="images2010/Robin-Tafel-01_1.jpg" WIDTH="994" BORDER="0" HEIGHT="80"></TD>
    </TR>
    <TR>
        <TD COLSPAN="3"><IMG SRC="images2010/Robin-Tafel-01_2.jpg" WIDTH="994" BORDER="0" HEIGHT="35"></TD>
    </TR>
    <TR>
        <TD COLSPAN="3"><IMG SRC="images2010/Robin-Tafel-01_3.jpg" WIDTH="994" BORDER="0" HEIGHT="36"></TD>
    </TR>
    <TR>
        <TD><IMG SRC="images2010/Robin-Tafel-01_4.jpg" WIDTH="305" BORDER="0" HEIGHT="495"></TD>

    <TD width="647" height="495" valign="top"><div id="Layer1" style="position:absolute; left:141px; top:46px; width:580px; height:49px; z-index:1"> 
        <div id="outside"> 
          <ul id="navigation-1">
            <li><a href="home.html" title="Home" target="mainframe" >Home</a> 
            </li>
            <li><a href="" title="Bilder" target="mainframe" >Bilder</a> 
              <ul class="navigation-2">
                <li><a href="seiten/geburt.html" title="Geburt" target="mainframe" >Geburt</a></li>
                <li><a href="seiten/bilderhoch.html" title="Erste Bilder" target="mainframe" >Erste 
                  Bilder</a></li>
                <li><a href="seiten/taufe.html" title="Taufe" target="mainframe" >Taufe</a></li>
                <li><a href="seiten/gelarie.html" title="Galerie 1" target="mainframe" >Galerie 
                  1</a></li>
              </ul>
            </li>
            <li><a href="" title="Mitteilungen" target="mainframe" >Mitteilungen</a> 
              <ul class="navigation-2">
                <li><a href="seiten/tagebuch2008.html" title="Tagebuch 2008" target="mainframe" >Tagebuch 
                  2008</a></li>
                <li><a href="seiten/tagebuch2009.html" title="Tagebuch 2009" target="mainframe" >Tagebuch 
                  2009</a></li>
                <li><a href="seiten/tagebuch2010.html" title="Tagebuch 2010" target="mainframe" >Tagebuch 
                  2010</a></li>
                <li><a href="" title="Tagebuch 2011" target="mainframe" >Tagebuch 
                  2011</a></li>
                <li><a href="http://www.flf-book.de/Benutzer/robinscharzfeld.htm" title="Gästebuch" target="mainframe" >Gästebuch</a></li>
              </ul>
            </li>
            <li><a href="" title="Über mich" target="mainframe" >Über mich</a> 
              <ul class="navigation-2">
                <li><a href="seiten/uebermich.html" title="Das bin ich" target="mainframe" >Das 
                  bin ich</a></li>
              </ul>
            </li>
            <li><a href="seiten/impressum.html" title="Impressum" target="mainframe" >Impressum</a> 
            </li>
          </ul>
        </div>
      </div></TD>
        <TD><IMG SRC="images2010/Robin-Tafel-01_6.jpg" WIDTH="42" BORDER="0" HEIGHT="495"></TD>
    </TR>
    <TR>
    <TD COLSPAN="3"><IMG SRC="images2010/Robin-Tafel-01_7.jpg" WIDTH="994" BORDER="0" HEIGHT="54"></TD>
</TR>
</TABLE><iframe src="home.html" name="mainframe" width="647" marginwidth="0" height="495" marginheight="0" align="top" scrolling="auto" frameborder="0"></iframe>
</BODY>
</HTML>

Famoir · 13.09.2010

AW: CSS Problem mit iframe

Hallo erstmal, also ich habe auch gerade begonnen HTML zu lernen.

Und bin genau an diesem Punkt

Nur muss ich sagen, bei mir hats funktioniert.

Was mir als erstes hier auffällt ist der "relativ" unsaubere Code.
Codest du selber oder lässt du das ein Programm übernehmen?

ich werde das ganze nochmal durchgehen und versuche mal deinen Fehler zu finden

Famoir · 13.09.2010

AW: CSS Problem mit iframe

ja und da habe ich auch schon das Problem gefunden.

Du sagst, die Seiten sollen in das iframe? Das tuen sie auch.. aber wie du sagst unterhalb der Seite.

Denn dein iframe ist unter der Seite bzw. der ausgezeichneten Tabelle.

Du musst dir zuerst einmal im klaren sein, in welchen Tabellenabschnitt du das iframe "zwirbeln" willst. und dann muss es da auch rein.

Bsp:

HTML:

    <table>
                    <tr>
                       <td>  <iframe name="" src="" etc.></td>
                    </tr>
            </table>

sokie · 13.09.2010

AW: CSS Problem mit iframe

"unterhalb der Seite" heisst in deinem Fall unterhalb der Tabelle, in der sich deine Gestaltung befindet. Du musst innerhalb der Tabelle eine ausreichend grosse Zelle(td) haben, in der der iframe notiert wird.
dem Anschein nach könnte

Code:

<TD width="647" height="495" valign="top"><!--[COLOR=Red][B]HIER[/B][/COLOR]--><div id="Layer1"  style="position:absolute; left:141px; top:46px; width:580px;  height:49px; z-index:1">

der Platz sein, wo der iframe hineinpassen könnte

bitte sei doch so gut, den code in die entsprechenden code-bereiche zu setzen - so wie es hier ist, ist er wirklich schwierig zu lesen.

Landorien · 13.09.2010

AW: CSS Problem mit iframe

Iframes sind schlecht für die Zugänglichkeit deiner Seite. Zum einen können Suchmaschinen-Bots diese Inhalte nicht auswerten und zum anderen können Vorlesebrowser sowie reine Textbrowser diesen Inhalt nicht darstellen (stattdessen kommt ein Link). Generell sollte man von frames abraten.

Eventuell solltest du dir noch einmal die Grundkenntnisse in HTMl auffrischen. Du verwendest das table-Tag um deinen Inhalt auszuzeichnen, sowie inlinestyles/-attribute. Moderne Techniken ermöglichen viel mehr Flexibilität und Zugänglichkeit.

..unterhalb der Tabelle, in der sich deine Gestaltung befindet.

Gestaltung macht man mit CSS. In eine Tabelle gehören tabellarische Daten.

Gruß
Lando

DavidCaspar · 13.09.2010

AW: CSS Problem mit iframe

Würde dir auch raten, dich nochmal mit DIV - Containern und den Möglichkeiten von CSS zu befassen.

Tabellenlayouts sind total veraltet und machen nur Probleme bei verschiedenen Browsern.

Ich verweise an dieser Stelle einfach mal auf: SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)

Landorien · 13.09.2010

AW: CSS Problem mit iframe

DavidCaspar schrieb:
Würde dir auch raten, dich nochmal mit DIV - Containern und den Möglichkeiten von CSS zu befassen.

wieso nur mit div-container? Das div-Tag ist nur eines von vielen HTML-Elementen.

Tabellenlayouts sind total veraltet und machen nur Probleme bei verschiedenen Browsern.

sogenanntes "div-Layout" ebenso

Ich verweise an dieser Stelle einfach mal auf: SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)

Die Seite ist total veraltet und nicht gepflegt. Zitat von der Seite: SELFHTML: Version 8.1.2 vom 01.03.2007

Besser zu empfehlen wäre diese Seite hier: Einführung in XHTML, CSS und Webdesign - Michael Jendryschik

Gruß
Landorien

DavidCaspar · 13.09.2010

AW: CSS Problem mit iframe

Landorien schrieb:
wieso nur mit div-container? Das div-Tag ist nur eines von vielen HTML-Elementen.

Der DIV Container ist das Hauptelement momentan aktueller Websitegerüste und macht weitaus weniger Probleme als Tabellen beim Layouten, wenn man sich halbwegs mit CSS auskennt :rolleyes:

Aber ich merke schon, Sie als Super Guru coden wahscheinlich nurnoch in HTML 5 wie es ausieht

Für den praktischen Einsatz ist es dafür aber noch etwas zu früh :schmoll:

Donatien · 13.09.2010

AW: CSS Problem mit iframe

Leider habe ich aber sowas von fast keine Ahnung von CSS Templates :-(

Ich habs mal versucht und ein Grundgerüst erstellt:

..aber wo bitte ist das Codewerkzeug ..oben rechts ?????

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="title" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
</head>

<body>

<div id="wrapper">

<div id="header"> <img src="robin-images/robin_1.jpg" width="994" height="92" border="0" />
</div>


<div id="middle">

<div id="container">

<div id="content"> Hierbei handelt es sich um den Textbereich</div>

</div>

<div class="sidebar" id="sideLeft"> <strong></strong> </div>
<img src="robin-images/robin_2.jpg" width="265" height="578" />

</div>

<div id="footer"> <img src="robin-images/robin_4.jpg" width="994" height="30" /></div>


</div>

</body>
</html>

Und nun die Frage?

In welcher Form muss ich die Seitentexte erstellen (HTML?) und was muss ich dabei als "Zielframe" angeben "middle" ... "container" ..???

Vielen Dank für eure Geduld

sokie · 13.09.2010

AW: CSS Problem mit iframe

Donatien schrieb:
In welcher Form muss ich die Seitentexte erstellen (HTML?) und was muss ich dabei als "Zielframe" angeben "middle" ... "container" ..???

Vielen Dank für eure Geduld

Damit denkst du schon wieder in frames(iframes).
du verlinkst einfach auf eine neue Seite, die du mit dem selben layout aber untershiedlichem Inhalt erstellst - keine Frames.

Landorien · 13.09.2010

AW: CSS Problem mit iframe

DavidCaspar schrieb:
Der DIV Container ist das Hauptelement momentan aktueller Websitegerüste und macht weitaus weniger Probleme als Tabellen beim Layouten, wenn man sich halbwegs mit CSS auskennt

Solange du von HTML-Tags wie das div- oder table-Element sprichst und im gleichen Satz "design" oder "layout" verwendest, kann ich nur immer wieder sagen: "Bitte lerne die Grundlagen von HTML".

Das div-Tag macht ebensowenig wie vile "probleme" wie das table-Tag, nämlich garkeine. Wenn dann machen die Browser Probleme bei fehlerhaft implementierten oder falsch implementieren CSS-Eigenschaften.

Gruß
Landorien

MrAzrael · 14.09.2010

AW: CSS Problem mit iframe

Landorien schrieb:
sogenanntes "div-Layout" ebenso

seit wann sind die veraltet? hab ich irgendwas in den letzten Monaten / Jahren verpasst?

Landorien · 14.09.2010

AW: CSS Problem mit iframe

MrAzrael schrieb:
seit wann sind die veraltet? hab ich irgendwas in den letzten Monaten / Jahren verpasst?

Dieser "div-Layout" statt "Tabellen-Layout"-Hype wurde von irgendeinem Anfänger mal losgetreten und geht irgendwie nichtmehr aus den Köpfen raus.

HTML ist eine Auszeichnungssprache und hat in erster Linie garnichts mit "Layout", "Design" oder "Formen" zu tun.

Ich kann nur immer wieder auf diesen Artikel verweisen:

MrAzrael · 14.09.2010

AW: CSS Problem mit iframe

Landorien schrieb:
Dieser "div-Layout" statt "Tabellen-Layout"-Hype wurde von irgendeinem Anfänger mal losgetreten und geht irgendwie nichtmehr aus den Köpfen raus.

HTML ist eine Auszeichnungssprache und hat in erster Linie garnichts mit "Layout", "Design" oder "Formen" zu tun.

Ich kann nur immer wieder auf diesen Artikel verweisen:

der 1. Artikel den ich dazu mal in den letzten 4 Jahren gelesen habe und der 2. Developer der sich in dieser Zeit darüber beschwert ... begreifen tu ich es allerdings nicht warum man sich darüber aufreget ... man kann jetzt über schönen und nicht so schönen Code streiten ... Fakt ist, dass ein Entwickler der die Eigenschaften im Verhalten dieses Elements in den diversen Browsern kennt, genau so wenig ein Problem hat wie jemand der mit anderen Tags arbeitet und bevor ich jetzt ständig überlegen muss welches Element jetzt passender ist, bei der Masse der Elemente, warum sollte man dann nicht das nehmen was man kennt?

Zumal andere Elemente auch teils unschöne Nebenwirkungen haben die man dann auch erst wieder im CSS ausbessern muss ... siehte <p>-Tag

Bevor ich aber Leuten, die gerade Anfangen mit Programmieren und noch mit Tabellen und iframes arbeiten, sage das "Div" Böse ist, würd ich allerdings noch dran hängen das es eigentlich nur eine Sache des Aussehens und persönlichen Geschmacks ist und nicht grundsätzlich Falsch

sieht immerhin genau so besc....en aus wenn ich nur noch <p>-Tags im Quellcode habe ...

Landorien · 14.09.2010

AW: CSS Problem mit iframe

MrAzrael schrieb:
...dass ein Entwickler der die Eigenschaften im Verhalten dieses Elements in den diversen Browsern kennt, wenig ein Problem hat wie jemand der mit anderen Tags arbeitet und bevor ich jetzt ständig überlegen muss welches Element jetzt passender ist, bei der Masse der Elemente, warum sollte man dann nicht das nehmen was man kennt?

Und genau das ist ja das Problem. Jedes HTML-Tag hat eine Bedeutung. Bzw es gibt sogar welche (div und span) die garkeine Bedeutung haben. Es ist doch eigentlich nichts anderes wie XML-Dokumente erstellen und dem Inhalt eine sinvolle Bedeutung sowie Struktur zu geben. Nehmen wir an du würdest eine Sitemap in XML abbilden wollen:

HTML:

<?xml version="1.0" encoding="utf-8"?>
  <sitemap>
     <entry id="1" title="Startseite" />
     <entry id="2" title="Aktuelles" />
    .....
  </sitemap>

Hier verwendest du doch auch sinnvolle Tags die das Beschreiben was du meinst.

Oder machst du das so:

HTML:

<?xml version="1.0" encoding="utf-8"?>
  <div>
     <div id="1" title="Startseite" />
     <div id="2" title="Aktuelles" />
    .....
  </div>

oder:

HTML:

<?xml version="1.0" encoding="utf-8"?>
  <table>
     <tr>
     <td id="1" title="Startseite" />
     <td id="2" title="Aktuelles" />
    .....
     </tr>
  </table>

was von den Dreien ist logisch sinnvoll ausgezeichnet und hat eine Bedeutung?

Zumal andere Elemente auch teils unschöne Nebenwirkungen haben die man dann auch erst wieder im CSS ausbessern muss ... siehte <p>-Tag

Kein Tag hat "unschöne Nebenwirkungen". Das was du meinst ist sogenanntes hasLayout welches die Browserhersteller im Falle von einem Quirks-Modus oder bei nichtvorhanden angegebenen Werten einsetzen damit die Darstellung "gefixed" wird. Solche Dinge kann man, bzw sollte man zumindest mit einem einfachen CSS-Reset weg machen:

Code:

* { margin:0; padding:0; }

Ebenso sollte man eine Schriftart sowie Schriftgröße im root-Element (html) definieren.

Es gibt auch ganze reset-CSS die alle Einstellungen auf 0 setzen. (Weitere Informationen bietet google)

Bevor ich aber Leuten, die gerade Anfangen mit Programmieren und noch mit Tabellen und iframes arbeiten, sage das "Div" Böse ist, würd ich allerdings noch dran hängen das es eigentlich nur eine Sache des Aussehens und persönlichen Geschmacks ist und nicht grundsätzlich Falsch

Und wieder etwas missverständliches. Du verwendest Programmieren in Zusammenhang mit HTML und CSS. Beides hat NICHTS mit Programmieren zu tun. Ich hat den Anschein, dass du auch noch nicht wirklich verstanden hast was HTML ist.

Leute sollten - wie schon oft gesagt - damit anfangen:

1. Inhalt schreiben / besorgen

2. Den Inhalt logisch auszeichnen:
- Überschriften -> h1 - h6
- Textabsätze -> p
- ungeordnete Listen -> ul
- geordnete Listen -> ol
- definierende Listen -> dl
- tabellarische Daten -> table
- Adressen -> adress
- wichtiger Inhalt: em
- sehr wichtiger Inhalt: strong
.....

3. Ihren logisch ausgzeichneten Inhalt mit CSS in "Form bringen", bzw. das erstellte Design einbinden

Du hast doch sicherlich in deiner Schulzeit einmal einen Aufsatz geschrieben, oder?

Überschrift 1. Ordnung (h1): Hauptthema
Überschrift 2. Ordnung (h2): Inhaltsverzeichnis
--> Inhaltsverzeichnis - geordnete Auflistung (ol)

Überschrift 2. Ordnung (h2): 1. Absatzüberschrift
--> Textabsatz (p)
--> Textabsatz (p)

Überschrift 2. Ordnung (h2): 2. Absatzüberschrift
--> Textabsatz (p)
Überschrift 3. Ordnung (h3): 2.1. Absatzüberschrift
--> Textabsatz (p)

.............

was ist daran so schwer?

sieht immerhin genau so besc....en aus wenn ich nur noch <p>-Tags im Quellcode habe ...

HTML != Aussehen (siehe oben).

Gruß
Landorien

MrAzrael · 14.09.2010

AW: CSS Problem mit iframe

Landorien schrieb:
Und wieder etwas missverständliches. Du verwendest Programmieren in Zusammenhang mit HTML und CSS. Beides hat NICHTS mit Programmieren zu tun. Ich hat den Anschein, dass du auch noch nicht wirklich verstanden hast was HTML ist.

Definition: Programmierung bezeichnet die Tätigkeit, Computerprogramme (Software) zu erstellen. Im weiteren Sinne versteht man dabei alle Tätigkeiten, die mit dieser Programmerstellung verbunden sind, insbesondere auch den konzeptionellen Entwurf. Im engeren Sinne bezeichnet Programmierung lediglich das Umsetzen dieses konzeptionellen, abstrakten Entwurfes in konkreten Quelltext.

Und den Rest spar ich mir, da es scheinbar wenig Sinn macht ...

Donatien · 23.09.2010

AW: CSS Problem mit iframe

Nochmal ne "dumme"? Frage... da ich bisher in HTML .... Frames, IFRAMES, ...gedacht habe....

Das bedeutet:
Bei Websites in CSS bestehen ALLE Seiten immer mit der kompletten Grafik von HEAD bis FOOTER und nur der Text-, und Grafikinhalt der jeweiligen Seite unterscheidet sie. Dies Seiten werden im Browser nur ausgetauscht?

hubspe · 23.09.2010

AW: CSS Problem mit iframe

Landorien schrieb:
HTML:

<?xml version="1.0" encoding="utf-8"?> <sitemap> <entry id="1" title="Startseite" /> <entry id="2" title="Aktuelles" /> ..... </sitemap>

Hier verwendest du doch auch sinnvolle Tags die das Beschreiben was du meinst.

Oder machst du das so:

HTML:

<?xml version="1.0" encoding="utf-8"?> <div> <div id="1" title="Startseite" /> <div id="2" title="Aktuelles" /> ..... </div>

oder:

HTML:

<?xml version="1.0" encoding="utf-8"?> <table> <tr> <td id="1" title="Startseite" /> <td id="2" title="Aktuelles" /> ..... </tr> </table>

was von den Dreien ist logisch sinnvoll ausgezeichnet und hat eine Bedeutung?

keins von den Dreien ist sinnvoll ausgezeichnet.
Der XML-Prolog macht bestenfalls Ärger (im IE, wo sonst!), ansonsten ist er total überflüssig.

Donatien schrieb:
Nochmal ne "dumme"? Frage... da ich bisher in HTML .... Frames, IFRAMES, ...gedacht habe....

Das bedeutet:
Bei Websites in CSS bestehen ALLE Seiten immer mit der kompletten Grafik von HEAD bis FOOTER und nur der Text-, und Grafikinhalt der jeweiligen Seite unterscheidet sie. Dies Seiten werden im Browser nur ausgetauscht?

Jede Seite muss komplett erstellt werden, d.h. mit Kopf, Navi, Inhalt und Fuss und wird auch immer komplett geladen.
Schau mal hier, macht Spass weil man gleich mitbauen kann.

Donatien · 23.09.2010

AW: CSS Problem mit iframe

Ja, danke

Nachdem ich nun das Grundsätzliche verstanden habe, werde ich mich mal intensiver mit den kleinen Boxen beschäftigen

Was mich bisher an CSS gestört hat ist die "Tatsache?", dass die Seite immer komplett geladen wird. Ich mags halt lieber (Augen schonender)

wenn der Kopfteil und das Menü "bleiben" und nicht mit gescrollt werden.

DavidCaspar · 24.09.2010

AW: CSS Problem mit iframe

Donatien schrieb:
Ja, danke

Nachdem ich nun das Grundsätzliche verstanden habe, werde ich mich mal intensiver mit den kleinen Boxen beschäftigen

Was mich bisher an CSS gestört hat ist die "Tatsache?", dass die Seite immer komplett geladen wird. Ich mags halt lieber (Augen schonender) wenn der Kopfteil und das Menü "bleiben" und nicht mit gescrollt werden.

Dann wär Flash ja vielleicht eher was für dich

Das wird nur einmal geladen und dann kannste schön animiert die ganze website nutzen ^^

Empfehlen würd ich jedoch nich ^^