Links aus der Navigation in einem CSS Iframe öffen

[TerrorCrewGermany]

Aloha,
Also zur Frage, Ich suche eine möglichkeit wie ich die links aus der Navigation in einem mit CSS generierten iframe öffnen kann. Also quasi alles in dem css iframe läd wie es auch machen würde in nem normalen iframe...

Bitte möglichst verständlich =) beschäftige mich erst seit kurzem sehr intensiv mit dem Thema Webdesign, Also tiefer in die Welt Web2.0 vorstoßen. Lerne derzeit auch nebenbei PHP. (Wo mir hier in den Tuts auch geholfen wird)
Aber das is ein anderes Thema jetz =)

 

[sokie]

AW: Links aus der Navigation in einem CSS Iframe öffen

mit CSS ist es nicht möglich irgendwelche Element zu 'generieren'. Das Anlegen von Elementen (also auch eines Iframes) geschieht im html.

Aloha,
Lerne derzeit auch nebenbei PHP. (Wo mir hier in den Tuts auch geholfen wird)
Aber das is ein anderes Thema jetz =)

nein, das ist nicht wirklich ein anderes Thema. Web 2.0 heisst ja im Prinzip nichts andres als die verfügbaren Techniken geschickt zu kombinieren.

 

[hedoo]

AW: Links aus der Navigation in einem CSS Iframe öffen

Hallo,

du hast deinem <iframe> einen Namen mitgegeben?
Bsp.: <iframe src="frame.html" width="400" height="400" name="inhalt">

Um den Link im iframe anzuzeigen kannst du genauso wie bei "normalen" Frames verlinken:

<a href="irgendwas.html" target="inhalt">Dein Link</a>

 

[TerrorCrewGermany]

AW: Links aus der Navigation in einem CSS Iframe öffen

Hat der noob mehr ahnung als die pro´s?
CSS - IFRAME - IFRAMES mit CSS erstellen - Beispiel 1

da habe ich die anleitung her und es klappt auch sehr gut ansich.
Nur was mir fehlt und laut google.de auch machbar sein soll das man in diesem "frame"
auch inhalte öffnen kann

 

[hedoo]

AW: Links aus der Navigation in einem CSS Iframe öffen

Bei der Beispielsseite werden keine Iframes beschrieben, sondern nur ineinander verschachtelte Div-Container, von denen einer zufällig die id="iframe" bekommen hat.

"Richtige" Iframes werden in html angelegt, wie oben beschrieben.
Den Inhalt von einem <div> austauschen geht meines Wissens nur über php.

Wenn du also html Seiten in einem iframe darstellen willst, lege ihn über html an.



hedoo

 

[TerrorCrewGermany]

AW: Links aus der Navigation in einem CSS Iframe öffen

also nochmal ..
Ich wollte keinen normalen iframe haben ..
und ja es sind mehrere verschachtelte divs .. die den namen iframe bekommen haben ja ...

ABER, es geht das diese divs im endprodukt aussehen wie ein normaler iframe, vorgegebene größen etc
samt scrollbar usw ...
und da hätte ich gerne das der inhalt darin geladen wird meinet wegen mit php

jedoch würd ich gerne auf normale iframes wie im ersten post schon gesagt verzichten und das mit css machen.. und wie gesagt laut google ist es mittels php möglich dort inhalte drinne zu laden

 

[sokie]

AW: Links aus der Navigation in einem CSS Iframe öffen

Dass es da nun so einen Klärungsbedarf gibt, ist schon ein guter Grund dafür, mit den Begrifflichkeiten etwas sorfältiger umzugehen. (übrigens wenn der Bäcker um die Ecke sein "Brot" jetzt "Auto" nennen würde, bekäme er es auch nicht zum Preis eines Autos verkauft).
Vielleicht bezeichnet man das ding besser als scrollbox, oder so in der Art, damit keine Verwechslungen aufkommen.- es hat mit der funktion eines iframes einfach gar nichts zu tun.
Im weiteren ist die Seite von der diese Sache stammt zumindest im CSS Bereich (den Rest sehe ich mir einfach nicht an) mit vorsicht zu geniessen, Newbies sollte man davon sogar deutlich abraten.
mit css lassen sich keine Elemente (welchen Namens auch immer) erstellen.

zum zweiten - in einen bestehenden Div Inhalte zu verändern, zu laden, oder wie auch immer ist mit php allein nicht möglich - auch hier gibts im Internet eine ganze reihe schwammiger Erklärungen, die zu diesem Irrtum führen. Zu deisem Zweck ist javascript das Mittel der Wahl.

mit php kann man zB eine innerhalb einer Seite Codeblöcke einsetzen, die zB je nach übergebenen parametern die Seite beim Laden mit anderen Inhalten anzeigt. (dazu könnten zB auch inhalte per 'include' eingeschlossen werden). Die Seite muss aber neu geladen werden.

 

[ak56Lk]

AW: Links aus der Navigation in einem CSS Iframe öffen

Hi TerrorCrewGermany,

nein, noobie hat nich mehr Ahnung als die Pros Wie gesagt, mit CSS kann man keine Elemente generieren/erstellen. Auch deine Beispielseite kann/macht das nicht. Es sind Elemente, die in HTML "erstellt" werden und mit CSS "gestylt" werden. Hört sich ein wenig klugscheißerisch an, ist aber halt so.

Um ein Element zu befüllen, gibt es verschiedene Möglichkeiten.
PHP: Die einfachste Variante ist mit include. Um etwaige Fehler von vornherein auszuschliessen, setze ich lieber include_once ein.
Bsp.:

<div id="iframe">
<?php include_once($_GET['site'] .'.php'); ?>
</div>

Die andere Möglichkeit mit PHP wäre vorher zu buffern.
Bsp.:

ob_start();
include_once($_GET['site'] .'.php');
 
$page = ob_get_contents();
ob_end_clean();
 
//Die gesamte Seite steht nun in der Variablen $page
$replace = "Hallo Welt!";
preg_replace('/<div id="iframe">(.*)</div>/', $replacement, $page);
//Ungetestet! Lasse mich gerne korrigieren

Wenn du allerdings keinen Seitenreload wünscht, wäre der Einsatz eines richtigen IFrames besser. Diesen kann man ja so stylen, dass man es nicht als IFrame erkennt.
Bsp.:

<a href="deine_datei.html" target="iframe">Link</a>
<iframe name="iframe"></iframe>

Bei einem Klick auf den (Hyper-)Link wird dieser in dem (I-)Frame mit dem Namen "iframe" geladen.

IFrame ist aber nicht gewünscht. Seitenreload hast du nichts zu gesagt. Wenn du also keinen Seitenreload wünscht, ist Javascript das nächste Gebiet für dich.
Bsp. ohne Framework:

<div id="iframe"></div>
 
<script type="text/javascript">
document.getElementById("iframe").innerHTML = 'Hallo Welt!';
</script>

Mit Prototype-Framework:

<div id="iframe"></div>
 
<script type="text/javascript">
$('iframe').update('Hallo Welt!');
 
//Oder mit AJAX Inhalte vom Server nachladen
new Ajax.Updater('iframe', 'deine_datei.html');
//Oder das befüllen des Elements selbst in die Hand nehmen
new Ajax.Request('deine_datei.html', {
  onComplete: function(transport) {
    $('iframe').update(transport.responseText);
  }
});
</script>

Ich denke, du wirst nicht alles verstanden haben, aber du hast ja nun einige Stichwörter zum Googlen

mfg
ak