Anfänge mit GRID: HTML- und CSS-Sheets korrekt strukturieren

[Rolf B]

Hallo einsiedler,

Sollte es so einfach sein das wenn man der nav ein display flex mitgibt + einem justify-content center und dem details meinetwegen ein width mit 80%, das ich so die Breite des Elementes beeinflusse? Wäre das in meinem Fall so korrekt?

Wen ich allerdings noch die Hintergrundfarbe die ich jetzt dem nav gegeben hab dem details mitgebe, würde es mir sogar gefallen.

Ist es etwa so einfach?

Keine Ahnung. Bislang ist es Dir nicht gelungen, mir auch nur ansatzweise verständlich zu machen, was Du eigentlich erreichen möchtest, und was Du bei deiner aktuellen V8 Seite für falsch oder unzulänglich hältst. Du schreibst, dass der Versuch einer Breitenfestlegung mit dem Grid in Konflikt steht. Dazu fällt mir nur ein "Hä?" ein, denn das nav Element ist in keinem Grid.

Zur Zeit ist <main> ein einfaches Blockelement, in dem sich 5 Kindelemente befinden (header, nav, article, article, footer). Diese werden in ihrer natürlichen Größe dargestellt, d.h. jedes der 5 ist so breit wie <main> und so hoch wie der Inhalt es erfordert.

Flexbox wirkt auf die direkten Kindelemente eines Elements. D.h. wenn Du <nav> zur Flexbox machst, gibt es zwei Flexitems: das verborgene p mit id=skip-to-section-label (dessen Sinn ich nicht verstehe) und das details-Element. Ich bezweifle, dass Du damit viel anfangen kannst.

Das skip-to-section-label Element soll wohl eine Beschriftung für das nav Element bilden. Muss das sein? Ich habe keine Ahnung. Ich hätte das weggelassen und das <summary>-Element als Überschrift für die Navigation als hinreichend empfunden.

Update: Ich habe jetzt noch einen Blick auf die V7 Seiten geworfen, wo sich alles zusammenschiebt, wenn man das Menü aufklappt. Wenn das Dein Problem ist, ok. Das liegt daran, dass das Grid so gestaltet ist, dass sich die Spurbreiten an ihren Inhalt anpassen. Wenn Du dem ul, das die Hauptmenüpunkte enthält, position:absolute; und right:0 gibst, und dann die Hintergrundfarben undurchsichtig machst, passiert das nicht mehr, dann überlagert das Menü den Inhalt. Da musst Du natürlich schauen, für welche Medienbreiten Du das machst. Ob Du Dir damit andere Probleme einfängst, weiß ich spontan nicht.

Und wie gesagt: eigentlich weiß ich ja auch nicht, wo Du genau hinwillst. Das ist aus der Masse schwierig herauszufiltern. Oder ich bin einfach zu doof, kann auch sein. Normalerweise würde ich, wenn ich in M. wäre und mit Dir am Tisch Business Analyse betriebe, Skizzen der Seite erstellen, aus denen erkennbar ist, welche Box sich wo befinden soll. Und das jeweils für die möglichen Zustände. Was sich wie überlappen soll, oder auch nicht. Die Skizzen müssen nicht ausgefeilt sein. Da reichen ein paar Rechtecke, die mit Paint gezogen werden. Das nennt sich „Wireframe-Darstellung“.

Für mich selbst mach ich sowas nicht. Weil ich meine Skizzen im Kopf habe und zumeist das CSS dafür auch hinbekomme. Aber wenn ich es nicht schaffe und jemanden um Hilfe bitten müsste, mit dem ich keine Livesession machen kann, dann würde derjenige von mir sicherlich auch Wireframes verlangen.

Rolf