Hallo Ihr,

ich habe mir endlich einen Ruck gegeben und begonnen, mich mit css auseinanderzusetzen. Nach vielem Lesen, Lernen und Probieren habe ich es mittlerweile auch geschafft, ein meinen Vorstellungen entsprechendes Layout zu entwerfen und es umzusetzen. Lacht nicht, jeder fängt mal an, und ja, Ihr habt Recht, ich hätte es eher tun sollen.

Nun möchte ich meinen bestehenden Content Stück für Stück entrümpeln und einfügen. Und schon stehe ich vor einem Problem, für dass ich auch nach langer Suche und heiß gelaufenem Google keine Lösung fand.

Nach meinem jetzigen Kenntnisstand müssen auf jeder Seite, die ich zeige, das Grundgerüst mit <div> und </div> aufgebaut und die Zwischenräume mit Inhalt gefüllt werden. Das finde ich ziemlich umständlich und unübersichtlich, weil sich ständig wiederholend und immer gleich bleibend. Meine Idee war daher, das <div>-Grundgerüst auszulagern und per php-include in jede Seite einzubinden.

Nun mein Problem: Geht das? Wie kann ich in einer ausgelagerten Datei die Positionierung der <divs> festlegen und - darauf kommt es an - dort zwischen <div> und </div> auf Inhalt verweisen, der nach dem includen erst eingefügt wird? Auf diese Weise bräuchte ich lediglich Seiten mit Inhalt erstellen, die irgendwo im Kopf das für alle Seiten gültige Grundgerüst includen.

Denke ich zu kompliziert? Gehe ich das Problem falsch an? Wie macht Ihr das, wenn Ihr hundert Seiten mit dem gleichen Layout versorgt und nicht in jeder der Seiten die gleichen <div>-Angaben schreiben wollt, wobei dann bei einer Änderung jede einzelne Seite überarbeitet werden müsste?

Ich gebe zu, dass ich css-Anfänger bin. Aber ich mache Fortschritte.

Liebe Grüsse
Mondschatten


---
Schwarz kann auch glänzen.

Du verwirrst mich . . . . .

Du hast die Lösung doch schon genannt . . . einfach den sich wiederholenden Code in ein eextra PHP datei auslagern!

---
cya MCM

[my page] [about me]

[Je mehr Bürger mit Zivilcourage ein Land hat, desto weniger Helden wird es einmal brauchen]
[by Franca Magnani]

Hallo MCM,

nun ja, das ist freilich eine Lösung, und daran habe ich auch schon gedacht.

Aber... dann müsste ich einen include am Anfang jeder Seite haben (nämlich alles einleitende bis zum <div> für den content), dann käme eben jener Inhalt und einen weiteren include bräuchte ich am Ende jeder Seite (nämlich den </div> und alles dahinter). Das geht so lange gut, bis ich einen zweiten Container habe, den ich füllen möchte...

Ich hatte mir vorgestellt, dass es etwas gibt wie:

--- datei layout ----
<div container1>
#inhalt1
</div>
<div container2>
#inhalt2
</div>

--- datei inhalt ----
#inhalt1 =
#inhalt2=

Das war jetzt nur ein Gedankenprotokoll, rein semantisch und jenseits jeder Programmiersprache. Aber die Frage bleibt: Wie setzt man sowas um?

Viele Grüße
Mondschatten


---
Schwarz kann auch glänzen.

Ich muss nochmal was loswerden...

...weil ich das Gefühl habe, dass ich irgend etwas falsch verstehe. Überall lese ich, dass man mit css auf wunderbare Art und Weise das Layout vom Inhalt trennen und komplett auslagern kann.

Nach meinem Verständnis trifft das doch gar nicht zu - oder ich habe eben irgendwo etwas falsch verstanden. Wenn das so wäre, würde sich vielleicht auch meine Eingangs gestellte Frage erledigen.

Also ein Beispiel zum Veranschaulichen:
Meine Inhaltsdatei sieht beispielsweise wie folgt aus:



Die Formatierung der Boxen habe ich in einer externen css-Datei festgelegt. Die Schachtelung der <divs> nimmt jedoch trotzdem Einfluss auf deren Position. Ich muss also, wenn das Layout auf jeder Einzelseite gleich sein soll, immer die gleiche Schachtelung notieren. Wo also ist denn nun die Trennung von Layout und Content? Und was hilft mir alles css, wenn ich zum Ändern des Layouts in hundert Einzelseiten die Schachtelung ändern muss?

Kopfrauchende Grüße
Mondschatten

---
Schwarz kann auch glänzen.

Es kommt natürlich auch immer ein bisschen auf deinen CSS-Code an, wie sensibel der auf Vertauschungen etc. im HTML reagiert. Die Trennung von Layout und Inhalt ist aber etwas anders gemeint.

In deinem HTML-Code sollte bei so einem Design nichts mehr stehen, was zum Grundgerüst deiner Seite gehört. D.h. zum Beispiel wenn du eine Headergrafik auf deiner Website hast, die zum Grundsätzlichen ayout gehört, dann hat die ja nichts mit dem speziellen Seiteninhalt zu tun. Ein Fehler wäre es also diese Datei per <img> einzubinden. Getrennt vom Inhalt hast du es, wenn du sie per CSS z.B. als Hintergrund eines Blockelements einfügst.

Etwas genauer zu deiner Frage:
Wenn du auf deiner Seite zwei Boxen hast, die untereinader stehen, dann kann man doch auch davon ausgehen, dass man selbst ohne Layout die obere Box zuerst lesen sollte. Deshalb muss diese natürlich im Code auch oben stehen. Ein Stichwort ist hier bei "Linearisierbarkeit". Wenn du die Webdeveloper Toolbar in Firefox benutzt und du da dann mal das CSS auf deiner Seite komplett abschaltest, sollte deine Seite mit den Standardformatierungen, die der Browser benutzt, noch völlig sinnvoll aufgebaut sein. Weil genau so ist die Seite linearisiert, da einfach alle Blockelemente untereinander angezeigt werden.

Ich hoffe das hilft etwas. ;)

---
Take a look here!
Lichtblick - Einblick - Ausblick

Hallo languitar,

vielen Dank für Deine Erklärungen. Sie haben mir tatsächlich wieder ein paar Schritte vorwärts geholfen.

Ich werde mich wohl von der Vorstellung lösen müssen, auf den Seiten mit dem Inhalt lediglich den Inhalt der Teilbereiche (Container) stehen zu haben und die Position der Teilbereiche (Container) extern und damit leicht veränderbar steuern zu können. Schade, ausgerechnet das hatte ich mir mit einem Umstieg auf css erhofft.

Vielleicht hatte ich es auch aus alter Programmiergewohnheit zu sehr auf Modularität und größte Vereinfachung wiederkehrender Dinge abgesehen. Wie auch immer. Schade.

Viele Grüße
Mondschatten

---
Schwarz kann auch glänzen.

Naja, wenn das wirklich losgelöste Element sind, kannst du da evtl noch was durch absolute Positionierungen erreichen, aber das wäre nicht so schön. Solange die Inhaltlich in den Verlauf der Seite gehören, musst du sie auch so platzieren.

---
Take a look here!
Lichtblick - Einblick - Ausblick