IFrames und Bild ändern

Die zweite mögliche Ursache könnte in deinem deklarierten Dokumenttyp zu finden sein, der das (X)HTML-Dokument den Browsern im standardkonformen Modus übergibt, und daher die relative Höhenangabe für den iFrame nicht wie gewünscht interpretiert wird, da entgegen dem "Quirks Mode" im "Standards Mode" der Dokumentkörper (<body>) nur die Höhe erhält, die der Inhalt von ihm abverlangt.

Für diesen Fall wird zusätzlich ein Stylesheet benötigt, in dem, deinem gezeigten Markup zufolge, die drei HTML-Elemente <html>, <body> und <div> mit height:100% formatiert werden.

Der Zusatz margin:0 setzt hier den voreingestellten Außenabstand des Dokumentkörpers zurück, da dieser ansonsten gemäß dem Box-Modell zur height-Eigenschaft hinzuaddiert werden, und die Summe größer ausfällt, wie der Viewport selbst an Höhe besitzt (= 100%), womit die vertikale Scrollaufleiste erscheint.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="author" content="Maik" />
    <meta name="date" content="2010-07-09" />
    <title>tutorials.de | IFrames und Bild ändern</title>

    <style type="text/css">
      /* <![CDATA[ */
        html,body,div { height:100%; margin:0; }
      /* ]]> */
    </style>

  </head>
  <body>
    <div style="text-align:center;">
      <iframe src="startseite.htm" name="Anzeige" width="70%" height="50%" frameborder="0"  marginheight="10" marginwidth="10">
        <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
      </iframe>
    </div>
  </body>
</html>


mfg Maik
 
Hallo zusammen, ich habe nun wieder eine Frage, wie kann ich denn machen dass das IFrame nicht das Hintergrundbild übernimmt, also eine eigene Farbe hat?
Es übernimmt mir eben jetzt das Hintergrundbild, muss man das mit CSS machen?
Ich denke mal schon, oder? Aber wie?
 
Sollten die Seiten, die im iFrame geladen werden, das gleiche Hintergrundbild besitzen, änderst du dies eben in ihnen entsprechend ab.

Lektüre zum eigenständigen Studieren und Umsetzen: Hintergrundfarben und -bilder

mfg Maik
 
Danke, das erste Problem hab ich immer noch nicht ganz gelöst...
wenn man am Anfang auf Home ist, habe ich so einige Bilder mit onmouseover, funktioniert wohl... Aber bei Impressum muss ja der onmouseover Effekt ausgewechselt werden, oder einfach die Bilder. Wie geht das?
 
Wenn ich deine Ausführung richtig interpretiere:
Code: 
<img src="bild1.jpg" onmouseover="this.src='bild2.jpg'" onmouseout="this.src='bild1.jpg'">


mfg Maik
 
Ja, nun kann ich wenn ich auf Home bin die onmouseover anzeigen... Sobald ich aber auf Impressum klicke bekomme ich ein Problem denn:

Es würde immer noch angezeigt dass man sich auf Home befindet, verstehst du?
 
Das hatten wir doch schon längst geklärt, welche Grafik erscheinen soll, wenn die Seite im iFrame gewechselt wird.

mfg Maik
 
Nicht ganz...
Denn es sollen ja immer verschieden Grafiken erscheinen, jenachdem in welchem Iframe man sich befindet...
 
Dann zielt die ganze Chose also doch darauf ab, den aktuell gewählten Menüpunkt hervorzuheben.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <meta name="author" content="Maik" />
        <meta name="date" content="2010-07-13" />
        <title>tutorials.de | IFrames und Bild ändern</title>

        <script type="text/javascript">
        function aktivieren(strHref)
        {
            if(document.getElementById)
                {
                    for(i=0;i<document.links.length;++i)
                        {
                            if(String(document.links[i].className).match(/^(nav|clicked)$/))
                                {
                                    document.links[i].className=(document.links[i].href==strHref)?'clicked':'nav';
                                }
                        }
                }
        }
        </script>

        <style type="text/css">
        ul#nav {
        margin:0;
        padding:0;
        list-style:none;
        }
        ul#nav li {
        display:inline;
        }
        ul#nav li a {
        float:left;
        height:30px;
        }
        ul#nav li#home a {
        width:70px;
        }
        ul#nav li#home a.nav {
        background:url(home_normal.png);
        }
        ul#nav li#home a.clicked {
        background:url(home_active.png);
        }
        ul#nav li#news a {
        width:70px;
        }
        ul#nav li#news a.nav {
        background:url(news_normal.png);
        }
        ul#nav li#news a.clicked {
        background:url(news_active.png);
        }
        ul#nav li#impressum a {
        width:120px;
        }
        ul#nav li#impressum a.nav {
        background:url(impressum_normal.png);
        }
        ul#nav li#impressum a.clicked {
        background:url(impressum_active.png);
        }
        ul#nav li a span {
        display:none;
        }
        iframe {
        clear:left;
        display:block;
        }
        </style>
    </head>
    <body>
        <ul id="nav">
            <li id="home"><a href="home.htm" target="Anzeige" class="clicked" onclick="aktivieren(this.href)"><span>Home</span></a></li>
            <li id="news"><a href="news.htm" target="Anzeige" class="nav" onclick="aktivieren(this.href)"><span>News</span></a></li>
            <li id="impressum"><a href="impressum.htm" target="Anzeige" class="nav" onclick="aktivieren(this.href)"><span>Impressum</span></a></li>
        </ul>
        <iframe src="home.htm" name="Anzeige"></iframe>
    </body>
</html>

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück