Dreispaltiges Layout

[Kerstin W.]

Hallo,
in wiki.self... habe ich folgendes gefunden.

@media (min-width: 32em)  {	/* zweispaltiges Layout für mittlere Viewports */ 
  nav {
    float: left;
    width: 15em;
  }
  main {
    min-width: 20em;  
    margin-left: 15em;
  }	

  aside {
    float: right;
    width: 12em;
  }  
}

@media (min-width: 45em)  {	/* dreispaltiges Layout für breitere Viewports */ 
  article {
    margin-right: 15em;
  }
}

Wie kann ich erreichen, dass die rechte Spalte nur angezeigt wird, wenn dort Text vorhanden ist.

[Matthias Scharwies]

Servus!

Hallo,
in wiki.self... habe ich folgendes gefunden.

@media (min-width: 32em)  {	/* zweispaltiges Layout für mittlere Viewports */ 
  nav {
    float: left;
    width: 15em;
  }
 ...
}

zu Anfang dieses Tutorials steht:

Die hier vorgestellte Positionierung mit float ist heute eher unüblich. Stand der Technik ist eine Umsetzung mit Flexbox oder dem Grid Layout:

Wie kann ich erreichen, dass die rechte Spalte nur angezeigt wird, wenn dort Text vorhanden ist.

Ein JavaScript könnte überprüfen, ob das dritte Element einen Textinhalt hat und es dann entsprechend ein- oder ausblenden. Würde ich nicht machen.

Wnn du nur Fließtext hast, würde ich den einfach runterlaufen lassen und evtl. bei mehr Platz mit columns mehrspaltig anordnen:

• CSS/Tutorials/Typografie/Spalten

Wenn Du mehrere Elemente nebeneinander anordnen willst, würde ich grid nehmen:

• CSS/Tutorials/Grid/Grid-Items

Herzliche Grüße

Matthias Scharwies

[Kerstin W.]

Hallo

Die hier vorgestellte Positionierung mit float ist heute eher unüblich. Stand der Technik ist eine Umsetzung mit Flexbox oder dem Grid Layout:

Könnte man das Beispiel dann nicht entfernen oder aber aktualisieren? Gibt es an anderer Stelle ein Beispiel wie man es mit Grid macht?

[Matthias Scharwies]

Servus!

Hallo

Die hier vorgestellte Positionierung mit float ist heute eher unüblich. Stand der Technik ist eine Umsetzung mit Flexbox oder dem Grid Layout:

Könnte man das Beispiel dann nicht entfernen oder aber aktualisieren?

Ja, Ende der Woche habe wir etwas Neues!

Gibt es an anderer Stelle ein Beispiel wie man es mit Grid macht?

→ CSS/Tutorials/Grid/Grid-Items#Anwendungsbeispiele

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Könnte man das Beispiel dann nicht entfernen oder aber aktualisieren?

Ja, wir haben etwas Neues!:

• CSS/Tutorials/Grid/mehrspaltige_Layouts

Matthias Apsel hatte die Tage bereits einmal angemerkt, dass das Grid-Tutorial bei Adam und Eva anfängt und relativ lange braucht, um zum ersten attraktiven Beispiel zu kommen.

Diese Seite zeigt jetzt jeweils eine Layout-Skizze und dann, aufbauend auf dem HTML5-Grundgerüst, ein Live-Beispiel mit Grid.

1. Beispiel ist das Holy-Grail-Layout, dann einige Zweispalten-Layouts mit und ohne ~Mayo~ / Navigation.

Zu einem späteren Zeitpunkt würde ich noch gerne einige Entwurfsmuster wie das Media-Objekt vorstellen.

Manche Seiten zeigen Kalender in Grid (nur 3 Zeilen CSS), Monopoly-Felder oder auch Gunnars Periodensystem.

@all Was würdet ihr noch gerne sehen, und wie könnte man das in das Grid-Tutorial integrieren?

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

1. Beispiel ist das Holy-Grail-Layout

Das wäre ein gutes Beispiel, um nicht mit Spaltennummern zu hantieren, sondern zu zeigen, wie das mit benannten Bereichen geht:

body {
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
}

😷 LLAP

[Kerstin W.]

@alle: In dem Beispiel hat ja auch "foot" 3 Spalten.
Wenn ich nun in der Fußzeile eine andere Aufteilung möchte, wie mache ich dies?
Im Beispiel steht
footer {
grid-column: 1 / -1;
}
Wenn ich jetzt dort 4 Bereiche wollte, muss ich dies dan konventionell machen mit divs mit Längenangabe?

[Matthias Scharwies]

Servus!

@alle:

Wenn ich nun in der Fußzeile eine andere Aufteilung möchte, wie mache ich dies?
Im Beispiel steht
footer {
grid-column: 1 / -1;
}

Diese Festlegung gilt nur für das Raster des body-Elements mit seinen direkten Kindelementen.

Wenn ich jetzt dort 4 Bereiche wollte, muss ich dies dan konventionell machen mit divs mit Längenangabe?

Könntest du. Du könntest aber auch ein neues grid aufmachen (der Header hat solch ein „Subgrid“.

Eine Möglichkeit wäre:

footer {  
  grid-column: 1 / -1;  /* gilt für das Raster, in dem sich das footer-Element befindet */
  display: grid;  /* macht Grid auf */
  grid-template-columns: repeat(4, 1fr); /* teilt footer in 4 Spalten */
}  

Probier halt mal rum.

Hier das dazugehörende Tutorial: CSS/Tutorials/Grid

Herzliche Grüße

Matthias Scharwies

[Kerstin W.]

Super, danke!

[Mitbeobachter]

Das wäre ein gutes Beispiel, um nicht mit Spaltennummern zu hantieren, sondern zu zeigen, wie das mit benannten Bereichen geht:

body {
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
}

Moin, meine Anfängerfrage: Wie adressiere ich jetzt in HTML z.B. die 2. footer-Zelle?

[Rolf B]

Hallo Mitbeobachter,

welche 2. footer-Zelle?

Wenn ich böse wäre, würde ich damit aufhören...

Die Grid-Template-Areas sind so gedacht, dass man eine von einer Matrix mit x Spalten und y Zeilen ausgeht (man könnte an die schlechten alten Layout-Tabellen erinnert sein). Genau wie bei Layout-Tabellen haben alle Zellen einer Zeile die gleiche Höhe, und alle Zellen einer Spalte die gleiche Breite. Und wie bei Layout-Tabellen sind colspans und rowspans möglich.

Heißt: header und footer sind jeweils eine Zelle. In einem table-Layout hätten sie einen colspan von 3.

Im Gegensatz zu Layout-Tabellen bietet grid aber deutlich mehr Flexibilität, und auch bessere Möglichkeiten, das Layout an die Bildschirmgröße anzupassen, und die Inhalte anzuordnen.

Rolf

[Mitbeobachter]

Offensichtlich habe ich ein Verständnisproblem Wenn ich dies mit der alten layout-Tabelle Tab vergleiche,
so heißen die Zellen
header header header
nav main aside
footer footer footer
und ich könnte fettgedruckte Zelle mit Tab(3,2) adressieren.

Gerade sehe ich den Beitrag von Matthias:

footer {
grid-column: 1 / -1; /* gilt für das Raster, in dem sich das footer-Element befindet /
display: grid; / macht Grid auf /
grid-template-columns: repeat(4, 1fr); / teilt footer in 4 Spalten */
}

Und ich könnte meine Frage jetzt so formulieren:
Wie stelle ich den Text "Impressum" in die 2. Spalte des footers?

[Tabellenkalk]

Hallo,

Und ich könnte meine Frage jetzt so formulieren:
Wie stelle ich den Text "Impressum" in die 2. Spalte des footers?

Vielleicht hätte die symbolische Darstellung besser so aus gesehen:

body {
  grid-template-areas:
    "hhheeeaaadddeeerrr "
    "nav   main  aside"
    "fffoooooottteeerrr";
}

Und dann stellt sich diese deine Frage so nicht.

Willste ne 2. Spalte, nimmste mindestens eine weitere Spalte dazu...

Gruß
Kalk

[Rolf B]

Hallo Mitbeobachter,

wenn Du den Footer wiederum per Grid unterteilst, dann musst Du das Element ansprechen, dass Du in die zweite Spalte des Footers setzt.

Vom Markup sähe das so aus:

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>
<div>blabla 1</div>
<div id="greasy"><a href="https://www.youtube.com/watch?v=7oKPYe53h78">I'm the one that you want, uh uh uh</a></div>
<div>blabla 3</div>
<div>blabla 4</div>
</footer>

Das Grid im Grid sorgt dafür, dass diese 4 divs nebeneinander gestellt werden (auto-placement, findet statt wenn Du zwar Zeilen und Spalten definierst, aber nicht explizit HTML Elemente dorthin setzt).

Ein Grid im Grid ist dann sinnvoll, wenn die benötigte Unterteilung des Footers sich nicht mit der im Haupt-Grid bereits vorhandenen Unterteilung realisieren lässt. Ob das CSS-Feature subgrid (welches bisher nur der Firefox kann) da ebenfalls helfen könnte, weiß ich nicht. Subgrids habe ich noch nicht studiert.

Rolf

[Mitbeobachter]

Danke für die einfche Lösung, jetzt habe ich es verstanden!
Merci

[Gunnar Bittersmann]

@@Mitbeobachter

body {
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
}

Wie adressiere ich jetzt in HTML z.B. die 2. footer-Zelle?

Es gibt keine 2. footer-Zelle.

„footer“ ist ein Bereich (area) (der sich über eine ganze Zeile erstreckt).

Damit das footer-Element in diesem Bereich plaziert wird:

footer {
  grid-area: footer;
}

Die Namensgleichheit muss nicht sein, wurde aber mit Bedacht gewählt.

Für die anderen Elemente header, nav, main, aside entsprechend.

😷 LLAP

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

1. Beispiel ist das Holy-Grail-Layout

Das wäre ein gutes Beispiel, um nicht mit Spaltennummern zu hantieren, sondern zu zeigen, wie das mit benannten Bereichen geht:

body {
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
}

Ja, so hatte ich auch angefangen: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid/benannte_Linien_und_Rasterbereiche

Ich habe es aus diesem Tutorial heraus auch verlinkt.

Mittlerweile bin ich dafür, das aber zu einem späteren Zeitpunkt zu erklären.

Im Forum gibt es immer wieder das Verständnisproblem, das Grid auch auf Kindeskinder anwenden zu wollen.

Eine Notation wie

body {
  grid-template-areas:
    "footer footer footer";
}

scheint dies noch zu unterstützen.

Ich bitte alle mal zu überlegen, wie man das anfangs so verwirrende, eigentlich aber genial einfache Grid erklären kann.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

Im Forum gibt es immer wieder das Verständnisproblem, das Grid auch auf Kindeskinder anwenden zu wollen.

Was durchaus funktioniert, sobald Subgrid auch anderswo als im Firefox implementiert wird (caniuse sagt: das gibt's nirgendwo anders). Aber angeblich hilft Microsoft ja jetzt mit, weil sie Subgrids in Edgium haben wollen.

Rolf

[Kerstin W.]

Hallo,

1. Beispiel ist das Holy-Grail-Layout, dann einige Zweispalten-Layouts mit und ohne ~Mayo~ / Navigation.

Wenn ich dort im ersten Beispiel (Holy-Grail-Layout mit 3 Spalten) auf Quelltext klicke, erhalte ich nur ca. 15 Zeilen. Wie finde ich alles zu dem Beispiel? Schönen Gruß Kerstin

[kai345]

Wenn ich dort im ersten Beispiel (Holy-Grail-Layout mit 3 Spalten) auf Quelltext klicke, erhalte ich nur ca. 15 Zeilen. Wie finde ich alles zu dem Beispiel?

auf »ausprobieren« klicken

[Rolf B]

Hallo Kerstin,

mit "ausprobieren" bekommst Du das Frickl angezeigt, unser Ausprobier-Tool. Darin sind HTML, CSS und JavaScript in verschiedene Fenster aufgeteilt.

Alternativ geht auch:

• Vorschau-Tab öffnen
• mit rechter Maustaste auf dessen Inhalt klicken

mit Chrome: Frame-Quelltext anzeigen mit Firefox: Aktueller Frame / Frame-Quelltext anzeigen mit Edge: Framequelle anzeigen

Rolf

[Gunnar Bittersmann]

@@Kerstin W.

Wie kann ich erreichen, dass die rechte Spalte nur angezeigt wird, wenn dort Text vorhanden ist.

Evtl. mit der Pseudoklasse :empty, siehe Beispiel. Darin ist es

section:empty {
	display: none;
}

Zu beachten ist, dass dafür das betreffende Element wirklich leer sein muss. Sobald in dem Beispiel in fig. 2 zwischen den Tags <section id="empty"> und</section> irgendwas steht – und sei es nur ein Leerzeichen o.a. Whitespace wie bei
<section id="whitespace"> </section> in Abbildung 3 –,
wirkt :empty nicht mehr, weil noch kein Browser das entsprechend der geänderten Spec Selectors Level 4 umsetzt (siehe Note auf der MDN-Seite).

😷 LLAP

[Mitbeobachter]

Hallo,
wie kann man die Ränder der einzelnen Zellen sichtbar machen?

[Matthias Scharwies]

Servus!

Hallo,
wie kann man die Ränder der einzelnen Zellen sichtbar machen?

Es gibt die gap-Eigenschaft, die zwischen den Zellen Abstände hinterlässt. Daneben kannst du doch eine border ziehen.

.container {
  display:grid;
  gap: 1em;
  background-color:blue;
}

.container > * {
  background-color: skyblue;
  border: thin solid navy;
}

Mir scheint die Antwort so einfach, dass Du evtl auf etwas anderes hinauswillst.

BTW: Im Firefox kannst Du im Seiteninspektor das Grid anzeigen lassen.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

.container > * {
  background-color: skyblue;
  border: thin solid navy;
}

Mir scheint die Antwort so einfach

Das scheint wohl nur so, denn deine war nicht richtig.

border beansprucht Platz; verfälscht also das Layout. Deshalb ist outline zu verwenden.

Guckst du.

BTW: Im Firefox kannst Du im Seiteninspektor das Grid anzeigen lassen.

Das allerdings. Und in Chromia inzwischen auch.

😷 LLAP

[Gunnar Bittersmann]

@@Matthias Scharwies

wie kann man die Ränder der einzelnen Zellen sichtbar machen?

Mir scheint die Antwort so einfach, dass Du evtl auf etwas anderes hinauswillst.

Möglich, denn mein Beispiel verwendete nicht Grid. Mit Grid ginge Kerstins Vorhaben wohl auch nicht umzusetzten, wenn ich sie richtig verstanden habe.

Aber auch bei Flexbox ist die Antwort: outline für die Flexitems.

😷 LLAP

[Mitbeobachter]

Hallo. Wenn ich im Beispiel
background ändere, so wird dieser auch geändert, wenn ich border-color ändere, tut sich nichts.
Woran liegt dies?

[Tabellenkalk]

Hallo,

Woran liegt dies?

Offenbar an der unvollständigen Regel am Ende des CSS-Abschnitts:

border: 1px solid;

Dies ist so nicht erlaubt und wird wohl durch black ergänzt und überschreibt alle vorherigen Regeln.

Gruß
Kalk

Edith sagt, wenn man das durch

border-width: 1px;
border-style: solid;

ersetzt, dann sieht's auch viel hübscher aus…

[JürgenB]

Hallo,

Woran liegt dies?

Offenbar an der unvollständigen Regel am Ende des CSS-Abschnitts:

border: 1px solid;

Dies ist so nicht erlaubt und wird wohl durch black ergänzt und überschreibt alle vorherigen Regeln.

ich habe das gerade mal korrigiert und den Block nach oben geschoben.

Gruß
Jürgen

[Tabellenkalk]

Hallo,

ich habe das gerade mal korrigiert und den Block nach oben geschoben.

Das hilft zwar, ändert aber an der unvollständigen Regel nichts und sollte so nicht in einem Beispiel vorkommen. Edith hat in meinem letzten Post einen besseren Vorschlag.

Gruß
Kalk

[Matthias Apsel]

Hallo Tabellenkalk,

Das hilft zwar, ändert aber an der unvollständigen Regel nichts und sollte so nicht in einem Beispiel vorkommen.

Spezifikationsgemäß ist der default-Wert von border-color die Textfarbe.

Bis demnächst
Matthias

[Tabellenkalk]

Hallo,

Spezifikationsgemäß ist der default-Wert von border-color die Textfarbe.

Na super, was hat denn die Rahmenfarbe mit der Textfarbe zu tun?

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

Spezifikationsgemäß ist der default-Wert von border-color die Textfarbe.

Na super, was hat denn die Rahmenfarbe mit der Textfarbe zu tun?

Irgendeinen Defaultwert muss border-color ja haben.

Und da ist currentColor wohl sinnvoller als transparent. Und ganz sicher sinnvoller als irgendeine beliebige Farbe wie black.

😷 LLAP

[Raktenheini]

Spezifikationsgemäß ist der default-Wert von border-color die Textfarbe.

Na super, was hat denn die Rahmenfarbe mit der Textfarbe zu tun?

Grundregeln für Layout-Heinis, Art. 08 Punkt 15:

„Es sieht regelmäßig gut aus wenn Text und Rahmen die gleichen Farben haben. Weichen sie davon nur ab, wenn es zwingende Gründe gibt.“

[Matthias Scharwies]

Servus!

Hallo,

Woran liegt dies?

Offenbar an der unvollständigen Regel am Ende des CSS-Abschnitts:

border: 1px solid;

Dies ist so nicht erlaubt und wird wohl durch black ergänzt und überschreibt alle vorherigen Regeln.

nein, dann wird als 3. Wert currentColor, die aktuelle Textfarbe verwendet.

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo Matthias,

dann ist meine Korrektur so OK?

Gruß
Jürgen

[Gunnar Bittersmann]

@@Tabellenkalk

Offenbar an der unvollständigen Regel am Ende des CSS-Abschnitts:

border: 1px solid;

Dies ist so nicht erlaubt

Doch, das ist es.

Ein Blick in die Spec CSS 2.2 verrät (und CSS Backgrounds and Borders Module Level 3 sagt nichts anderes):

Value: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit

Wie das zu lesen ist, steht in den Konventionen:

A double bar (||) separates two or more options: one or more of them must occur, in any order.

Min. ein Wert muss angegeben sein, nicht alle.

border: solid wäre ebenfalls eine gültige Angabe; border: 1px ebenfalls. (Letzteres würde aber keinen Rahmen erzeugen, s.u.)

Für nicht angegebene Werte wird der Defaultwert der jeweiligen Einzeleinschaft genommen.
Für border-width ist das medium;
für border-style ist es none;
für border-color ist es der Wert der color-Eigenschaft: currentColor.
(Da lohnt doch noch mal der Blick in Level 3.)

border: 1px solid ist also völlig gleichbedeutend mit
border: 1px solid currentColor.

Wenn der Rahmen in der aktuellen Textfarbe sein soll, gibt es keinerlei Notwendigekeit, border-color anzugeben.

😷 LLAP

[Tabellenkalk]

Hallo,

Dies ist so nicht erlaubt

Doch, das ist es.

Ja, inzwischen hab ich das so auch im Wiki entdeckt.
Mit meiner dreisten und falschen Behauptung hab mir völlig zurecht das Minus verdient, wobei ich glaube, dass es diese Erlaubnis früher noch nicht gab.

Nichtsdestotrotz halte ich solch eine verkürzte Schreibweise für zumindest ungeschickt, da sie, wie im vorliegenden Fall, zu überraschendem Ergebnis führt.

Gruß
Kalk

[Gunnar Bittersmann]

@@Tabellenkalk

wobei ich glaube, dass es diese Erlaubnis früher noch nicht gab.

Nachschlagen schlägt Glauben. MDN ist immer eine gute Quelle; darin wird auch auf CSS Level 1 verlinkt:

Value: <border-top-width> || <border-style> || <color>

Nichtsdestotrotz halte ich solch eine verkürzte Schreibweise für zumindest ungeschickt, da sie, wie im vorliegenden Fall, zu überraschendem Ergebnis führt.

Überraschend kann das nur für diejenigen sein, die sich mit CSS nicht so gut auskennen. 😜

😷 LLAP