Inhalte einbinden mittels iFrame??

[Ranger1281]

Moin, Moin,

so, ich habe mal wieder ein bisschen Zeit, mich um mein kleines Webprojekt zu kümmern.

Zuletzt haben wir ja hier diskutiert:

Zitat von Ranger1281

-Themenüberschrift: Linkbuttons via CSS3 definieren und einbinden-

ich bin seit geraumer Zeit dabei mir eine kleine Website zu erstellen...

Nun möchte ich meine Inhalte in die Site einbinden. Im o.g. Thema habe ich dieses ja schon angrrissen und möchte hier in diesem neuen Thema zunächst grundsätzlich wissen

- ob Iframes überhaupt noch üblich oder zumindest valide sind...
-welche sinnvollen Alternativen es gibt...
-wo liegen die jeweiligen Vor- und Nachteile

Javascript möchte ich hier direkt ablehnen, da habe ich NULL Kenntnisse und auch nicht die Zeit mich da reinzuwurschteln...

Im o.g. Thema wurde PHP angedcht. Da habe ich mich mal ein ganz kleines bisschen mit befasst und könnte mir PHP als "Plan B" vorstellen, ich will ja auch ein bisschen was lernen...

[picron]

Hallo Ralf,

ich kann dir zwar hier nicht helfen, wollte aber anmerken, dass es dir unter http://www.ralfschepp.de/rs/index.html
beim scrollen das Layout zerhackt.
Ich benutze Firefox 12.
Viel Erfolg!
Gruß Ronny

[Pixelverwender]

Wenn es Deine eigene Website ist und es um Deine eigenen Inhalte geht, verstehe ich nicht, warum Du <iframe> überhaupt in Betracht ziehst.
Sinnvollerweise setzt man die Inhalte per HTML direkt in die jeweilige Seite.
Oder habe ich die Frage völlig missverstanden?

[Ranger1281]

Zitat von Pixelverwender

Wenn es Deine eigene Website ist und es um Deine eigenen Inhalte geht, verstehe ich nicht, warum Du <iframe> überhaupt in Betracht ziehst.
Sinnvollerweise setzt man die Inhalte per HTML direkt in die jeweilige Seite.
Oder habe ich die Frage völlig missverstanden?

Hallo,
grundsätzlich geht es mir dabei um die Übersichtlichkeit der einzelenen HTML- Dateien.
Es werden final wohl etwa 10 bis 15 Unterseiten entstehen, welche zum Teil mit viel Bildmaterial gefüllt werden. Die eine oder andere Galerie wird wohl auch hinzu kommen.
Wenn ich nun jede Seite als vollständige Seite erstelle, muss ich ja alle globalen Codes mit in diese Datei aufnehmen. Bei einer Änderung im globalen Bereich bedeutet dies, dass ich diese Änderung auf allen Seite durchführen muss (CSS- Änderungen sind natürlich nicht betroffen, da jede Seite ihre eigene CSS bekommt).
Wenn ich das ganze nun einbinde, egal ob mit iFrame oder etwas anderem, sind die Quellcodes zum einen erheblich schlanker und zum anderen muss ich eine Änderung immer nur 1x durchführen.
So ist zumindest mein Wissensstand...

Also nochmal kurz und knapp: Einbinden möchte ich schon gerne, die Frage ist nur wie??

Hallo Ralf,

ich kann dir zwar hier nicht helfen, wollte aber anmerken, dass es dir unter http://www.ralfschepp.de/rs/index.html
beim scrollen das Layout zerhackt.
Ich benutze Firefox 12.
Viel Erfolg!
Gruß Ronny

Danke für den Hinweis. Dies ist allerdings die alte Version der Seite und nur hier für die Diskussion im Netz...

[Pixelverwender]

Wenn, dann eher anders herum, also die auf allen Seiten gleich vorhandenen Elemente mittels php (Stichwort „include“) einbinden, damit bei globalen Änderungen nur eine Datei verändert werden muss. Die Seiten ansonsten ganz normal getrennt aufbauen, wie Du es ja sowieso machst.

Also jede Seite als php-Datei anlegen, mittels

include (meine-statischen-elemente.php)

Deine gleichbleibenden Elemente (die Du in der Datei meine-statischen-elemente.php) abgelegt hast) einfügen (inkludieren, daher der Begriff) und anschließend jeweils den HTML-Code Deines Inhalts folgen lassen.
Iframes sollte man heute nicht mehr einsetzen.

[Ranger1281]

Ok, das heisst also meine php- Kenntnisse wieder rauskramen...

Wenn ich das soweit richtig in Erinnerung habe, kann eine php- Datei auch HTML- Inhalte haben oder besser php ist ja eh im HTML- Grundgerüst eingebunden. Somit kann ich meine bisherigen HTML- Dateien doch zunächst einfach in php- Dateien ändern oder?

Hmm, ich glaube ich werde mir mal die Tuts über php ansehen und meine Kenntnisse vertiefen /auffrischen...

[Pixelverwender]

Zitat von Ranger1281

Ok, das heisst also meine php- Kenntnisse wieder rauskramen...

Brauchst Du gar nicht viel dafür

Zitat von Ranger1281

Somit kann ich meine bisherigen HTML- Dateien doch zunächst einfach in php- Dateien ändern oder?

Ja, das ist richtig.

[Ranger1281]

also mal Step by Step:

meine Index.html benenne ich um in index.inc.php

In meine Unterseite z.B.: garten.php füge ich diese dann wie folgt ein:

<body>
<?php
    include "index.inc.php";
..... restlicher HTML-Code...
?>

Das ist alles?
Die CSS-Anweisungen werden wie gehabt festgelegt, die globalen Anweisungen werden über die index.inc.php mit übernommen?

----------
Edit:
uuups... ich sollte vieleicht mal meine XAMPP- Installation wiederbeleben, sonst ist das etwas schlecht mit lokalen php- Dateien....
Naja, dann ans Werk...
----------

[Ranger1281]

N'Abend,

jaa, was soll ich sagen.... also irgendwas geht... nur irgendwie nicht so, wie ich will...

Also:
Xampp habe ich natürlich mittlerweile installiert...
die Index.html habe ich in index.php umbenannt...
eine garten.php mit dem include ist angelegt und mit Text ausgestattet.

in der CSS habe ich einen "Main" Bereich definiert und den Link mit dem entsprechenden target="main" ergänzt
Den Button im vorhanden Menü in "Unser Garten" geändert und die ID in der menu.css und in der index.php von bbla auf bgarten geändert.
in die Definition des #main habe ich noch "overflow: scroll;" eingefügt.

Das Ergebnis:

Mein Gartenbutton im Hauptmenu ist nach oben über den Namebutton "Hauptmenu" gewandert, die Schrift ist nicht mehr Comic Sans MS...

Mein Text scrollt über alles andere, trotz overflow: scroll;...

Testbrowser: Firefox, Safari, Chrome und IE, alle in der aktuellen Version...

Der Link in meiner Sig ist auf die index.php aktuallisiert und Seite ist in der aktuellen Fassung im Netz...

[RDesign]

Wenn du willst pack mal ein zwei Dateien in eine rar sprich die index.php und eine Textdatei. Ich werde dir dann genau dabei schreiben wo und was du machen sollst.
Sofern du dies möchtest

[KireSchattenhaar]

Also, ich weiß ja dass Du kein JS einbinden willst, aber ich würd Dir das durchaus empfehlen. Du kannst Inhalte recht simpel via eines JS-Befehls in ein Div einladen lassen, aus anderen Dateien heraus, egal ob aus einer .htm, .html, .php oder was weiß ich.

Kommen wir zur aktuellen Problematik:
hast Du die html-Dateien, die Du einladen willst, als "intakte" Webseite angelegt? Also so mit html- und body-tag? Das ist wäre fatal, DENN:

Du musst Dir das Prinzip, was hier angewendet wird wie ein "Snippet", einen Schnipsel vorstellen: Du hast eine Website und setzt das include in den Quelltext. Wenn der Browser das lädt, wird dir der komplette Inhalt der angegebenen Datei reingeklatscht. Wenn da Elemente sind, die in der Website nichts zu suchen haben (2. html-Tag, 2- Bodytag) zerschießt es Dir natürlich Alles...

[Ranger1281]

Zitat von KireSchattenhaar

Kommen wir zur aktuellen Problematik:
hast Du die html-Dateien, die Du einladen willst, als "intakte" Webseite angelegt? Also so mit html- und body-tag? Das ist wäre fatal, DENN:

Du musst Dir das Prinzip, was hier angewendet wird wie ein "Snippet", einen Schnipsel vorstellen: Du hast eine Website und setzt das include in den Quelltext. Wenn der Browser das lädt, wird dir der komplette Inhalt der angegebenen Datei reingeklatscht. Wenn da Elemente sind, die in der Website nichts zu suchen haben (2. html-Tag, 2- Bodytag) zerschießt es Dir natürlich Alles...

Hallo,
ok, das erklärt einiges...
also vorweg, ja ich habe meine komplette index.html mit HTML-, HEAD-, BODY-Tag und allem anderen in eine php- Datei umbenannt....
Dann habe ich die Inhaltsseite "garten.php" erstellt, ebenfalls mit vollständigem HTML- Code und eben der include-Anweisung für die index.php...
Dann frage ich mal direkt:
was brauche ich und was nicht?

Also die index.php wird in die garten.php geladen....

Achso, bei php ist es ja schlecht mit dem Quelltext:

!DOCTYPE html>

<html>
 <head>
  <title>Familie Schepp</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="author" content="Ralf Schepp" />
  <meta name="robots" content="index, follow" />
  <meta name="language" content="de" />
  <meta name="DC.rights" content="Ralf Schepp" />
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" href="css/global.css" type="text/css" />
  <link rel="stylesheet" href="css/header.css" type="text/css" />
  <link rel="stylesheet" href="css/menu.css" type="text/css" />
  <meta http-equiv="date" content="17.05.2012" />
  <meta http-equiv="cache-control" content="no-cache" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="content-style-type" content="text/css; charset=utf-8" />
  <meta http-equiv="content-script-type" content="text/javascript; charset=utf-8" />

 </head>
 <body>
 <!-- Body -->
  <div id="body">

  <!-- Header -->
  <div id="topbox">

   <!-- Bilder im Header -->
  <div id="head_pic1">
   <img src="img/Ralf360x360.jpg" alt="Ralf" border="0" width="120" height="120" />
  </div>

  <div id="head_pic2">
   <img src="img/Katja360x360.jpg" alt="Katja" border="0" width="120" height="120" />
  </div>

  <div id="head_pic3">
   <img src="img/Page360x360.jpg" alt="Page" border="0" width="120" height="120" />
  </div>

  <div id="head_pic4">
   <img src="img/Pimpsi120x120.jpg" alt="Pimpsi" border="0" width="120" height="120" />
  </div>

  <div id="head_pic5">
   <img src="img/Leon360x360.jpg" alt="Leon" border="0" width="120" height="120" />
  </div>

  <div id="head_pic6">
   <img src="img/Jonas360x360.jpg" alt="Jonas" border="0" width="120" height="120" />
  </div>

  <div id="head_pic7">
   <img src="img/Maray360x360.jpg" alt="Maray" border="0" width="120" height="120" />
  </div>

  <div id="head_pic8">
   <img src="img/Ponys120x120.jpg" alt="Bonito & Maya" border="0" width="120" height="120" />
  </div>
  </div>
  <!-- Textlogo im Header -->
  <div id="tlogo">Familie Schepp</div>


  <!-- Menu links -->
  <div id="menuleft">
  <div id="hauptbutton">
   <ul id="namebutton">
    <li>Hauptmenu</li>
   </ul>
  </div>

  <!-- Navigation links -->
   <ul id="navleft">
    <li><a href="index.php" id="bhome">Startseite</a></li>
    <li><a href="garten.php" id="bgarten" target="main">Unser Garten</a></li>
    <li><a href="index.php" id="bbla1">3. Seite</a></li>
    <li><a href="index.php" id="bbla2">4. Seite</a></li>
    <li><a href="index.php" id="bbla3">5. Seite</a></li>
    <li><a href="index.php" id="bbla4">6. Seite</a></li>
    <li><a href="index.php" id="bbla5">7. Seite</a></li>
    <li><a href="index.php" id="bbla6">8. Seite</a></li>
    <li><a href="index.php" id="bbla7">9. Seite</a></li>
   </ul>
  </div>
  <!-- Menu oben -->
  <div id="menutop">

  <!-- Navigation oben -->
   <ul id="navtop">
    <li><a href="index.php" id="bimp">Impressum</a></li>
    <li><a href="index.php" id="bkon">Kontakt</a></li>
   </ul>
  </div>
  </div>

  <!-- main - Inhaltsbereich -->
  <div id="boxmain">
   <div id="main">
   </div>
  </div>
 </body>
</html>

die CSS kneife ich mir erstmal, da scheint soweit alles zu passen, soll heissen es ich soweit alles an der richtigen Stelle, nur eben der Text liegt über allem anderen und der eine Button ist nach oben verschoben, aber eins nach dem anderen....

--------
Edit:
Alles zurück!!!!
Ich Vollpfosten habe beim umbenennen und kopieren der Dateien in den lokalen Webserver- Ordner die CSS- Dateien im HTML- Editor nicht geändert!!!
Deshalb wurden meine Änderungen nicht von der php- Datei übernommen...

Asche auf mein Haupt....
---------

[Ranger1281]

Zitat von RDesign

Wenn du willst pack mal ein zwei Dateien in eine rar sprich die index.php und eine Textdatei. Ich werde dir dann genau dabei schreiben wo und was du machen sollst.
Sofern du dies möchtest

Danke, ist nett gemeint von Dir, aber nicht im Sinne des Erfinders... tippen muss ich schon selbst....
Ich will ja nicht jedesmal wieder fragen müssen, sondern bei der ganzen Aktion auch was lernen.

[MegaAdi]

Ich klinke mich mal mit ein

Also was du brauchst: eine index.php (haste ja schon) in der das ganze grundgerüst der Webseite aufgebaut ist:

<html>
  <head>
    <title>NAME DER WEBSITE</title>
  </head>
  <body>
    ->>>> HIER SOLLEN JETZT DIE VERSCHIEDENEN SEITEN REIN!!! <<<<-
              Also setzen wir hier schon unsere erste php-Variable:
              <?php
                if(isset($_REQUEST['include']) && $_REQUEST['include']!="main")
                  include('/subpages/'.$_REQUEST['include'].'.html');
                else
                  include('/subpages/main.html');
              ?>
  </body>
</html>

du brauchst jetzt nur noch deine weiteren Seiten als reine HTML-Seiten machen die NUR den Inhalt enthalten der in der Webseite angezeigt werden soll. Also nehmen wir als startseite eine main.html:

<h2>Herzlich willkommen</h2>
Willkommen auf meiner Homepage

Den Text kannst du ganz normal mit Html und CSS formatieren.

machen wir zum Spaß noch eine zweite HTML-Datei galliery.html:

<h2>Das sind meine Bilder</h2>
<img src="http://www.psd-tutorials.de/forum/46_x-html-css/46_x-html-css/46_x-html-css/..." /> blaa blaa blubber blaa

wenn du jetzt deine Seite aufrust und nur die index.php aufrufst wird die datei main.html aus dem Verzeichnis "subpages" ausgelesen und in die Seite geladen. Wenn du jetzt z.B. in die Gallerie möchtest rufst du deine Seite so auf: index.php?include=gallery

Wenn du fragen hast, stell sie und ich hoffe ich konnte es dir verständlich erklären.

Gruß Adrian

EDIT: Ich erklär dir nochmal genau den PHP-Abschnitt:

if(isset($_REQUEST['include']) && $_REQUEST['include']!="main")
ist in die Adressleiste index.php?include eingegeben und der wert von include NICHT main DANN:
include('/subpages/'.$_REQUEST['include'].'.html');
binden wir die Datei ein, welche ich über index.php?include= abrufen möchte aus dem verzeichnis "Subpages". Das du nicht index.php?include=gallery.html schreiben musst, habe ich das html gleich mit in den Code aufgenommen.
Sollte entweder kein index.php?include eingegeben sein sondern index.php oder index.php?include=main eingegeben wurde, dann binden wir die main.html aus dem Verzeichnis "subpages" ein:
else
include('/subpages/main.html');

[Ranger1281]

Hallo Adrian,
danke für die Infos. Ich habe es aber schon hinbekommen. Die Sache mit der Galley ist jedoch interessant, nur werde ich in der nächsten Zeit, beruflich bedingt, wohl nicht allzuoft zum coden kommen, so dass ich mich bei Bedarf wieder melde....
Aber nochmal:
Danke an alle!!!