|
|||
Flexbox Frage
Ich hatte mich ja mal an Euch gewendet weil ich div boxen nebeneinander angeordnet haben möchte.
Daraufhin wurd ich auf flexbox hingewiesen was mir gänzlich unbekannt war da ich eine längere pause eingelegt hatte. Nun habe ich mir ein layout überlegt. Und im Prinzip versteh ich das handling mit flexbox. Im Anhang findet ihr einen gezeichneten prototype. Mein einziges Problem dabei ist wie ich die flexcontainer 3 und 4 nebeneinander bekomme. 3 hat kindelemente untereinander inne und 4 ist erstmal einfach nur einen flexcontainer daneben. Vielleicht kann mir ja da jemand nen tip geben. edit: oder kann ich um die container 3 und 4 einen flex container legen.und eben diese auch als kind elemente verwenden, auch wenn bei 3 wieder kind elemente vorhanden sind? alternativ bräuchte ich eine andere lösung für container 3 um die einzelnen menüpunkte zu händeln und auch mit verschiedenen hintergründen belegen zu können. Geändert von nubi007 (23.10.2016 um 06:53 Uhr) |
Sponsored Links |
|
||||
Hallo
Zitat:
In HTML5 sollen so nicht einfach Container verwendet werden, sonderen deren Bezeichnung hängt von ihrem jeweiligen Inhalt ab. Mit deinen Angaben kann deshalb von den Bezeichnungen her kein korrekter Quelltext erstellt werden. Gleichzeitig wird der Quelltext durch die Verwendung von Elementen wie header, main, footer, article und so weiter deutlich übersichtlicher. Im folgenden verwende ich für deinen Container 1 die Bezeichnung header, für deinen Container 2 die Bezeichnung nav, für deinen Container 3 die Bezeichnung aside und für deinen Container 4 die Bezeichnung main. Zitat:
Für das Layout muss zunächst der Zeilenumbruch erlaubt werden: flex-wrap: wrap Dann bekommen header und nav so eine Breite, dass kein weiterer Container neben sie passt. Code:
header { flex-grow: 1; flex-shrink: 1; flex-basis: 95%; } nav { flex-grow: 1; flex-shrink: 1; flex-basis: 95%; } Code:
aside { flex-grow: 0; flex-shrink: 1; flex-basis: calc(25% - 2rem); } main { flex-grow: 0; flex-shrink: 1; flex-basis: calc(75% - 0.5rem); } Code:
body { display: flex; flex-wrap: wrap; justify-content: space-between; } Zitat:
Da die dann drei Container im body-Element (header, nav, hilfscontainer) als Block-Elemente bereits von Haus aus in voller Breite untereinander stehen würden, bräuchte Flexbox dann nur auf den Hilfscontainer angewendet werden. Bei Flexbox handelt es sich um reine Eltern-Kind-Beziehungen. Deshalb ist grundsätzlich vorgesehen, das Flexbox-Container verschachtelt werden können, also Flex-Kinder gleichzeitig wiederum Flex-Eltern sein können. Bei meiner Lösung ist nav so zugleich Flex-Kind (flex-item) vom Elternelement (flex-container) body und selbst Elternelement (flex-container) für seinen Inhalt. Zitat:
Seit CSS3 wurden dafür die Selektoren deutlich erweitert. Die Farben können zum Beispiel so zugewiesen werden: Code:
aside>:nth-child(1) { background-color: orange; } aside>:nth-child(2) { background-color: bisque; } aside>:nth-child(3) { background-color: gold; } aside>:nth-child(4) { background-color: yellowgreen; } Eine komplette Seite mit einigen CSS-Anweisungen, die ich selbst grundsätzlich verwende, und weiteren für dein Layout erforderlichen Angaben könnte zum Beispiel so aussehen: Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Flexbox Layout 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; min-width: 0; } html { font-family: sans-serif; font-size: 120%; line-height: 1.3; } body { width: 96%; margin: 1rem auto; } } /*Schriften*/ @media all { html { font-family: sans-serif; font-size: 120%; line-height: 1.3; } h1 { font-family: 'Roboto Slab', serif; font-size: 1.2rem; letter-spacing: 0.1rem; margin: 0.5rem 0 0 0; } h2, h3, h4, h5, h6 { font-family: 'Roboto Slab', serif; font-size: 1rem; margin: 0.5rem 0 0 0; } p, li, dl, dt, a, address { font-family: 'Roboto', 'Sans-Serif'; font-size: 1rem; font-style: normal; margin: 0.5rem 0 0 0; } a { margin: 0; } figcaption { font-family: 'Roboto', 'Sans-Serif'; font-size: 0.9rem; margin: 0; } } /*Grafiken*/ @media all { figure { min-width: 0; max-width: 100%; margin: 0; } img { min-width: 0; display: block; max-width: 100%; border: 0; } } /*Grundlayout mit Flexbox*/ @media all { body { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } body>* { box-sizing: content-box; padding: 0.5rem; border: 4px solid silver; } body>:nth-child(1n+2) { margin-top: 1rem; } header { flex-grow: 1; flex-shrink: 1; flex-basis: 95%; } nav { flex-grow: 1; flex-shrink: 1; flex-basis: 95%; } aside { flex-grow: 0; flex-shrink: 1; flex-basis: calc(25% - 2rem); } main { flex-grow: 0; flex-shrink: 1; flex-basis: calc(75% - 0.5rem); } } /*header*/ @media all { header { text-align: center; } } /*nav*/ @media all { nav { padding: 0; display: flex; justify-content: space-around; } nav>* { text-align: center; padding: 0.5rem; margin: 0; flex-grow: 1; flex-shrink: 1; flex-basis: calc(1px - 1rem - 8px); } nav>:nth-child(1n+2) { border-left: 4px solid gray; } } /*aside*/ @media all { aside { padding: 0; } aside>* { padding: 0.5rem; margin: 0; } aside>:nth-child(1n+2) { border-top: 4px solid gray; } aside>:nth-child(1) { background-color: orange; } aside>:nth-child(2) { background-color: bisque; } aside>:nth-child(3) { background-color: gold; } aside>:nth-child(4) { background-color: yellowgreen; } } /*main*/ @media all { main figure { margin-top: 1rem; } } </style> </head> <body> <header> <h1>Flex Container 1</h1> </header> <nav> <p>Kind 1</p> <p>Kind 2</p> <p>Kind 3</p> </nav> <aside> <p>Kind 1</p> <p>Kind 2</p> <p>Kind 3</p> <p>Kind 4</p> </aside> <main> <h2>Flex Container 4</h2> <p>Inhalt</p> <figure> <!-- <img src="2016_10_23_nubi007_flexboxl_layout_img_01.jpg"> --> <img src="index09_01.jpg"> <figcaption>Vorlage für das Layout</figcaption> </figure> <p>Originaldiskussion: <a href="http://xhtmlforum.de/73047-flexbox-frage.html">XHTML Forum</a></p> </main> </body> </html> Flexbox Layout 01 Gruss MrMurphy Geändert von MrMurphy (23.10.2016 um 14:05 Uhr) |
Sponsored Links |
|
|||
ich danke dir...ich seh schon ich muss einiges an wissen auffrischen.
das was ich z.b. als aside assoziiert hatte war dass es für randbemerkungen dient.nicht für nen menü.letztlich könnte ich das auch anders benennen, oder hat aside eine spezielle funktion. ich werde mir auf jeden fall alles neue von css3 und html5 mal anschauen.nur ist es nicht immer so einfach was im web zu finden was alle änderungen komplett zusammenfasst |
|
|||
Hallo
Zitat:
nav ist nur für die Hauptnavigation gedacht. Für weitere Links kann dann zum Beispiel aside verwendet werden, wenn sie nicht zum eigentlichen Hauptartikel gehören. Dann müssten sie wiederum im main stehen. Ohne den kompletten Inhalt deiner Webseite zu kennen kann ich deshalb nur raten welches Element jeweils angebracht ist. Andererseits kann ich auch keinen Fehler machen, da es keine Vorgabe gibt. Wenn deine Hauptnavigation aufgeteilt ist kann statt aside genau so nav richtig sein, so dass die Webseite zwei nav enthalten würde. Dass kann genau so korrekt sein. Um Lösungen aufzuzeigen ist es aber übersichtlicher unterschiedliche Container / Elemente zu verwenden, auch falls sie nicht direkt zum Inhalt passen. Gruss MrMurphy |
|
|||
Hallo
Als Betriebssystem verwende ich Windows und als Editor "Sublime Text 2". Wobei der Editor beim Erstellen von Webseiten eine untergeordnete Rolle spielt. Deshalb halte ich auch nicht von Ratschlägen welchen Editor oder sogar welche Version man angeblich benutzen MUSS. Da wird leider viel Unsinn geschrieben und häufig Quatsch über Editoren geschrieben, die der vermeintlich neutrale Ratgeber selbst nicht verwendet und häufig nicht mal richtig kennt. Die Editoren müssen schlicht einige Voraussetzungen beherrschen. Heutzutage zum Beispiel mit UTF-8-codierten Dateien umgehen können. Viel wichtiger ist aber dass die Anwender ihre Editoren kennen und beherrschen. Den Unterschied machen dann nur noch einige Funktionen, die man persönlich häufig anwendet. Wer Englisch nicht beherrscht ist zum Beispiel mit deutschsprachigen Editoren und deutscher Anleitung besser aufgehoben. Gruss MrMurphy |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bin Anfänger: Frage zu fließendem Text um Bild | Felge | CSS | 19 | 29.04.2012 16:44 |
jQuery - Frage zu Selektoren | blade_runner | Javascript & Ajax | 3 | 05.09.2011 13:46 |
Frage zu einem Abstand, 2 Frage zu einem Bildwechsel (MouseOver) | moonsorrox | CSS | 7 | 24.06.2011 08:31 |
XHTML 1.0 , 1.1, 1.2, 2.0 frage??? | Altair_AC | (X)HTML | 8 | 15.08.2009 13:49 |
Frage zu einem Gedanken (DIV positionieren) | charlie | CSS | 1 | 06.09.2008 11:36 |