nicht angemeldet
Flexbox / horizontale Zentrierung (auf Viewport bezogen)
marctrixHallo,
ich habe eine Musterseite erstellt, in der ich in bestimmten Bereichen mit sich mehrfach wiederholenden Flexboxen (sagen wir grob, pro Unterkapitel eine Box) nutze. Im konkreten Fall sind das immer zwei Boxen nebeneinander; die linke Box enthält Informationen, die rechte Box Icons, die sich auf den Inhalt der linken Box beziehen (drucken, nach oben etc.). Die Höhe der Boxen wird bei mir derzeit durch die Höhe des Viewports bestimmt, außerdem benutze ich Scrollbalken für die linke Box mit den Informationen. Da liegt das Problem. Es entstehen so Doppelscrollbalken, die aufgrund der Seitenstruktur auch noch ziemlich dicht beieinander liegen.
Nun möchte ich die linke Box in voller Höhe zeigen (wobei diese sehr unterschiedlich ausfallen kann). Mir ist klar, dass die rechte Box sich dem anpasst, aber ich hätte gerne die Icons in der rechten Box immer im Sichtbereich, also innerhalb des Viewports. Ich habe dazu viel gefunden, aber nichts im Verbindung mit Flexboxen (die prima funktionieren).
Kann mir jemand helfen?
Gruß
Fieterich
-
Hej Fieterich,
Kann mir jemand helfen?
Eventuell, wenn du ein funktionierendes Beispiel bereit stellst - z.B. als Codepen, so dass man dran arbeiten kann...
Mir scheint aber der Ansatz schon wenig sinnvoll zu sein, würde das ohne Scrollbalken machen und ausnahmsweise auch ohne felxbox - warum die Icons nicht am rechten Bildschirmrand fixieren?
Übrigens: wie soll es auf dem Smartphone aussehen?
Marc
-
[Vollzitat entfernt]
hier das Beispiel:
Ich habe beruflich ein existierendes Dokumentationsprojekt übernommen, welches zum Teil auf HTML 3.2 basiert und grottenschlecht ausschaut. Auf diese Dokumentation greifen gut 2000 Anwender per Intranet zu, aber nur per PC (das funktioniert über einen Aufruf im Firmenportal). Mobilgeräte werden nicht genutzt.
Gruß
Fieterich
-
Hej Fieterich,
[Vollzitat entfernt]
hier das Beispiel:
Da ist ja einiges im HTML im Argen. Wenn irgendetwas nicht wie gewünscht klappt, immer erst mal den Validator fragen.
Wenn die HTMl-Fehler raus sind, wird es dennoch cniht funktionieren. Ich habe es mal angepasst, schau mal, ob Du es so gemeint hast:
<container> <aside> <ul> <li>Icon1</li> <li>Icon2</li> <li>Icon3</li> <li>Icon4</li> </ul> </aside> <article> <h2>Lorem ipsum ...</h2> <div class="zweispaltig"> <p>Lorem ...</p> </div> </article> </container>Wofür eigentlich das
<div class="zweispaltig">- wenn du da ran kommst, sollte das raus.Entscheidende HTML-Änderung: die Links gehören in eine Liste!
Das CSS dazu:
container { display: flex; flex-flow: row-reverse wrap; height:auto; } article, aside { border-radius: 0 0.5em 0.5em; border: 1px solid; padding: 0 10px; margin: 0 10px; } article { background: #F1F3F4; border-color: #d5d5d5; flex: 1 1 0; overflow-y: auto; } aside { background: #e9f3f8; border-color: #e9f3f8; flex: 0 0 10vh; margin: auto; text-align: center; }Für
backgroundundborderdieselbe Farbe???aside ul { position: fixed; }Das hält die Navi im sichtbaren Bereich - bitte gib noch an, wo die stehen soll
z.B.:
right: 1em; top: center;Die Frage ist dann aber, wozu du überhaupt flex-box verwendest.
Marc
-
[Vollzitat entfernt]
[Vollzitat entfernt]
Hallo Marc,
das war nicht die Lösung. Das Beispiel, was ich bereitgestellt habe, kann in dieser Variante mehrfach hintereinander vorkommen. Es ist nicht einfach zu beschreiben. Die Anwender rufen ein Hilfeportal auf, an dessen Navigation ich nichts ändern kann, da von dort aus auch andere Hilfebereiche aufrufbar sind, die von anderen Personen an anderen Standorten betreut werden. Deshalb kann ich auch keine eigene Navigation basteln, sonst hättest Du Navigation neben Navigation.
Manche Hilfedateien sind so elend lang, dass ich die Idee mit den Flexboxen hatte (es ist nur ein Versuch gewesen). Pro Kapitel eine Box mit den dazugehörigen Schaltflächen, zum Beispiel um ein Kapitel auszudrucken. Das klappt auch prima, aber eben nur wenn die Box maximal so hoch wie der Viewport ist. Zeige ich die volle Länge ohne Scrollbalken sollten die Icons rechts "mitwandern", und im Viewport bleiben (und das bei jedem Kapitel was ich zeige), damit der Anwender immer noch auf das Kapitel Einfluss nehmen kann. Es gibt einige JavaScript-Lösungen, aber keine will so recht mit dem Flexboxmodell funktionieren.
Durch das Modell mit den Boxen kann der Anwender "mal eben die Kapitel überfliegen" bzw. gezielt ein solches Drucken, gezielt Informationen zum Ansprechpartner bekommen usw.
Gruß
Fieterich
-
-
-
-
Hallo
Ich finde deine Problembeschreibung noch etwas verwirrend.
außerdem benutze ich Scrollbalken für die linke Box mit den Informationen. Da liegt das Problem. Es entstehen so Doppelscrollbalken, die aufgrund der Seitenstruktur auch noch ziemlich dicht beieinander liegen
Welche Scrollbalken meinst du? Die von der linken Box und von der rechten Box? Die von der rechten Box und dem Browser-Scrollbalken?
pro Unterkapitel eine Box
Befinden sich auf einer Webseite mehrere Unterkapitel untereinander? So dass einerseits immer wieder eine Bildschirmseite weitergescrollt werden kann und sich innerhalb der Bildschirmseiten Texte befinden, die ihrerseits zum Lesen gescrollt werden müssen? Also immer zwei Scrollbalken sichtbar sind?
Oder befindet sich jedes Unterkapitel auf einer eigenen Webseite, deren Höhe die Fensterhöhe sein soll? So dass nur der Scrollbalken der linken Box sichtbar sein soll und weder der Browserscrollbalken noch ein Scrollbalken in der rechten Box?
Gruss
MrMurphy
-
[Vollzitat entfernt]
Hallo MrMurphy,
die rechte Box hat lediglich Icons ohne Scrollbalken, die immer mittig zentriert werden, da die linke Box nur maximal so hoch ist wie der Viewport (war glaube ich maximal 90vh). Die Rede ist also vom Scrollbalken der linken Box und des Browsers selbst, die aber recht dicht zusammen liegen.
Die Kapitel bzw. Unterkapitel liegen alle jeweils in einer HTML-Datei, diese bekommen jeweils eine Box spendiert. Du hast also in den meisten Fällen ein paar dieses Boxenkonstrukts untereinander.
Gruß
Fieterich
-
Hallo
Ich habe mal eine Beispielseite so erstellt, wie ich deine Beschreibung verstanden habe.
Das Grundproblem dabei ist, dass sich Flexbox und overflow nicht mögen. Eher sogar das Gegenteil. Warum weiß ich nicht. Da sich aber alle Browser bei der Konstellation gleich verhalten (im Gegensatz zu anderen Flexbox-Problemen) scheint das so vorgesehen zu sein.
Zunächst der Quelltext. Gekürzt, da der gesamte für das Forum zu groß ist. Die Kürzungen betreffen nur die Inhalte der Artikel, die können also einfach mit beliebigen Inhalten wieder aufgefüllt werden.
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Flexbox mit overflow 03</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <style> @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { min-width: 0; } html { font-family: sans-serif; font-size: 100%; line-height: 1.3; } h1 { font-size: 1.2rem; margin: 0.5rem 0 0 0; } h2 { font-size: 1.2rem; margin: 0.5rem 0 0 0; } p { font-size: 1rem; margin: 0.5rem 0 0 0; } } /*Grafiken*/ @media all { figure { min-width: 0; max-width: 100%; margin: 0.5rem 0 0 0; } img { /*text-align: bottom;*/ min-width: 0; display: block; max-width: 100%; /*max-height: 100vh;*/ border: 0; } } @media all { body { padding: 0 0.25rem 0.5rem 0; margin: 0; } body .wrapper { height: calc(100vh - 0.5rem); margin: 0 0 0.5rem 0; display: flex; flex-direction: row-reverse; } body .wrapper:last-of-type { margin: 0 0 0 0; } } /*Layout Inhaltsbereich*/ @media all { body .wrapper { } body .wrapper article, body .wrapper aside { padding: 0.5rem; border: 3px solid gray; margin: 0.5rem 0.25rem 0 0.25rem; } body>div>article { flex-grow: 1; flex-shrink: 1; flex-basis: auto; } body>div>aside { flex-grow: 0; flex-shrink: 0; flex-basis: calc(200px - 0.5rem - 6px - 0.5rem); } .overflow { overflow: auto; height: calc(100vh - 2.5rem); } } /*.aside01 (Buttons, Icons)*/ @media all { .aside01 .overflow { display: flex; flex-direction: column; justify-content: center; align-items: center; } .aside01 p { background-color: orange; color: white; padding: 0.5rem 0.5rem; border-radius: 0.4rem; } } </style> </head> <body> <div class="wrapper"> <aside class="aside01"> <div class="overflow"> <p>Icon1</p> <p>Icon2</p> <p>Icon3</p> <p>Icon4</p> </div> </aside> <article> <div class="overflow"> <p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2016/nov/9/flexbox-strich-horizontale-zentrierung-auf-viewport-bezogen/1679562#m1679562">https://forum.selfhtml.org/</a></p> <h2>Problem</h2> <p>Es soll eine Webseite erstellt werden, die mehrere Artikel enthält. Jeder Artikel soll eine Bildschirmseite hoch sein.</p> <p>Falls der Inhalt von Artikeln mehr Platz als die Bildschirmhöhe beansprucht soll in seiner Box ein Scrollbalken erscheinen.</p> <p>Rechts vom Artikel soll eine schmale Box mit Icons stehen, mit denen im zugehörigen Artikel Aktionen ausgelöst werden können (Drucken, Scrollen, ...), die aber für die Problemstellung keine Rolle spielen.</p> <p>Die Icon-Box hat eine fest hinterlegte Breite, die direkt im CSS geändert werden kann. Der nebenstehende Artikel verwendet die restliche zur Verfügung stehende Breite.</p> <p>Responsive Design wird ausdrücklich nicht erwartet, die Webseite wird nur von bestimmten Besuchern mit Desktop-Monitoren genutzt, wobei die Monitore nicht näher definiert sind.</p> <p>Die Besucher können so die gesamte Seite relativ fix herabscrollen, die Artikel zur durch deren Beginn (Überschrift und so weiter) zur Kenntnis nehmen und bei Wunsch sofort komplett lesen.</p> <p>Weiterhin ist ein Layout mit Flexbox gewünscht. Die beiden nebeneinander stehen Boxen sind so gleich hoch und deren Reihenfolge kann unabhängig vom Quelltext bestimmt werden, zum Beispiel durch flex-direction.</p> <p>Flexbox und overscroll mögen sich leider überhaupt nicht. Deshalb muss die Höhe des Platzes für overscroll fest hinterlegt werden. Und zwar die Bildschirmhöhe minus margin, border und padding.</p> </div> </article> </div> <div class="wrapper"> <aside class="aside01"> <div class="overflow"> <p>Icon1</p> <p>Icon2</p> <p>Icon3</p> <p>Icon4</p> </div> </aside> <article> <div class="overflow"> <p>Originaldiskussion: <a href="https://forum.selfhtml.org/self/2016/nov/9/flexbox-strich-horizontale-zentrierung-auf-viewport-bezogen/1679562#m1679562">https://forum.selfhtml.org/</a></p> <h2>Autobahnwahn</h2> <p>Seit zwei Jahren ist meine Arbeit in Düsseldorf. Meine Familie lebt dagegen in Hamburg. Und dazwischen ich, aber ganz cool.</p> <figure> <img src="http://lorempixel.com/400/200/transport/5"> <figcaption>Teaserbild: Porsche</figcaption> </figure> <p>Vollbremskombination aus Ampel oder Einfädeln oder beides auf einmal. Geht nur mit Tricks. Eben noch kurz auf die A 52. Schon vielversprechend lebhaft. Hinter dem Breitscheider Kreuz geht es richtig los. Stau auf der A 3 bis Oberhausen. Danach entspannt es sich auch nur deshalb, weil enge Baustellen mit rüden Geschwindigkeitsbegrenzungen zum gleichmässigen Rollen zwingen.</p> </div> </article> </div> <div class="wrapper"> <aside class="aside01"> <div class="overflow"> <p>Icon1</p> <p>Icon2</p> <p>Icon3</p> <p>Icon4</p> </div> </aside> <article> <div class="overflow"> <h2>Die Säulen der Erde</h2> <p>Die Säulen der Erde ist ein Gesellschaftsspiel von Michael Rieneck und Stefan Stadler, das im Jahr 2006 im Kosmos-Verlag erschienen ist. Es greift die Thematik des gleichnamigen Romans von Ken Follett auf: Die Spieler beteiligen sich am Bau einer mittelalterlichen Kathedrale. Gespielt werden kann mit zwei bis vier Spielern, eine Partie dauert etwa 90 bis 120 Minuten. Als Zielgruppe werden Spieler ab zwölf Jahren angegeben.</p> </div> </article> </div> <div class="wrapper"> <aside class="aside01"> <div class="overflow"> <p>Icon1</p> <p>Icon2</p> <p>Icon3</p> <p>Icon4</p> </div> </aside> <article> <div class="overflow"> <h2>Schloss La Bastie d’Urfé</h2> <p>Das Schloss La Bastie d’Urfé (französisch Château de la Bastie d’Urfé), auch Schloss La Bâtie d’Urfé geschrieben, ist eine französische Schlossanlage in der Gemeinde Saint-Étienne-le-Molard im Département Loire.</p> <figure> <img src="http://lorempixel.com/400/300/city/6"> <figcaption>Teaserbild: Schloss</figcaption> </figure> <p>Die Anlage im Stil der Renaissance gehört zu den Loire-Schlössern und erhielt ihr heutiges Aussehen im 16. Jahrhundert durch Umbauten unter Claude d’Urfé, dem Großvater des Autors Honoré d’Urfé. Ihre Wurzeln liegen jedoch in einem festen Haus aus dem 14. Jahrhundert. Nach Aussterben der Eigentümerfamilie ging das Anwesen von Hand zu Hand, es diente ab 1872 zum Teil sogar als Fabrik. Ende des 19. Jahrhunderts verkaufte der damalige Eigentümer große Teile der kostbaren Innenausstattung an einen Antiquitätenhändler, von dem die Stücke an diverse Sammler weiterverkauft wurden.</p> </div> </article> </div> <div class="wrapper"> <aside class="aside01"> <div class="overflow"> <p>Icon1</p> <p>Icon2</p> <p>Icon3</p> <p>Icon4</p> </div> </aside> <article> <div class="overflow"> <h2>Cleveland</h2> <p>Cleveland [ˈkliːvlənd] (ursprünglich und bis 1831 Cleaveland) ist eine Stadt im Nordosten des US-Bundesstaates Ohio. Sie liegt an der Mündung des Cuyahoga River in den Eriesee und ist 213,47 km² groß.</p> <figure> <img src="http://lorempixel.com/400/300/city/8"> <figcaption>Teaserbild: Stadtansicht</figcaption> </figure> <p>Bei der Volkszählung 2010 hatte sie 396.815 Einwohner und war damit die zweitgrößte Stadt in Ohio. Cleveland ist County Seat des Cuyahoga County und geographischer, wirtschaftlicher und kultureller Mittelpunkt des Cleveland-Elyria-Mentor Metropolitan Statistical Area, des größten Ballungsraums in diesem Bundesstaat mit rund zwei Millionen Einwohnern.</p> </div> </article> </div> </body> </html>Und temporär der Link zu meinem Testaccount, welchen ich regelmäßig aufräume, zum direkten Ausprobieren und Rumspielen:
Gruss
MrMurphy
-
-