Inhalte in CSS-Layout einbinden

Moin!!

Ich möchte endlich mal von meinen klassischen Tabellen-Layouts umsteigenden und meine Internetseiten per CSS layouten.

In den Tabellen-Layouts habe ich meistens per iFrame das Menü, eine „News-Leiste“, o.ä. eingebunden. Wenn ich jetzt schon endlich mal anfange sauber zu coden, möchte ich natürlich auch sauber die Inhalte einbinden. Wie mache ich das denn am „saubersten“, ohne natürlich die entsprechenden Inhalte auf jeder Seite ändern zu müssen? Iframe? Include?

LG N

Moin,

von Frames sollte man lieber die Finger lassen, die haben zu viele Nachteile, als dass man sie auf einer normalen Website einsetzen sollte.

Du hast es selber schon genannt. Sowas machst Du am besten mit serverseitigem include. Ob mit SSI, PHP oder jeder anderen Programmiersprache ist eigentlich egal.

Und noch ein Tipp: „CSS-Layout“ heißt auch und vor allem, HTML neu zu lernen. Denn wenn Du in Zukunft Inhalt und Layout strikt voneinander trennst, kannst Du HTML endlich der ursprünglichen Bestimmung zuführen: Der semantischen Auszeichnung des Inhalts.

CSS-Layout funktioniert nur, wenn Du eine Basis aus validem und semantisch sinnvollem HTML hast, und letzteres funktioniert nur, wenn Du auch Inhalt hast. Deswegen ist die optimale Vorgehensweise für „CSS-Layout“ die:

  1. Inhalt schreiben
  2. Inhalt semantisch sinnvoll mit HTML auszeichnen und validieren
  3. Layout und Design mit CSS

Und lass Dich nicht von den Spezies beeinflussen, die Dir erklären, Du müsstest statt Layout mit Tabellen jetzt Layout mit s machen. Das ist genauso falsch. Denn Layout macht man ja mit CSS, nicht mit HTML und ist ein HTML-Tag.

Mehr Infos? Details? Fragen? Stell sie!

Grüße und viel Erfolg,
-Efchen

Danke schon mal für die Antwort!!

von Frames sollte man lieber die Finger lassen, die haben zu
viele Nachteile, als dass man sie auf einer normalen Website
einsetzen sollte.

Meinst du damit nur „normale“ Framesets, oder sind iFrames auch Mist?

Du hast es selber schon genannt. Sowas machst Du am besten mit
serverseitigem include. Ob mit SSI, PHP oder jeder anderen
Programmiersprache ist eigentlich egal.

Das hatte ich mir schon gedacht…

Und noch ein Tipp: „CSS-Layout“ heißt auch und vor allem, HTML
neu zu lernen. Denn wenn Du in Zukunft Inhalt und Layout
strikt voneinander trennst, kannst Du HTML endlich der
ursprünglichen Bestimmung zuführen: Der semantischen
Auszeichnung des Inhalts.

CSS-Layout funktioniert nur, wenn Du eine Basis aus validem
und semantisch sinnvollem HTML hast, und letzteres
funktioniert nur, wenn Du auch Inhalt hast. Deswegen ist die
optimale Vorgehensweise für „CSS-Layout“ die:

  1. Inhalt schreiben
  2. Inhalt semantisch sinnvoll mit HTML auszeichnen und
    validieren
  3. Layout und Design mit CSS

Und lass Dich nicht von den Spezies beeinflussen, die Dir
erklären, Du müsstest statt Layout mit Tabellen jetzt Layout
mit s machen. Das ist genauso falsch. Denn Layout macht
man ja mit CSS, nicht mit HTML und ist ein HTML-Tag.

Hmmm, soll heißen, dass bspw. http://n-punkt.com zu viele divs hat? Wie binde ich die im css definierten Container denn ansonsten ins html ein? Oder habe ich dich da falsch verstanden?

Mehr Infos? Details? Fragen? Stell sie!

Habe ich und mache ich weiterhin… Danke!!

LG N

Du hast es selber schon genannt. Sowas machst Du am besten mit
serverseitigem include. Ob mit SSI, PHP oder jeder anderen
Programmiersprache ist eigentlich egal.

Noch was dazu…
Am sinnigsten wäre es doch dann, wenn ich quasi eine index-Seite mache und mir die geforderten „Unterseiten“ dann jeweils include. Wie kann ich denn dann am einfachsten sicherstellen, dass über Google nicht nur diese Unterseite gefunden wird und der User eine „nackige“ HTML-Seite sieht?

LG N

Meinst du damit nur „normale“ Framesets, oder sind iFrames
auch Mist?

Wenn Du mal über die Nachteile von Frames nachdenkst, wird schnell klar, dass sich das natürlich genauso auf iframes bezieht. Nicht umsonst sind auch Frames seit XHTML 1.0 Strict nicht mehr Bestandteil von HTML.

Hmmm, soll heißen, dass bspw. http://n-punkt.com zu viele divs
hat?

Auf jeden Fall! Das ist nur div-Suppe, die um keinen Deut besser ist, als Tabellenlayout. Semantik, wie es der Sinn von HTML ist, lässt diese Seite vollkommen vermissen. Zum Beispiel hat die Seite keine einzige Überschrift.
Ein ist keine Überschrift, sondern ein Textabsatz! Überschriften werden mit bis ausgezeichnet.

Wie binde ich die im css definierten Container denn
ansonsten ins html ein? Oder habe ich dich da falsch
verstanden?

Normalerweise geht es umgekehrt. Man definiert Layout und Design für die im HTML enthaltenen Elemente. Ich kann ja kein Stylesheet definieren, wenn ich noch keinen Inhalt habe, und somit nicht weiß, welche HTML-Elemente ich verwenden werde.

Und, CSS-Eigenschaften gelten zunächst mal für alle HTML-Elemente, nicht so wie früher die HTML-Attribute, die jeweils nur für bestimmte, und immer wieder andere Tags gültig waren. Wenn man z.B. ein Element absolut positionieren will (schlechtes Beispiel, weil man das für gewöhnlich ja nicht macht), kann man ein genauso positionieren, wie ein , ein - oder ein .

Am sinnigsten wäre es doch dann, wenn ich quasi eine
index-Seite mache und mir die geforderten „Unterseiten“ dann
jeweils include.

Man kann das auf zwei Weisen machen.
So wie Du das sagst, eine Seite mit Layout und im Content-Bereich das include. Die gewünschte Seite wird dann per Parameter in der URL übergeben. Da sollte man dann natürlich auch per mod_rewrite ansetzen, um die „hässlichen“ URLs zu maskieren. Außerdem wird das auch im Qualidator besser bewertet, logisch, die Anwender können sich sowas leichter merken.

Die Alternative ist, für jede Seite eine eigene Datei anlegen und all das, was gleich bleibt, includen, z.B. HTML-Header, Menü, Footer, usw. Dann kann man sich die Aktion mit dem mod_rewrite sparen. Ist nur ein geringfügiger Mehraufwand, möchte ich meinen.

Wie kann ich denn dann am einfachsten
sicherstellen, dass über Google nicht nur diese Unterseite
gefunden wird und der User eine „nackige“ HTML-Seite sieht?

Überleg Dir, wie Google überhaupt auf Seiten kommt. Nur durch Links. Wenn Du also nicht auf die „nackigen“ include-Seiten verlinkst (tust Du ja normalerweise auch nicht!), findet Google sie auch nicht. Und normalerweise weiß ja auch niemand, wie die Dateien heißen und in welchem Verzeichnis sie liegen, denn das include selbst sieht man im Browser ja nicht, und Du übergibst niemals(!) den kompletten Pfad zur zu includenden Datei, dann könnte man sich auf die Weise jede beliebige Datei ansehen, auf die Du Zugriff hast. Du übergibst nur einen Namen (oder eine ID) und entscheidest dann anhand des Namens, welche Seite das ist und in welchem Verzeichnis sie steht.

Google wird Dir da keine Probleme bereiten.

Hallo,

Noch was dazu…
Am sinnigsten wäre es doch dann, wenn ich quasi eine
index-Seite mache und mir die geforderten „Unterseiten“ dann
jeweils include. Wie kann ich denn dann am einfachsten
sicherstellen, dass über Google nicht nur diese Unterseite
gefunden wird und der User eine „nackige“ HTML-Seite sieht?

Anscheinend sucht Google nicht nach solchen nackten Seiten. Ich habe das hier http://www.esfparents.org/ so gemacht, und die „nackte“ http://www.esfparents.org/incl-esfp.php wird bei Google nicht gefunden.

Cheers, Felix

Anscheinend sucht Google nicht nach solchen nackten Seiten.

Ja, wie auch? Google kann ja nur durchsuchen, was verlinkt ist oder gemeldet wird. Und include() ist ja kein Link, sondern eine serverseitige Aktion, über die Google ja nichts weiß.

Wenn Du Deine nackten Seiten mal verlinkst, werden die auch bei Google auftauchen (falls Google die aufnimmt, obwohl das HTML-Grundgerüst nicht vorhanden ist).

Grüße,
-Efchen

Wenn Google die Seiten aber gar nicht findet, sind alle Inhalte darauf für den Suchenden ja auch unsichtbar. Ist ja auch nur bedingt optimal…

LG N

Wenn Google die Seiten aber gar nicht findet, sind alle
Inhalte darauf für den Suchenden ja auch unsichtbar. Ist ja
auch nur bedingt optimal…

Hä?

Du musst unterscheiden zwischen „Seiten“ und „Dateien“.

Eine „Seite“ sprichst Du über ihre URL an. Das kann sowas sein wie „index.php?pageindex=23“

Das include() lädt den Inhalt einer Datei und stellt ihn in die Seite an Stelle des include-Befehls. Das Ergebnis, eine statische HTML-Seite, wird an den Client (Browser oder Suchrobot) ausgeliefert.

Diese Seite wird im Browser angezeigt. Sie ist über eine URL eindeutig referenziert und wird von Dir sicher über Dein Menü verlinkt. In dieser Seite stehen auch die Inhalte der includeten Datei, nur weiß davon der Client nichts (weil das includen serverseitig abgelaufen ist).

Nicht verlinken sollst Du die Datei, die Du includen willst. Die kann auch ganz woanders im Filesystem stehen, wo sie über den Webserver nicht abrufbar ist (bei gekauftem Webspace normalerweise nicht möglich). Sie kann aber auch im Webspace stehen und theoretisch auch per URL abgerufen werden.

Deine Datei könnte $DOCUMENT_ROOT/includes/seite23.inc.php heißen.
Die Seite könnte /index.php?pageindex=23 sein.
Im include steht dann vermutlich: include($_SERVER[„DOCUMENT_ROOT“]."/includes/seite".$_REQUEST[„pageindex“].".inc.php");

Theoretisch könnte man über die URL „/includes/seite23.inc.php“ auch die Datei direkt abrufen, aber das würde ja niemand machen, diese Datei wirst Du nicht verlinken, und dann findet Google diese auch nicht, was ja auch so sein soll. Die Inhalte aber werden ja über die URL „index.php?pageindex=23“ ausgeliefert, der Inhalt der Datei wird vor dem Ausliefern an den Client in die Seite kopiert.

Ich hoffe ich konnte das Prinzip verständlich machen?

Ich hoffe ich konnte das Prinzip verständlich machen?

Ja, konntest du, Danke!! ;o)

LG N

versuch mal im header vom html-teil: