Ich habe mal eine responsive Testseite mit aktuellem HTML und CSS bei w3schools.com erstellt:
https://www.w3schools.com/code/
https://www.w3schools.com/code/
[ERLEDIGT] Problem mit Zentrierung und Höhe + 3. Element?
- Ersteller Ansophie
- Erstellt am
Werbung:
Meine Hilfe ist nur als Beispiel für eine mögliche Lösung gedacht und wie sie mit aktuellem, korrektem HTML und CSS erstellt werden kann.
Was du mit deiner Webseite machst, ob du Teile oder gar nichts von meinen Vorschlägen verwendest, ist alleine deine Entscheidung.
Wenn du die drei Container des Pageheaders bei schmalen Fensterbreiten nebeneinander halten willst - alleine deine Entscheidung.
Ich kann dich und alle anderen Mitleser (für die ich ja auch schreibe, ein Forum ist keine persönliche Beratung) nur darauf hinweisen, dass bei Webseitenbesuchern zu kleine Schriften bei Webseitenkritiken seit Jahrzehnten immer ganz oben stehen. Das gilt bereits für die Browser-Standdardschriftgrößen. Das solltest du zumindest wissen.
Was du mit deiner Webseite machst, ob du Teile oder gar nichts von meinen Vorschlägen verwendest, ist alleine deine Entscheidung.
Wenn du die drei Container des Pageheaders bei schmalen Fensterbreiten nebeneinander halten willst - alleine deine Entscheidung.
Ich kann dich und alle anderen Mitleser (für die ich ja auch schreibe, ein Forum ist keine persönliche Beratung) nur darauf hinweisen, dass bei Webseitenbesuchern zu kleine Schriften bei Webseitenkritiken seit Jahrzehnten immer ganz oben stehen. Das gilt bereits für die Browser-Standdardschriftgrößen. Das solltest du zumindest wissen.
Werbung:
![]()
Ich habe noch ein Beispiel mit sich ändernder Schriftgröße erstellt, ohne dass die Container im Header umbrechen:
https://www.w3schools.com/code/tryit.asp?filename=GNXN7CXSTCCZ
Das Beispiel sollte sich auch eignen, falls du (oder auch Andere) andere Einheiten wie vw ausprobieren wollen. Die CSS-Angaben zur Schriftgrößenänderung befinden sich in einem separaten CSS-Block.
Wobei die Einheit vw nicht für Schriftgrößen entwickelt wurde, sondern eher für Container im Grundlayout. Die Einheit vw wurde dann wie alle anderen Einheiten in die Schriftgrößen übernommen. Auch hier gilt die Regel: Nicht alles was möglich ist, ist auch sinnvoll. Das muss jeder für sich selbst ausprobieren und entscheiden.
https://www.w3schools.com/code/tryit.asp?filename=GNXN7CXSTCCZ
Das Beispiel sollte sich auch eignen, falls du (oder auch Andere) andere Einheiten wie vw ausprobieren wollen. Die CSS-Angaben zur Schriftgrößenänderung befinden sich in einem separaten CSS-Block.
Wobei die Einheit vw nicht für Schriftgrößen entwickelt wurde, sondern eher für Container im Grundlayout. Die Einheit vw wurde dann wie alle anderen Einheiten in die Schriftgrößen übernommen. Auch hier gilt die Regel: Nicht alles was möglich ist, ist auch sinnvoll. Das muss jeder für sich selbst ausprobieren und entscheiden.
Hallo Ansophie,
ich habe mir gerade den weiteren Verlauf dieses Threads nach meinem Posting #14 durch gelesen.
Erst Mal lag es mir fern, dir zu unterstellen, dass Du etwas nachbastelst sondern der Hinweis auf Bildbearbeitungsprogramme sollte nur verdeutlichen, dass dein ursprüngliches Layout etwas war, für das ein Grid als Umsetzung nicht geeignet ist.
Und der weitere Verlauf des Threads erhärtet diese Auffassung. Ein großer Teil deiner Probleme beruht darauf, dass Du in die Richtung dirigiert wurdest, Layouts mit Grid umzusetzen, wo es sich nicht eignet. Das führt dazu, dass die Technik nicht intuitiv zu handhaben ist und die Layouts nicht änderungsfreundlich sind. Wo mit Flex eine Zentrierung ein Einzeiler ist, muss man bei Grid, wenn es falsch eingesetzt wird, Zellen abzählen und ausrechnen. Es führt zu ausuferndem Cellspanning und man ist da wo man vor 20 Jahren mit Tabellenlayout war: Man wendet eine Technik an, mit der man eine Vielzahl von Layouts realisieren kann, die aber von der Semantik her fehl am Platze ist. Dass Grid für sich aktuell und modern ist, ändert an diesem Sachverhalt nichts.
Beste Grüße - Ulrich
ich habe mir gerade den weiteren Verlauf dieses Threads nach meinem Posting #14 durch gelesen.
Erst Mal lag es mir fern, dir zu unterstellen, dass Du etwas nachbastelst sondern der Hinweis auf Bildbearbeitungsprogramme sollte nur verdeutlichen, dass dein ursprüngliches Layout etwas war, für das ein Grid als Umsetzung nicht geeignet ist.
Und der weitere Verlauf des Threads erhärtet diese Auffassung. Ein großer Teil deiner Probleme beruht darauf, dass Du in die Richtung dirigiert wurdest, Layouts mit Grid umzusetzen, wo es sich nicht eignet. Das führt dazu, dass die Technik nicht intuitiv zu handhaben ist und die Layouts nicht änderungsfreundlich sind. Wo mit Flex eine Zentrierung ein Einzeiler ist, muss man bei Grid, wenn es falsch eingesetzt wird, Zellen abzählen und ausrechnen. Es führt zu ausuferndem Cellspanning und man ist da wo man vor 20 Jahren mit Tabellenlayout war: Man wendet eine Technik an, mit der man eine Vielzahl von Layouts realisieren kann, die aber von der Semantik her fehl am Platze ist. Dass Grid für sich aktuell und modern ist, ändert an diesem Sachverhalt nichts.
Beste Grüße - Ulrich
PS, ganz vergessen: Absolut verfehlt, bewährte und zielführende Verfahren, nämlich auf absolute Abmessungen zu verzichten und statt dessen relative Abmessungen oder noch besser
Bedauerlich, dass unerfahrene und gutgläubige Mitglieder auf diese Weise in die falsche Richtung dirigiert werden.
flex: 1 oder 1fr, zu verwenden, abzulehnen und statt dessen ein starres Layout zu empfehlen, das dann zu einer Inflation von Mediaqueries führt.Bedauerlich, dass unerfahrene und gutgläubige Mitglieder auf diese Weise in die falsche Richtung dirigiert werden.
Werbung:
