nicht angemeldet ottogal
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
marctrix
marctrix
marctrix
Auge
marctrix
Gunnar Bittersmann
marctrix
Hallo zusammen
Ich wurde als Gelegenheitsprogrammierer vor einiger Zeit hier kompetent beraten und wende mich daher nochmals vertrauensvoll an die Experten:
Ausgangslage: Klassisches 3-Spalten-Layout (s. Fig. unten). Linke und rechte Spalte fest und gleich breit, die mittlere variabel (Fig. links). Ab einer bestimmten Reduktion der Bildschirmbreite sollte die rechte Spalte aufgegeben werden und deren Inhalt sich stattdessen unmittelbar unten an den Inhalt der linken Spalte anschliessen (Fig. rechts.)
Ich habe bisher 2 leidlich funktionierende, aber m.E. hochgradig unelegante Lösungen: (1) gelb wird jeweils zweimal geladen und dann query-abhängig via display-Befehl bedient. (2) gelb wird links gefloatet und dort absolut positioniert, unschön, weil hierzu die Angabe der Länge von blau erforderlich ist.
Müsste das nicht irgendwie eleganter gehen? Danke für Ideen!
Hallo Bruno,
zähle mich zwar nicht zu den Experten, aber ich würde dazu Grid verwenden, siehe z.B. Grid by Example. (Da gibts viel zu lernen und zu staunen...)
Viel Erfolg!
@@Bruno Thomann
Ich habe bisher 2 leidlich funktionierende, aber m.E. hochgradig unelegante Lösungen: (1) gelb wird jeweils zweimal geladen und dann query-abhängig via display-Befehl bedient. (2) gelb wird links gefloatet und dort absolut positioniert, unschön, weil hierzu die Angabe der Länge von blau erforderlich ist.
Müsste das nicht irgendwie eleganter gehen? Danke für Ideen!
(2) ist sicherlich mehr als unelegant; sprich: unbedingt zu vermeiden, aus dem von dir genannten Grund.
(1) hat den Vorteil, dass die Tab-Reihenfolge der interaktiven Elemente bei Tastaturnavigation der visuellen Reihenfolge entspricht, was man anstreben sollte. Das heißt: von links nach rechts, bei breitem Viewport und 3 Spalten blauer Bereich, weißer Bereich, gelber Bereich; bei schmalem Viewport und 2 Spalten blauer Bereich, gelber Bereich, weißer Bereich.
Die Frage ist also: Enthalten die Bereiche interaktive Elemente (Links, Formularfelder, Buttons, …)? Wenn nein, dann wie ottogal sagte. Wenn ja, ist (1) gar nicht so dumm wie du erst denkst. Wobei das Layout natürlich auch in dem Fall mit CSS Grid umgesetz werden kann/sollte.
LLAP 🖖
@@Gunnar Bittersmann
(1) gelb wird jeweils zweimal geladen und dann query-abhängig via display-Befehl bedient. … ist (1) gar nicht so dumm wie du erst denkst.
Wobei man „gelb“ nicht zweimal im HTML zu stehen haben muss – das Klonen kann man mit JavaScript erledigen.
Ich hab vor einiger Zeit mal ein entsprechendes Beispiel erstellt. Der blaue Bereich ist zweimal im DOM – einmal, weil das Element im HTML hinten so drinsteht, und einmal, weil das Element mit JavaScript geklont wird. Mit CSS wird jeweils nur eins davon angezeigt. Beschreibung
LLAP 🖖
Danke, Gunnar, wie schon früher, sehr konstruktiv! Ich habe tatsächlich bisher die Variante (1) benutzt (es gibt links in gelb) und halt zweimal HTML-Code gecopypasted und zweimal updated… . Da nun aber noch eine Smartphone-Version lauert, wo dann in einer nurmehr einzigen Spalte gelb unter weiss platziert werden müsste, wären es dann schon drei... Da lohnt sich wohl JS.
Dennoch: Früher, in meiner Jugend - na ja - habe ich bei einem ähnlichen Problem mit include operiert. Das ging, war aber mit (damals) MS Expression-web und der fehlenden Vorschau umständlich, mit dem jetzigen Dreamweaver habe ich's noch nicht probiert.
Hat sich erledigt! Besten Dank!
@@Bruno Thomann
Da lohnt sich wohl JS.
Kommt drauf an …
… mit include operiert.
Du baust das HTML serverseitig zusammen? (PHP, SSI o.a.?) Dann kannst du den Code für den gelben Bereich auch mehrmals includieren. Wichtig ist, dass der Code nur an einer Stelle gepflegt werden muss.
Das bläht natürlich die HTML-Ressource auf. Aber: diese wird ja üblicherweise komprimiert übertragen. Wenn derselbe Code mehrmals vorkommt, holt der Kompressionsalgithmus das meiste davon raus, so dass die übertragene komprimierte Ressource nur unwesentlich größer ist als wenn der Code für den gelben Bereich nur einmal drin ist.
Wenn also serverseitige Technik im Einsatz ist, kann man das Duplizieren durchaus auch damit machen und nicht clientseitig mit JavaScript.
LLAP 🖖
Hej Gunnar,
Das bläht natürlich die HTML-Ressource auf.
Und ohne css wird es gruselig…
Marc
Hej Gunnar, @@Bruno Thomann
Wobei man „gelb“ nicht zweimal im HTML zu stehen haben muss – das Klonen kann man mit JavaScript erledigen.
Vielleicht noch beachtenswert: wie sieht es ohne JS und/ oder ohne CSS aus?
Keine Sorge, das muss natürlich nicht identisch sein, aber verständlich wäre schön.
Marc
Danke allen! Das Problem betrifft in meinem Fall zwar ca. 30 Unterseiten, aber allfällige Änderungen sind höchstens alle 2 Jahre nötig und die lassen sich mit search/replace ja vergleichsweise rasch erledigen.
Trotzdem Frage an die Fachleute hier: Die Konfiguration: identische Bereiche auf allen (Unter-)Seiten (Header, Footer, Navigation, usw.) kommt doch Abermillionen Mal vor, täglich, ist geradezu ein klassisches Kennzeichen von Websites. Ich verstehe nicht, warum für die Implementierung dieser fundamentalen Sache HTML/css das Heft aus der Hand gibt, fremde Sprachen bemüht werden müssen (js, php, …).
Ist da was unterwegs? Im Falle <var> hat sich doch schon mal etwas bewegt...
Hej Bruno,
Trotzdem Frage an die Fachleute hier: Die Konfiguration: identische Bereiche auf allen (Unter-)Seiten (Header, Footer, Navigation, usw.) kommt doch Abermillionen Mal vor, täglich, ist geradezu ein klassisches Kennzeichen von Websites. Ich verstehe nicht, warum für die Implementierung dieser fundamentalen Sache HTML/css das Heft aus der Hand gibt, fremde Sprachen bemüht werden müssen (js, php, …).
Es gab ja mal eine Lösung mit Frames, tatsächlich aber waren header, nav, footer usw dann meist auf Seiten, die das verwenden (oder auch SSI) identisch. Man hat schnell gemerkt dass das keine gute Idee ist (neben anderen Problemen insbesondere bei Frames).
Eine Navigation ist ein Bedienelement kann aber darüber hinaus auch eine wertvolle Orientierungshilfe sein, die anzeigt, wo ich bin, welche verwandten Themen es neben dem aktuellen gibt und welche Unterthemen. Ich kann den Pfad, den ich gekommen bin sehen usw. Das geht nicht, wenn die Navigation auf allen Seiten gleich ist, abgesehen von „Deppenlinks“ - also links auf die aktuelle Seite.
Auch im Folter kann die aktuelle Seite hervorgehoben sein, das Design kann einem Farbleitsystem angepasst sein, eine Überschrift an den aktuellen Hauptbereich repräsentieren usw…
Wenn die Navigation im header ist (wird häufig so gemacht), ist der header natürlich nicht mehr überall derselbe usw.
Dass sich alle Seitenbereiche je nach aufgerufener Seite verändern, ist also die für Nutzer bessere Variante. Daher finde ich es gut, dass HTML dazu ermuntert — und nciht zum Gegenteil.
Ist da was unterwegs? Im Falle <var> hat sich doch schon mal etwas bewegt...
Da es dennoch Teile gibt, die in ihrer Struktur immer gleich sind, denke ich mal du suchst nach <template> (kann man darin eigentlich Variablen verwenden) und JS. Oder nach json und JS.
Eine Website besteht heute eigentlich aus drei Sprachen: HTML, CSS und JS - ohne JS bekommst du nicht einmal eine benutzbare Navigation hin (ich habe es wie so viele andere auch versucht 😉).
Das war aber schon immer so. Trennung der Anliegen (Separation of concerns) in Inhalt (HTML), Präsentation (CSS) und Funktion (JS). Die sollte man auch tunlichst beibehalten.
Marc
Hallo
Eine Website besteht heute eigentlich aus drei Sprachen: HTML, CSS und JS - ohne JS bekommst du nicht einmal eine benutzbare Navigation hin (ich habe es wie so viele andere auch versucht 😉).
Grundsätzlich stimme ich deiner Beschreibung zu, aber dass man ohne JavaScript keine benutzbare Navigation erstellen könnte, ist in dieser Generalität ja wohl eine gewagte These. Könntest du das bitte näher ausführen?
Tschö, Auge
Hej Auge,
Eine Website besteht heute eigentlich aus drei Sprachen: HTML, CSS und JS - ohne JS bekommst du nicht einmal eine benutzbare Navigation hin (ich habe es wie so viele andere auch versucht 😉).
Grundsätzlich stimme ich deiner Beschreibung zu, aber dass man ohne JavaScript keine benutzbare Navigation erstellen könnte, ist in dieser Generalität ja wohl eine gewagte These. Könntest du das bitte näher ausführen?
Tja, obwohl ich ein Freund von einem Navigationskonzepten ohne Pulldowns bin, hatte ich hier ausschließlich Pulldowns im Sinn. Keine Ahnung wieso.
Ich folge wohl gedanklich schon den Fliegen, die alle um Ausscheidungen dieser heilige Kuh kreisen.
Marc
@@marctrix
Auch im Folter kann die aktuelle Seite hervorgehoben sein
Allgemeine Erklärung der Menschenrechte, Artikel 5:
Niemand darf der Folter oder grausamer, unmenschlicher oder erniedrigender Behandlung oder Strafe unterworfen werden.
Da es dennoch Teile gibt, die in ihrer Struktur immer gleich sind, denke ich mal du suchst nach
<template>
Das denke ich nicht. <template> ist per Default unsichtbar und dient dazu, dass dessen Inhalt per JavaScript kopiert und ins DOM gehangen wird.
(kann man darin eigentlich Variablen verwenden)
Ich glaube, nicht. Aber man kann darin befindliche Elemente per JavaScript mit Inhalt befüllen.
ohne JS bekommst du nicht einmal eine benutzbare Navigation hin (ich habe es wie so viele andere auch versucht 😉).
Doch, durchaus. Wenn’s denn kein Pull-down-Menü sein muss. (Pull-down-Menüs sind sowieso überbewertet.)
Trennung der Anliegen (Separation of concerns) in Inhalt (HTML), Präsentation (CSS) und Funktion (JS).
Wobei Inhalt nicht mit HTML, Präsentation nicht mit CSS und Funktion nicht mit JavaScript gleichzusetzen ist:
Man kann Meta-Angaben zum Inhalt im (Inline-)CSS haben – „Das sind keine Inline-Styles.“ (Beispiel: Seitenverhältnis von Bildern)
Man kann (sollte aber nicht) Präsentationsangaben im HTML haben – „Aber das sind Inline-Styles. 💩*“* (Beispiel: Bootcrap, ebenda)
JavaScript kann allein zur Präsentation dienen. (Beispiel: Um die Jahrhundertwende)
LLAP 🖖
Hej Gunnar,
Trennung der Anliegen (Separation of concerns) in Inhalt (HTML), Präsentation (CSS) und Funktion (JS).
Wobei Inhalt nicht mit HTML, Präsentation nicht mit CSS und Funktion nicht mit JavaScript gleichzusetzen ist:
Erst einmal kann man das schon grob gleichsetzen. Know the rules, before you break them. Jede Regel hat freilich ihre Ausnahme.
- Man kann (sollte aber nicht) Präsentationsangaben im HTML haben – „Aber das sind Inline-Styles.
- JavaScript kann allein zur Präsentation dienen. (Beispiel: Um die Jahrhundertwende)
Beides halte ich falsche Entscheidungen schon in der Konzeptionsphase (falls es so eine überhaupt gegeben hat). Das sind heutzutage keine guten Beispiele für sinnvolle Ausnahmen.
Marc
