HTML Link Inhalt in bestimmten fenster anzeigen

borklaser

Cadet 3rd Year
Registriert
Dez. 2013
Beiträge
39
Hallo, ich hoffe hier kann mir jemand helfen..

ich habe eine komplette Homepage nach einem Tut von YouTue nachgebaut. Das Problem ist derjenige hat alles gezeigt außer wie ich Meine erstellten Seiten in den Dateien in dem Hauptfenster öffne. Also wenn ich z.B. auf "Bilder" klicke das sich der inhalt dann in dem Haupfenster öffnet. Er hat alles mit DIV usw gemacht, habe es einfach nachgebaut und habe selber mit iFrames es versucht aber es hat nicht geklappt, bzw schon nur es wird nur ein bestimmter Teil angezeigt auch wenn ich höhe 100% oder auto angebe.

Also was ich will ist eine einfache Lösung wie ich, wenn ich auf die Link klicke den Inhalt im Hauptfenster öffne.

Meine Seite: http://testpage500.bplaced.net/
Der EINZIGE Link der geht ist eoben BILDER. hab es wie gesagt mir Iframes verucht aber fail. Hoffe jemand findet meinen fehler oder hat eine bessere lösung. Ich screibe hier nochmal den Code vom index hin. Also das Feld wo sich der link öffnen soll heißt
HTML:
<div class="left_main">
also left_main ist ne class div die namen usw bitte nicht ändern wegen CSS ;)

Also zeile 36 ist der Link angegeben der sich in dem Left_main öffnen soll
Und Zeilen 65-70 ist er bereich für left_main also den hauptfeld.

HTML:
<!DOCTYPE html>
<html>

<head>
    <title>Homepage</title>

    <meta charset="ISO-8859-1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <meta name="keywords" content=""/>


    <link href="style.css" type="text/css" rel="stylesheet" />
</head>

<body>
        <table align="center">
          <tr>
              <td>
                <div id="root_site">
                     <div id="header_main_container">
                            <div class="header_bg"> </div>
                     </div>

                     <div id="navi_main_container">
                            <div class="navigation">

                                <ul id="navigation_main">
                                        <li class="home"><a href="#">Home</a>
                                             <ul class="dropdown">
                                                    <li><a href="#">News</a></li>
                                                    <li><a href="#">Downloads</a></li>
                                                    <li><a href="#">Links</a></li>
                                             </ul>
                                        </li>
                                       <li class="home2"><a href="/left_main.html" target="haupt">Bilder</a>
                                             <ul class="dropdown">
                                                    <li><a href="#">News</a></li>
                                                    <li><a href="#">Downloads</a></li>
                                                    <li><a href="#">Links</a></li>
                                             </ul>
                                        </li>
                                        <li class="home3"><a href="#">Videos</a></a>
                                             <ul class="dropdown">
                                                    <li><a href="#">News</a></li>
                                                    <li><a href="#">Downloads</a></li>
                                                    <li><a href="#">Links</a></li>
                                             </ul>
                                        </li>
                                        <li class="home4"><a href="#">Text</a></a>
                                             <ul class="dropdown">
                                                    <li><a href="#">News</a></li>
                                                    <li><a href="#">Downloads</a></li>
                                                    <li><a href="#">Links</a></li>
                                             </ul>
                                        </li>
                                </ul>


                            </div>
                     </div>

                     <div id="content_main_container">

                            <div class="left_main">
                            <iframe src="haupt.html" name="haupt" height="100%">  </iframe>



                     </div>
                            <div class="right_main">
                            <table class="content_right_table" cellpadding="0" cellspacing="0">

                                <tr>
                                    <td class="table_headline">News</td>
                                </tr>
                                <tr>
                                    <td>
                                                <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können.</p>

                                                <p>Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher</p>
                                    </td>
                                </tr>

                            </table>

                            </div>
                     </div>

                     <div id="footer_main_container"></div>
                </div>



              </td>
          </tr>

         </table>


</body>
</html>
 
Ist unter "Bild" derzeit nur der Text "Text" drin und dieser Text soll in der linken Box zu sehen sein? Weil das tut es nämlich.

Oder versteh ich dich falsch :D?
 
Nene schon richtig. Habe das ja mit Iframe gemacht... und da ist jetzt so ein rahmen der soll weg! Außerdem ist bei home der text in so ner extra box zum scrollen angezeigt, will das der text komplett zu sehen ist also nicht in so ner extra box noch. Ich will einfach wenn ich auf Bilder, Video usw Klickt das sich dann der inhalt von einer andern datei öffnet. Also in der linken box. Nur das geht zwar mit iframe wie ich es gerade habe aber wie gesagt das ist fail :( oder gibts noch ne andere möglichkeit außer iframe? Oder was hab ich da falsch gemacht?
 
Seit gut 15 Jahren sind Frames eigentlich obsolet und sollten nicht für Konstruktionen wie deine verwendet werden. Tabellen sind im Übrigen genauso falsch, wenn man sie für Layoutzwecke missbraucht.

Deinen Quelltextansatz solltest du daher noch einmal überdenken. Möchtest du eine rein statische Seite errichten (d. h., jede einzelne Seite liegt als separate HTML-Datei vor), müsstest du das gesamte HTML-Konstrukt samt spezifischem Inhalt in separate Dateien packen. Damit würdest du die zahlreichen Nachteile von Frames umgehen.

Weitaus empfehlenswerter wäre jedoch ein simples CMS, das nicht nur bedienerfreundlicher ist, auch die Möglichkeit böte, mit einmal definierten Templates zu arbeiten. Die jeweiligen Inhalte würden automatisch ins Layout integriert werden.
 
http://de.selfhtml.org/html/frames/eingebettete.htm

<iframe src="startseite.htm" name="Fensterlein" width="500" height="400"
marginheight="10" marginwidth="10" align="right">
<p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
</iframe>

<p>
<a href="willkommen.htm" target="Fensterlein"><b>andere Seite</b></a><br>
<a href="startseite.htm" target="Fensterlein"><b>erste Seite</b></a>
</p>

Deinem Iframe einen Namen geben und bei deinen Links beim Target diesen Namen mitgeben. :)
 
Ja... aber warum sollte man so etwas tun? iframes sind, genau wie normale frames, nicht barrierefrei und hinsichtlich Suchmaschinen ebenfalls unterste Schublade.
Korrekt wäre: im allerschlimmsten Fall im neuen Fenster öffnen, andernfalls per JavaScript/AJAX in den Zielbereich laden.
 
hab ich doch gemacht.. hier den Link und dann zu dem iframe..
HTML:
<li class="home2"><a href="/left_main.html" target="haupt">Bilder</a>

Und hier das hauptfenster mit dem namen.
HTML:
<div class="left_main">
                            <iframe src="haupt.html" name="haupt" height="100%">  </iframe>



                     </div>

Aber es kommt immer dieser Ramen & scrolling. Will das das komplette haupfenster (left_Main) mit dem inhalt der html dateien gefüllt ist OHNE das ich die größe von dem Fenster immer angeben mus weil jeder Inhalt ist ja nicht gleich groß.
 
http://meiert.com/de/publications/articles/20060119/
Also den alten Inhalt quasi ausblenden und den neuen Inhalt dann dort anzeigen lassen.
Und natürlich das iFrame dafür weglassen.

Dem iFrame kannst du sagen, dass er das Scrolling + die Rahmen weglassen soll. Aber das mit der Höhe bekommt man so leicht nicht weg, dort gibt es Hacks mit Hilfe von Javascript. Nur mache lieber das mit dem aus und dem einblenden.
Damit hast du weniger Probleme und du bist nicht drauf angewiesen, dass der Besucher Javascript braucht.
 
Lieber zwingt man den User zu JavaScript, als darauf zu bauen dass er :target beherrscht. JavaScript ist, entgegen der Mindermeinung einiger Paranoiker, eine elementare Webtechnologie und zwingend nötig, um elegante Problemlösungen zu bieten.

Was gegen :target spricht:
- ~10% Marktanteil des IE8 (zzgl. Reste an IE6&7) in Deutschland... und das schließt gewisse Zielgruppen nicht mit ein. Bei Behörden oder großen FIrmen kannst du eher von 30%+ ausgehen
- :target manipuliert den Verlauf und die URL, nicht immer ist dieses Verhalten erwünscht
- :target ermöglicht "versteckten" Content auf Seiten, etwas das Google gar nicht mag
- :target kann nicht asynchron arbeiten. Viel Last bei User und Server, oftmals für nix und wieder nix

Asynchrones JavaScript ist der perfekte Weg, um Inhalte dynamisch in Zielbereiche zu laden und TROTZDEM barrierefrei und suchmaschinenfreundlich zu bleiben.
 
Die Hauptfrage bleibt bestehen, wenn man anstelle auf Frames auf einen Aufbau per Div Containern setzt.
Welche vorgesehene Funktion ersetzt die Targetfunktion oder ermöglicht den Aufruf von neuen Informationen / Seiten in diesem Layout? Javascript oder doch etwas anderes?
 
Suxxess schrieb:
Welche vorgesehene Funktion ersetzt die Targetfunktion oder ermöglicht den Aufruf von neuen Informationen / Seiten in diesem Layout?
Da Target, wie alle CSS-Fähigkeiten, NICHTS anderes kann als die DARSTELLUNG zu manipulieren (nicht aber das DOM), muss/kann man Target nicht ersetzen. :target würde z.B. bei Wikipedia-Artikeln Sinn machen, da dort sehr viel mit Anchors gearbeitet wird. Man könnte den aktuell gewählten Absatz zusätzlich farblich hervorheben.

Selbst etwas einfaches wie n Akkordeon kannst du aber mit :target schon nicht sinnvoll umsetzen. Warum? Weil ein Browser ohne :target-Support wichtige Inhalte nie sichtbar präsentieren würde, es gibt kein Fallback.

Javascript oder doch etwas anderes?
Da die Hauptaufgabe von JS nun einmal die DOM-Manipulation ist: die Antwort lautet immer und überall JS, egal in welcher Form du Interaktivität in eine Seite einbauen willst, vor allem aber dann, wenn du diese Interaktivität ohne einen kompletten Page Reload erlangen willst.

Es mag einigen NoScript - Paranoikern nicht gefallen, aber der barrierefreie Einsatz von JavaScript ist das EINZIGE Mittel, um Webseiten komplexer, dynamischer und vor allem sogar schneller zu machen.
 
Zurück
Oben