Einbauen von einem iFrame

TheBirthdayMassacre · 7 April 2008

Hallo,

ich möchte gern iFrames in meine Website einbauen (jaja ich kenn die Nachteile, aber die Site besteht u.a. aus langen Listen und dabei sehen iFrames einfach besser aus).
Ich hab nun schon seit Stunden das Inet abgeklappert, aber komm einfach nicht weiter.
Wie müsste es bei dem folgenden Beispiel-Codes aussehen wenn ich einen iFrame haben möchte)
LG

HTML-Datei (Name: geschichte.html)

Code:

<!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" xml:lang="de" lang="de"> 
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
 
<title>ggggg</title>
<meta name="robots" content="index,follow,noarchive,noimageindex,noimageclick"/>
<meta name="description" content="ggggg"/>
<meta name="keywords" content="gggg" />
<meta name="language" content="de"/>
<meta name="copyright" content="gggg"/>
<meta name="author" content="gggg"/>
<meta name="publisher" content="ggggg"/>
<meta name="includeglobal" content="1"/> 

<link rel="shortcut icon" href="bilder/favicon.ico" type="image/x-icon"/> 
<link rel="stylesheet" type="text/css" href="aufbau.css"/> 
</head> 
<body> 
<div id="container"> 
 
<div id="banner1"> 
<div id="bannerLeft"></div> 
<div id="banner"> 
</div> 
</div> 
 
<div id="content"> 
 
<div id="leftColumn"> 
<ul id="nav"> 
<li><a href="index.html"> Startseite</a></li>
<li><a href="aktuell.html"> Aktuell</a></li> 
<li><a href="geschichte.html"> <b>Geschichte</b></a></li> 
<li><a href="festablauf.html"> Festablauf</a></li> 
<li><a href="vereinslokal.html"> Vereinslokal</a></li> 
<li><a href="vorstand.html"> Vorstand</a></li> 
<li><a href="koenigspaare.html"> Königspaare</a></li>
<li><a href="jugendkoenige.html"> Jugendkönige</a></li>
<li><a href="kinderkoenigspaare.html"> Kinderkönigspaare</a></li>
<li><a href="fotoalbum.html"> Fotoalbum</a></li>
<li><a href="gaestebuch.html"> Gästebuch</a></li>
<li><a href="links.html"> Links</a></li> 
</ul> 
<div id="leftColumnBottom"> 
 
</div> 
</div> 
 
<div id="rightColumn">
<br/> 
<h3>Geschichte</h3>
<p>bla bla bla bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blav</p>
<p style="text-align: center;"><img border="0" alt="" src="bilder/2erbild2.jpg"/></p> 
</div> 
 
<div id="clear"> 
</div> 
 
</div> 
 
</div> 
<div id="copyright"><p> &copy; 2008 bla - <a target="_self" href="impressum.html">Impressum</a></p></div> 
</body> 
</html>

CSS-Datei

Code:

*    {
        padding:0;
        margin:0;
}


body { 
    background-repeat:repeat-x; 
    background-color:#FFF8E3; 
    margin:20px; 
    padding:0; 
    text-align:center; 
} 
 
h1 { 
    font-size:24px;
        font-weight:#C0C0C0; 
    margin:0; 
} 
 
h2 { 
    font-size:10px;
        font-weight:#C0C0C0; 
    margin:0; 
} 
 
h3 { 
    font-size:16px;
        font-weight:#C0C0C0; 
    margin:0; 
    padding-bottom:5px; 
    border-bottom:1px dotted #CCC; 
} 
 
p { 
    margin-top:5px; 
    padding-bottom:5px; 
    font-size:11px; 
    line-height:1.5; 
} 
 
#container { 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:11px; 
    margin:0 auto; 
    width:888px; 
    padding:0px; 
    height:auto; 
    background-color:#FFF; 
    text-align:left;
        border-width:1px;
        border-style:solid;
        border-color:#000; 
} 


 
#banner { 
        width:888px;  
    height:130px; 
    background-image:url(bilder/bg1c.gif); 
    float:left; 
} 
 
#content { 
    background:url(bilder/bg1.gif) repeat-y; 
    } 
 
#leftColumn { 
    float:left; 
} 
 
#nav { 
    margin-top:20px; 
    padding:0; 
    list-style:none; 
} 
 
#nav a { 
    display:block; 
    font-size:11px; 
    color:#FFF; 
    text-decoration:none; 
    padding:10px; 
    width:130px; 
    height:10px; 
    border-bottom:1px dotted #333; 
     
} 
 
#nav a:hover { 
    background-color:#333; 
 
} 

#leftColumnBottom { 
    width:130px; 
    padding:70px 10px 10px; 
    color:#EAEAEA; 
}
 
#rightColumn { 
    float:left; 
    width:700px; 
    padding-left:20px; 
    color:#666; 
} 
 
#clear { 
    clear:both; 
} 
 
 
#copyright { 
    font:10px Arial,Helvetica,sans-serif; 
    color:#000; 
} 
 
#copyright a { 
    text-decoration:none; 
    color:#000; 
} 
 
#copyright a:hover { 
    color:#000; 
}

Icy · 7 April 2008

Einen iframe bindest du mit folgendem Code ein:

HTML:

<iframe src="datei.php" width="BREITE" height="HÖHE">Alternativtext</iframe>

Wenn du willst, dass dir jemand deinen kompletten Code anpasst (sofern ich das jetzt richtig verstanden habe), würde das in die Jobbörse gehören :)

MfG Icy

TheBirthdayMassacre · 8 April 2008

Wie der HTML-Code zum Einbau des iFrames ausschauen soll, weiß ich;

wie bereits erwähnt: momentan habe ich keine iFrames (ach nee).

Im Bsp. geht es ja um die Datei "geschichte.html"

Nun müsste ich ja noch eine Datei erstellen (z.B. mit dem Namen geschichte-blubb.html), um somit den folgende Code in "geschichte.html einzufügen.

HTML:

<iframe src="geschichte-blubb.html" width="BREITE" height="HÖHE">Alternativtext</iframe>

Allerdings bleibt die CSS-Datei ja nun so wie sie immer war, wodurch die Positionierung des INHALTS vom iFrame nicht korrekt ist.
Müsste ich nun eine zweite CSS-Datei schreiben?

Efchen · 8 April 2008

TheBirthdayMassacre schrieb:
ich möchte gern iFrames in meine Website einbauen (jaja ich kenn die Nachteile, aber die Site besteht u.a. aus langen Listen und dabei sehen iFrames einfach besser aus).

Ehm, hallo?
Frames haben nichts mit dem Aussehen zu tun! Frames sind eine Möglichkeit, ein Dokument in ein anderes einzubetten. Mit dem Aussehen hat das nichts zu tun.

Wenn es Dir nur um das Aussehen geht, dann gestalte Deine Listen halt einfach so, als sähen sie aus wie ein Frame. Dann hast Du optisch das selbe Ergebnis, aber nicht die Nachteile von Frames. Ich meine, ich kann das eigentlich gar nicht verstehen, dass jemand für sich und alle seine Nutzer immense Nachteile auf sich nimmt, nur um einen optischen Effekt hin zu bekommen. Was nutzt die schönste Optik, wenn die Benutzung Mist ist?

Also, wo ist Dein Problem, dass Du auf ein so unglückliches Konstrukt wie Frames zurück greifen musst?

Das Scrolling?

Dann nimm Deine Liste, gib ihr eine feste Höhe und sage "overflow:auto;". Schon hast Du eine Liste, die auf einer festen Höhe scrollt.

Das Einbinden von Inhalt in einen festen Rahmen?

Nutze die include-Möglichkeiten von serverseitigen Techniken.

Konnte ich Dir die Augen öffnen?

Viele Grüße,
-Efchen

TheBirthdayMassacre · 8 April 2008

Frames haben nichts mit dem Aussehen zu tun! Frames sind eine Möglichkeit, ein Dokument in ein anderes einzubetten. Mit dem Aussehen hat das nichts zu tun.

Hallo,

iinwiefern machen iFrames keinen optischen Unterschied?
Ich finde es ist schon ein Unterschied, wenn der Container fest ist (bei iFrames) oder seine Höhe verändert (ohne iFrames).

LG

Efchen · 8 April 2008

Jein.

Das ist ja das schlimme an den Frames. Sie wurden in HTML aufgenommen, haben aber auch einen gewissen Bezug zur Optik. Ein Frame in HTML realisiert müsste eigentlich ein Block-Element sein und sich wie ein Block-Element verhalten. Aber das tut es eben nicht. Ich könnte mir vorstellen, dass das auch einer von vielen Punkten ist, warum es Frames nicht mehr gibt.

Ich hatte das von der Seite "Trennung von Inhalt und Layout" betrachtet. HTML ist allein für die Struktur zuständig. Wenn ein HTML-Element in irgendeiner bestimmten Form dargestellt wird, ist das irrelevant, weil man das Aussehen dann wiederum komplett über CSS bestimmt.

Tatsache ist, dass man alles, was einen Frame ausmacht, auch anders erzeugen kann, und auch besser sollte, weil man dann nicht die anderen, nicht so schwammigen, Probleme nicht mehr hat. Es gibt durchaus noch Anwendungen für Frames, aber im Normalfall kann man das immer anders besser lösen. Schau Dir nur mal eine Site mit Frames mit dem Browser Lynx an. Da läufts mir kalt den Rücken runter, wenn ich nur daran denke! :-)

Gruß,
-Efchen

TheBirthdayMassacre · 8 April 2008

Danke für deine Hilfe.

Wie gesagt letztenendes geht es mir darum, dass mein Container stabil ist und längere Seiten mit einem Scrollbalken versehen werden.

Bin gerade das mit dem overflow am ausprobieren mit:

HTML:

<style type="text/css"><
 .examplediv
 {
  background-color:#efefef;
  border-style:solid #000000 1px;
 }
#divid
{
 position:absolute;
 left:450px; top:350px; width:300px; height:150px;
 overflow:scroll;
}
</style>

<body>

  <div id="divid" class="examplediv">
  ...
  </div>

Momentan habe ich in meiner CSS-Datei bei der Höhe des Containers "auto" angegeben. Müsste ich nun eine feste Höhe vergeben? Wenn ich dies naemlich tue, verrutscht die ganze Seite sehr seltsam.

TheBirthdayMassacre · 8 April 2008

Ich möchte übrigens diese HTML-Seite als overflow behandeln:

Code:

<!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" xml:lang="de" lang="de"> 
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>bla</title>
<meta name="robots" content="index,follow,noarchive,noimageindex,noimageclick"/>
<meta name="description" content="bla."/>
<meta name="keywords" content="bla" />
<meta name="language" content="de"/>
<meta name="copyright" content="*   
<meta name="author" content="bla"/>
<meta name="publisher" content="bla"/>
<meta name="includeglobal" content="1"/> 

<link rel="shortcut icon" href="bilder/favicon.ico" type="image/x-icon"/> 
<link rel="stylesheet" type="text/css" href="aufbau.css"/> 
</head> 
<body>
 
<div id="container"> 
 
<div id="banner1"> 
<div id="bannerLeft"></div> 
<div id="banner"> 
</div> 
</div> 
 
<div id="content"> 
 
<div id="leftColumn"> 
<ul id="nav">
 
<li><a href="index.html"> Startseite</a></li>
<li><a href="aktuell.html"> Aktuell</a></li> 
<li><a href="geschichte.html"> Geschichte</a></li> 
<li><a href="festablauf.html"> Festablauf</a></li> 
<li><a href="vereinslokal.html"> Vereinslokal</a></li> 
<li><a href="vorstand.html"> Vorstand</a></li> 
<li><a href="koenigspaare.html"> Königspaare</a></li>
<li><a href="jugendkoenige.html"> <b>Jugendkönige</b></a></li>
<li><a href="kinderkoenigspaare.html"> Kinderkönigspaare</a></li>
<li><a href="fotoalbum.html"> Fotoalbum</a></li>
<li><a href="gaestebuch.html"> Gästebuch</a></li>
<li><a href="links.html"> Links</a></li> 
</ul> 
<div id="leftColumnBottom"> 
 
</div> 
</div> 
 
<div id="rightColumn">
<br/> 
<h3>Jugendkönige</h3>
<img src="bilder/vogel-jugend.jpg">
<table>
    <tbody>
        <tr>
            <td><b>1986</b></td>
        </tr>
        <tr>
            <td>K&ouml;nig:</td>
            <td>Frank Leyhe</td>
        </tr>
        <tr>
            <td>Fl&uuml;gelsch&uuml;tzen:</td>
            <td>Jens Kreten und Stefan Wiele</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td><b>1987</b></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td><b>1994</b></td>
        </tr>
        <tr>
            <td>K&ouml;nig:</td>
            <td>Volker Bernd</td>
        </tr>
        <tr>
            <td>Fl&uuml;gelsch&uuml;tzen:</td>
            <td>Karsten Loch und Christian Degenhard</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td><b>1995</b></td>
        </tr>
        <tr>
            <td>K&ouml;nig:</td>
            <td>Markus Lange</td>
        </tr>
        <tr>
            <td>Fl&uuml;gelsch&uuml;tzen:</td>
            <td>Martin Feld und Stefan G&ouml;bel</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td><b>1996</b></td>
        </tr>
        <tr>
            <td>K&ouml;nig:</td>
            <td>Matthias Jeske</td>
        </tr>
        <tr>
            <td>Fl&uuml;gelsch&uuml;tzen:</td>
            <td>Dennis Kesper und Timo B&auml;renf&auml;nger</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td><b>1997</b></td>
        </tr>
        <tr>
            <td>K&ouml;nig:</td>
            <td>Stefan G&ouml;bel</td>
        </tr>
        <tr>
            <td>Fl&uuml;gelsch&uuml;tzen:</td>
            <td>Martin Feld und Kai B&auml;renf&auml;nger</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td><b>1998</b></td>
        </tr>
        <tr>
            <td>K&ouml;nig:</td>
            <td>Christian Rummel</td>
        </tr>
        <tr>
            <td>Fl&uuml;gelsch&uuml;tzen:</td>
            <td>Manfred Lange und Timo B&auml;renf&auml;nger</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td><b>1999</b></td>
        </tr>
        <tr>
            <td>K&ouml;nigin:</td>
            <td>Simone Kesper</td>
        </tr>
        <tr>
            <td>Fl&uuml;gelsch&uuml;tzen:</td>
            <td>Timo B&auml;renf&auml;nger und Benjamin Kreten</td>
        </tr>
       
        <tr>
            <td>Fl&uuml;gelsch&uuml;tzen:</td>
            <td>Lino J&auml;ger und Mark M&ouml;ller</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td><b>2006</b></td>
        </tr>
        <tr>
            <td>K&ouml;nig:</td>
            <td>Stephan Leyhe</td>
        </tr>
        <tr>
            <td>Fl&uuml;gelsch&uuml;tzen:</td>
            <td>Kevin Hagenacker und Mark M&ouml;ller</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td><b>2007</b></td>
        </tr>
        <tr>
            <td>K&ouml;nig:</td>
            <td>Maximilian Häfele</td>
        </tr>
        <tr>
            <td>Fl&uuml;gelsch&uuml;tzen:</td>
            <td>Sebastian Schmidt und Mark Möller</td>
        </tr>
    </tbody>
</table> 
</div> 
 
<div id="clear"> 
</div> 
 
</div> 
 
</div> 
<div id="copyright"><p> &copy; 2008 Alexander Leeser - <a target="_self" href="impressum.html">Impressum</a></p></div> 
</body> 
</html>

Hier mein CSS-Code:

Code:

*    {
        padding:0;
        margin:0;
}


body { 
    background-repeat:repeat-x; 
    background-color:#FFF8E3; 
    margin:20px; 
    padding:0; 
    text-align:center; 
} 
 
h1 { 
    font-size:24px;
        font-weight:#C0C0C0; 
    margin:0; 
} 
 
h2 { 
    font-size:10px;
        font-weight:#C0C0C0; 
    margin:0; 
} 
 
h3 { 
    font-size:16px;
        font-weight:#C0C0C0; 
    margin:0; 
    padding-bottom:5px; 
    border-bottom:1px dotted #CCC; 
} 
 
p { 
    margin-top:5px; 
    padding-bottom:5px; 
    font-size:11px; 
    line-height:1.5; 
} 
 
#container { 
    font-family:Arial,Helvetica,sans-serif; 
    font-size:11px; 
    margin:0 auto; 
    width:888px; 
    padding:0px; 
    height:auto; 
    background-color:#FFF; 
    text-align:left;
        border-width:1px;
        border-style:solid;
        border-color:#000; 
} 


 
#banner { 
        width:888px;  
    height:130px; 
    background-image:url(bilder/bg1c.gif); 
    float:left; 
} 
 
#content { 
    background:url(bilder/bg1.gif) repeat-y; 
    } 
 
#leftColumn { 
    float:left; 
} 
 
#nav { 
    margin-top:20px; 
    padding:0; 
    list-style:none; 
} 
 
#nav a { 
    display:block; 
    font-size:11px; 
    color:#FFF; 
    text-decoration:none; 
    padding:10px; 
    width:130px; 
    height:10px; 
    border-bottom:1px dotted #333; 
     
} 
 
#nav a:hover { 
    background-color:#333; 
 
} 

#leftColumnBottom { 
    width:130px; 
    padding:70px 10px 10px; 
    color:#EAEAEA; 
}
 
#rightColumn { 
    float:left; 
    width:700px; 
    padding-left:20px; 
    color:#666; 
} 
 
#clear { 
    clear:both; 
} 
 
 
#copyright { 
    font:10px Arial,Helvetica,sans-serif; 
    color:#000; 
} 
 
#copyright a { 
    text-decoration:none; 
    color:#000; 
} 
 
#copyright a:hover { 
    color:#000; 
}

Nun möchte ich allerdings dass nur ein Höhenscrollbalken angezeigt ist. Wo müsste ich den overflo-HTML-Teil hinzufügen und welchen?

Einbauen von einem iFrame

TheBirthdayMassacre

Neues Mitglied

Icy

Neues Mitglied

TheBirthdayMassacre

Neues Mitglied

Efchen

Guest

TheBirthdayMassacre

Neues Mitglied

Efchen

Guest

TheBirthdayMassacre

Neues Mitglied

TheBirthdayMassacre

Neues Mitglied

Neueste Beiträge