Ersatz von Frames durch CSS

[Spider67]

Hallo,

Die Startseite meiner Vereinshomepage (Fischereiverein KleinMeiseldorf) wurde in der Vergangenheit mittels Frames realisiert. Natürlich möchte ich den Webauftritt nach und nach modernisieren. Dazu meine Frage: Wie kann man das derzeitige Layout mit 3 Spalten (Navigation links, Inhaltsbereich in der Mitte und ein fixer Bereich rechts), sowie ein Banner mit Logo im Kopf der Seite und eine Fußzeile mit CSS realisieren? Gewisse CSS Kenntnisse sowie HTML Kenntnisse (auch bezüglich der neuen Elemente footer, nav, main etc.) sind vorhanden.

Wie kann ich zum Beispiel sicherstellen, dass die Links aus der Navigation aber auch jene im main Bereich der Seite immer im Main Bereich geöffnet werden und nicht in einem separaten Fenster?

Danke für Eure Hilfe.

 

[kkapsner]

Wie kann man das derzeitige Layout mit 3 Spalten (Navigation links, Inhaltsbereich in der Mitte und ein fixer Bereich rechts), sowie ein Banner mit Logo im Kopf der Seite und eine Fußzeile mit CSS realisieren?

Such' einfach mal nach "3 column layout css" da sollte genug kommen.

Wie kann ich zum Beispiel sicherstellen, dass die Links aus der Navigation aber auch jene im main Bereich der Seite immer im Main Bereich geöffnet werden und nicht in einem separaten Fenster?

Wenn du keine Frames mehr hast, hast du auch keinen "Main Bereich" mehr... oder willst du auf iFrames umsteigen?

 

[Spider67]

Nein, aber ich möchte, dass die Links im Inhaltsbereich in der Mitte erscheinen, den ich halt mit der ID #main auszeichne (als Beispiel, könnte genauso gut #Inhalt heißen)

 

[kkapsner]

Du willst also von Frames direkt zu einer JS/Ajax-gesteuerten Navigation? Würde ich zwar nicht machen, aber ist deine Entscheidung...

Um den Inhalt dann in dem entsprechenden Element anzuzeigen musst du dann hald das JS entsprechend bauen. Was ist denn jetzt genau deine Frage?

 

[Spider67]

Ich will ganz einfach wissen, wo beim dreispaltigen Layout die Links aus der Navigation angezeigt werden. Wenn ich nichts mache, und diese dann in einem separaten Fenster aufgehen, dann brauche ich doch auch keine Navigation mit float:left auszeichnen, wenn man nach einem Klick auf die Navigation diese ohnehin nicht mehr sieht. Oder verstehe ich da was falsch?

 

[tsseh]

was du eigentlich möchtest ist eine spa. dafür gibt es frameworks. allerdings ist das nichts was man mal auf die schnelle macht.
für dich vermutlich der einfachere weg, bau die navigation einfach in jede seite ein. über eine serverseitige sprache wie php ist das relativ einfach zu lösen. dann sieht es (fast) so aus, als wenn nur der content sich ändert, die navigation aber bestehenbleibt

 

[Spider67]

Das ist nicht das, was ich will, ich will ganz einfach eine fixe Navigation auf meiner Seite, die dauernd sichtbar ist, wie es das auf Millionen von Webpages gibt. Sollte das mit CSS3 nicht lösbar sein, was ich stark anzweifle, dann ist das eine deutlicher Rückschritt und ich bleibe bei den Frames, so wie sie sind. Wofür gibt es dann dreispaltige Layouts in allen möglichen Varianten (Display:table zB. oder flexbox), wenn ich dann die gefloatete Navigation im zB. linken Bereich der Seite nicht mehr sehe, wenn ich auf eine Link klicke.

 

[tsseh]

Wofür gibt es dann dreispaltige Layouts in allen möglichen Varianten (Display:table zB. oder flexbox), wenn ich dann die gefloatete Navigation im zB. linken Bereich der Seite nicht mehr sehe, wenn ich auf eine Link klicke.

wenn du sie nicht mehr siehst, ist sie einfach nicht auf der seite auf die der link zeigt.
* du bist auf seite 1.
* auf seite 1 ist ein link auf seite 2
* klickst du auf den link öffnet sich seite 2, anstelle von seite 1 siehst du also seite 2
* ist auf seite 2 nicht auch ein "dreispaltiges Layout in allen möglichen Varianten" siehst du auch kein "dreispaltiges Layout in allen möglichen Varianten"

- - - Aktualisiert - - -

in einer spa wird der klick auf den link mit js abgefangen und der content von seite 2 in einen bereich von seite 1 per js eingebettet

 

[Spider67]

Das bedeutet dann eigentlich, dass so eine Lösung (wie bei den Frames) mit CSS alleine nicht oder nur über Umwege (JS) möglich ist. Die Navigation auf jeder Seite einzubetten, ist bei der Anzahl an Seiten eine Aufgabe, die wahrscheinlich alleine einige Monate in Anspruch nimmt.

Alle anderen Lösungen, wo man die Navigation oder Teile davon z.B im Header sieht, sind also mit PHP oder JS oder anderen Frameworks realisiert? Verstehe ich das so richtig?

 

[tsseh]

Alle anderen Lösungen, wo man die Navigation oder Teile davon z.B im Header sieht, sind also mit PHP oder JS oder anderen Frameworks realisiert? Verstehe ich das so richtig?

entweder über eine serverseitige sprache wie php
How to automatically include your header, navigation, and footer on every page | A Padded Cell
oder clientseitig mit js z.b. über das framework angular
javascript - Adding navigation and footer to every page using AngularJS - Stack Overflow
oder durch kopieren in jede seite per hand, was aber die schlechteste lösung wäre

- - - Aktualisiert - - -

wobei noch zu sagen wäre, dass das ganze mit angular recht einfach zu lösen wäre, da du deine ganzen main-frame seiten als template so lassen kanst wie sie sind und nur das gerüst drumherum einmalig bauen musst, welches die navigation enthällt und die templates lädt.
bei der php geschichte könntest du auch immer auf eine seite verlinken, welche die inhaltsseite als parameter übergeben bekommt und diese nur (zusätzlich zur navigation) includiert. das wandeln von seiteX.html zu seite.php?seite=seiteX könnte man zusätzlich auch über https://httpd.apache.org/docs/trunk/mod/mod_rewrite.html lösen

 

[Spider67]

Danke für die Tipps, ich denke die Version mit PHP ist sogar für mich als Laien praktikabel und auch durchführbar, sowie ich das verstanden habe. Mein Hoster bietet jedenfalls PHP als serverseitige Scriptsprache an. Gibt es diese tolle Anleitung vielleicht auch irgendwo in Deutsch?

- - - Aktualisiert - - -

Muss ich dann eigentlich die einzelnen Teile (Header, Navigation und footer) auch mit CSS zur Positionierung versehen, oder haben diese Elemente Ihre Position schon durch den Elementnamen? Wie erfolgt dann die Positionierung der Elemente auf der anderen Seite, auf der sie eingebunden werden? Auch durch den Elementnamen oder muss ich auf dieser Seite die Position auch durch CSS festlegen?

 

[tsseh]

Gibt es diese tolle Anleitung vielleicht auch irgendwo in Deutsch?

sicherlich, ich hab auch nur den 1. treffer bei google hier reingehauen

Muss ich dann eigentlich die einzelnen Teile (Header, Navigation und footer) auch mit CSS zur Positionierung versehen, oder haben diese Elemente Ihre Position schon durch den Elementnamen?

layout wird immer durch css festgelegt

Wie erfolgt dann die Positionierung der Elemente auf der anderen Seite, auf der sie eingebunden werden? Auch durch den Elementnamen oder muss ich auf dieser Seite die Position auch durch CSS festlegen?

du hast nur eine seite.
php soll ja aus mehreren teilstücken, von denen einige in jeder seite vorkommen, andere seitenspezifisch sind, genau das machen - eine html seite generieren, die diese teilstücken enthällt.
in den header der dann in jeder seite ist bindest du dein css ein. darin steht die layoutdefinition für die gesammte seite.

- - - Aktualisiert - - -

der einfachste weg wäre vermutlich, du baust dir eine seite so um, wie du es haben möchtest.
dann trennst du dein html dieser seite so auf, das du die festen bestandteile in eigene dateien verschiebst.
das was dann noch übrigbleibt sollte der eigentliche inhalt dieser (einen) seite sein.
diesen rest kannst du jetzt von *.html nach *.php umbenennen oder du legst eine neue *.php daneben.
in diese php-datei fügst du an die stelle, wo du den bereich in eigene dateien verschoben hast ein include auf die entsprechende datei ein.
wenn du dir php zuhause installierst und diese php-datei mal mit php aufrufst, sollte am ende genau das ausgegeben werden, was du in zeile 1 dieses postigs erstellt hast

 

[Spider67]

Bezüglich der Positionierung von Header und footer dachte ich , dass diese Elemente in html 5 extra zur Strukturierung der Seite geschaffen wurden, und daher keine separaten Css Positionierungen brauchen. Bezüglich Navigation ist das anders das ist mir schon klar. Hier muss ich in der einzubindenen Datei die Position der Navigation mit CSS festlegen, sodass diese auf jeder Seite, auf der ich sei einbinde, zum Beispiel links floatet.

Das heißt aber auch, dass jede Datei in die ich diese Elemente einbinde, eine PHP Datei sein muss, oder nicht?

 

[tsseh]

Bezüglich der Positionierung von Header und footer dachte ich , dass diese Elemente in html 5 extra zur Strukturierung der Seite geschaffen wurden, und daher keine separaten Css Positionierungen brauchen.

html definiert die struktur der seite, css das aussehen. selbst die position des headers muss nicht fest sein. such mal nach "css sticky header"

Das heißt aber auch, dass jede Datei in die ich diese Elemente einbinde, eine PHP Datei sein muss, oder nicht?

ja

 

[kkapsner]

eine PHP Datei sein muss, oder nicht?

Sie muss keine .php Dateiendung haben - mit include() kannst du beliebige Dateien "einfügen". Diese werden aber trotzdem durch den PHP-Interpreter gejagt. Wenn du das nicht willst, kannst du mit file_get_contents() den Inhalt holen und dann per echo ausgeben.

 

[tsseh]

Das heißt aber auch, dass jede Datei in die ich diese Elemente einbinde, eine PHP Datei sein muss

die aber muss eine PHP Datei sein und idr auch eine php endung haben

 

[kkapsner]

die aber muss eine PHP Datei sein

Was ist für dich eine PHP-Datei? Eine Datei mit valider PHP-Syntax? Dann ist jede HTML-Datei auch eine PHP-Datei...

idr auch eine php endung haben

Die Endung ist dem include() komplett egal. Und auch dem Webserver ist die Endung eigentlich egal, solange man ihm sagt, welche Dateien er durch den PHP-Interpreter jagen soll - so könnte man auch alle .htm(l) Dateien interpretieren lassen.