Unterschiedliche Seitenhöhe

[Michael]

Hallo miteinander,
auf der Webseite kommt es immer wieder vor, dass eine neue Seite länger wird als die bisherigen. Dementsprechend werden dann Grafiken am Rand auch verlängert, damit die Seite vernünftig aussieht.
Nur werden damit alle bisherigen Seiten ebenfalls verlängert, die auf den gleichen Masterrahmen zugreifen, so dass dann die Grafiken entsprechend zu kurz sind und alle Seiten manuell nachkorrigiert werden müssen. Zusätzlich sieht es blöd aus, wenn auf vielen Seiten sehr viel Platz nach unten frei ist, nur weil einige mehr Umfang haben.
Mit den "Grafiken" sind farbige Rechtecke gemeint, die links und rechts platziert sind, um den eigentlichen Text einzurahmen. Im Masterrahmen gibt es dies nur links, so dass es rechts ergänzt wurde. Vielleicht gäbe es dafür auch eine andere Lösung?
Oder müssten Masterrahmen mit unterschiedlicher Höhe, meinetwegen 3 oder 4 verschiedene definiert werden?
Dann aber wieder das Problem, wenn ich etwas Grundsätzliches ändern möchte, dass die Änderungen wohl bei allen Masterrahmen durchgeführt werden müssten?
Mit den Basisfunktionen von NOF9 bzw. mittlerweile 12 komme ich ganz gut zu Recht, aber Detailkenntnisse fehlen.
Freue mich auf Eure Tipps und Hilfestellungen,
mit herzlichen Grüßen,
Michael

[nettesekel]

Hallo Michael und willkommen im Forum,

ich weiß, was du meinst und habe auch eine Idee im Hinterkopf, wüßte aber gern ein wenig mehr über das Projekt. Hast du mal einen Link zu deiner Seite, damit man mal sehen kann, wie dein Design aufgebaut ist?

l.g. nettesekel

[Michael]

Hallo,
die jetzige Seite ist www.feinstoffpraxis-koeln-ehrenfeld.de.
Diese ist etwas anders aufgebaut, wie die Neuausgabe, an der jetzt gearbeitet wird.
(In NOF 9 entworfen, jetzt unter NOF 12 nur noch teilweise funtionierend - daran wurde schon im alten Forum gearbeitet - "Dozi" hatte sich die Dateien damals schicken lassen, bei Ihm gab es keine Probleme, nur bei mir liefen sie nach wie vor nur instabil, so dass jetzt an einem Neuentwurf in NOF 12 gearbeitet wird)
Beim Neuentwurf ist auch das li. Rechteck nicht mehr im Masterrahmen drin, wenn ich alles richtig gemacht habe, sondern wie rechts eine freie Grafik.
Bin gespannt auf den Lösungsvorschlag, so es einen unkomplizierten Weg gibt.
Mit abendlichen Grüßen, Michael

[nettesekel]

Was meinst du mit Rechtecke? Und... soll die Seite nicht zentriert sein?
Also stand jetzt sehe ich eine Seite mit einem blassen blau/lila-Ton als Hintergrund und der Hintergrund deines Layouts ist quasi ein breiter weißer Streifen.
So soll es später dann auch aussehen?

[Michael]

Na ja, wenn man nicht weiß, wie es richtig funkioniert, findet man eben irgendeine Lösung.
Damals wurde der Site-Stile "Celio blue" bzw. evtl. "Broadcast blue" als Hintergrund gewählt, so ich dies richtig erinnere. Und in meinem Verständnis habe ich im Masterrahmen einen rechteckigen Bereich oben über die ganze Breite der Seite mit Banner, Navigation usw., ganz unten ebenfalls und links wiederum ein Rechteck.
Die drei Rechtecke umrahmen den mittleren Bereich, in dem die wechselnden Texte usw. stehen als Hintergrund für alle Seiten (Gibt bestimmt auch Fachwörter dafür). Rechts wollte ich auch gerne ein blaues Feld haben, wusste aber letztlich nicht, wie ich dies "zentriert" hinbekomme und habe deshalb einfach jeweils Grafikrahmen mit entsprechender Hintergrundfarbe  rechts dazugefügt bei einer relativ breiten Seite, so dass es auf den meisten Standardbildschirmen einigermaßen aussieht - Wenn man entsprechen schiebt, oder stark verkleinert, taucht rechts wieder eine weiße Fläche auf...
Was ich jetzt gerne hätte, ist den mittleren Bereich zum jetzigen Zeitpunkt weiß, und links und rechts ein hellblauer Hintergrund, wenn es geht, gerne auch vernünftig zentriert.
Und natürlich die Möglichkeit, den mittleren Bereich in unterschiedlicher Höhe von Seite zu Seite zu verwenden, damit die lästigen leeren Bereiche unten entfallen.
Ein wenig schwierig, dies in vernünftige Worte zu fassen, wenn die Fachbegriffe nicht geläufig sind...
Vielen Dank, dass Du Dich damit beschäftigst,
Mit Gruß, Michael

[Michael]

Für die jetzige Version habe ich "Bilder", also JPG-Dateien mit einfarbigem Hintergrund genommen, und diese in entsprechender Größe eingefügt.
Michael

[nettesekel]

Ich habe dich verstanden.  Lösung folgt...

[nettesekel]

Also... ich habe das mal kurz getestet, es sollte funktionieren...

Ich würde den längenabhängigen Hintergrund nicht in der Seitenansicht einstellen, sondern im Design. Wir gehen das mal Schritt für Schritt durch.
Hier gibt es ein Tutorial zum Thema Seitenhintergrund einrichten: https://www.nof-community.de/index.php/topic,175.0.html
Das nimmst du bitte zur Hilfe und stellst im Design die Hintergrundfarbe #ECEEF5 ein und als Hintergrundbild stellst du die Grafik layout_mitte.png aus dem Anhang dieses Posts ein.
Die Grafik soll sich vertikal wiederholen und horizontal zentriert sein.

Wenn du das gemacht hast, zentrierst du erstmal deine Seite. Dazu nutzt du bitte folgende Anleitung: https://www.nof-community.de/index.php/topic,4.0.html

Wenn du auch das erledigt hast, sollte deine Seite schon recht gut deinen Vorstellungen entsprechen.

Es ist dann noch etwas Feinschliff möglich, wie z.B. ein oberer und unterer Abschluss für den mittleren Streifen. Die Grafiken hierfür habe ich auch schon erstellt, aber das nehmen wir uns dann im nächsten Schritt vor. Arbeitest du mit Textfeldern oder mit Tabellen?

Es wäre ganz hilfreich, wenn du bei Problemen, wenigstens eine Seite in ein Testverzeichnis publizierst, damit man besser helfen kann.

[Michael]

Klingt spannend, werde es morgen versuchen und mich wieder melden....
Danke erstmal und gute Nacht,
Michael

[Michael]

Hallo, da bin ich wieder...
Dem beschriebenen Weg bin ich gefolgt, und es hat schon ganz passabel ausgesehen.
Die beigelegte Datei machte einen dunkleren Rand, der langsam in die eigentliche Farbe übergeht. Dieser Farbverlauf gefällt mir nicht so gut, der glatte Rand war mir lieber. Zusätzlich war die Datei etwas zu schmal, da die neue Webseite etwas breiter ist.
Wenn ich das System richtig verstanden habe, geht es letztlich um die weiße Innenfläche. D.h. habe ich ein komplett weißes PNG mit 1090 px Breite erstellt und verwendet.
Die Seite wurde publiziert unter www.feinstoffpraxis-koeln-ehrenfeld.de/test und sieht schon ganz vernünftig aus, nur mit dem Zentrieren hat es noch nicht richtig geklappt?
Was mir noch nicht gefällt, ist die Designansicht (Screenshot) - in dieser sind die blauen Balken quer im Bild, was mich irritiert. Muss dies so bleiben?
Und mit der unterschiedlichen Seitenhöhe, würde dies jetzt schon funktionieren?
Vielen Dank erstmal, freue mich darauf, weiter zu machen,
mit herzlichen Grüßen, Michael

[nettesekel]

Hallo,

na das sieht doch schon prima aus. Dass dir der Schatten nicht gefällt... OK, das ist Geschmackssache und das hast du ja selbst gut hinbekommen.  Bei der Breite hatte ich mir schon etwas gedacht, denn 990px Breite ist noch immer das Maximum, wenn man Usern mit entsprechender Auflösung keinen Querscroller zumuten will.
Dass das in der Arbeitsansicht nicht so aussieht wie online, ist normal. Stelle mal deine Layoutbreite auf genau die Breite die deine Inhalte haben, dann solltest du im Normalfall dort gar keine blauen Streifen sehen. Sobald du dein Layout breiter auseinander schiebst, verschiebt sich diese Ansicht, da der hintergrund zwar zentriert dargestellt wird, deine Inhalte aber links liegen bleiben (müssen).
Was meinst du mit, die Zentrierung klappt noch nicht?

l.g. nettesekel

[Michael]

Heieijei,
in so wenigen Zeilen viel gelernt. Der Schatten ist auf jeden Fall Geschmacksache, keine Frage.
Das mit den 990 Pixeln war mir nicht bewusst, daran scheinen sich die meisten zu halten, z.B. auch Tagesschau.de usw. Danke!
Nur was mache ich mit meinen vielen Buttons: vielleicht eine andere Schrift, die nicht so breit ausfällt, was für eine Schrift benutzen wir hier auf dieser Seite?
Über die Proportionen der Seite darf also nochmals nachgedacht werden.
Die Layoutbreite löst das Problem, jetzt sieht es angenehmer aus.
Gerade habe ich noch mit unterschiedlichen Platzhaltertexten gearbeitet. Für mich sieht es so aus, wie wenn sich jetzt unterschiedlich hohe Seiten problemlos darstellen lassen: ZIEL ERREICHT!!!
Mit der Zentrierung meine ich, dass die Ränder rechts und links neben der Navigationsleiste beim ersten Versuch nicht gleich breit sind. JETZT habe ich manuell mit Versuch und Irrtum hin und her geschoben, so dass es einigermaßen passt. In der Designansicht tue ich mich aber schwer, da rechts wieder ein relativ breiter Rand ist, der aber bei der Publikation weg fällt. Was mache ich falsch?
Mit Gruß, Michael

[Michael]

Screenshot vergessen...

[nettesekel]

Ja klar, Ziel erreicht! Das war ja der Sinn der Übung... 
Was meinst du mit dem breiten Rand, rechts? Dass der weiße Hintergrund da was weiter drüber guckt? Wenn ja, hast du die Hintergrundgrafik jetzt schon gegen eine schmalere Grafik ausgetauscht?

[Michael]

Wenn ich die 990 px einhalten will, muss erst noch die Navigationsleiste geändert werden. Die hat jettz ziemlich genau 990 px, d.h. ist die Hintergrundgrafik noch die alte.
Müsste es nicht unabhängig davon möglich sein, die Navigationsleiste so zu plazieren, dass der Abstand zum hellblauen Rand auf beiden Seiten gleich ist?
Auf der Test-Seite ist dies nicht der Fall - gibt es dafür einen Trick, oder hilft nur Probieren, bis es passt?
Eine neue Frage noch: Jetzt wollte ich noch probieren, oben und unten einen hellblauen Streifen zu machen. Oben habe ich einfach die Hintergrundgrafik blau eingefärbt und in den Masterrahmen rein kopiert. Vielleicht nicht die eleganteste Lösung, aber funktioniert.
Unten geht es auch, aber wenn jemand die Seiten stark verkleinert, oder auf einem großen Bildschirm wird es bei einer kurzen Seite z.B. aktiv & vital drunter wieder weiß. Gibt es dazu vielleicht ein tutorial, wie man das richtig macht?
Aber langsam wird es spät, ...
mit abendlichen Grüßen,
Michael