Kerstin W.: Dreispaltiges Layout

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.

  1. 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:

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

    Herzliche Grüße

    Matthias Scharwies

    --
    Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
    1. 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?

      1. 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

        --
        Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
        1. Servus!

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

          Ja, wir haben etwas Neues!:

          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

          --
          Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
          1. @@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

            --
            “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
            1. @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?

              1. 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

                --
                Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
                1. Super, danke!

            2. 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?

              1. 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

                --
                sumpsi - posui - obstruxi
                1. 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?

                  1. 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

                  2. 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

                    --
                    sumpsi - posui - obstruxi
                    1. Danke für die einfche Lösung, jetzt habe ich es verstanden!
                      Merci

              2. @@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

                --
                “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
            3. 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

              --
              Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
              1. 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

                --
                sumpsi - posui - obstruxi
          2. 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

            1. 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

              --
              Stur lächeln und winken, Männer!
            2. 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

              --
              sumpsi - posui - obstruxi
  2. @@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

    --
    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
    1. Hallo,
      wie kann man die Ränder der einzelnen Zellen sichtbar machen?

      1. 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

        --
        Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
        1. @@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

          --
          “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
        2. @@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

          --
          “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
          1. Hallo. Wenn ich im Beispiel
            background ändere, so wird dieser auch geändert, wenn ich border-color ändere, tut sich nichts.
            Woran liegt dies?

            1. 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…

              1. 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

                1. 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

                  1. 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

                    --
                    Du kannst das Projekt SELFHTML unterstützen,
                    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                    1. 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

                      1. @@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

                        --
                        “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                      2. 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.“

              2. 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

                --
                Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
                1. Hallo Matthias,

                  dann ist meine Korrektur so OK?

                  Gruß
                  Jürgen

              3. @@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

                --
                “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
                1. 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

                  1. @@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

                    --
                    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon