Lorenz: Gleich hohe Spalten

Hallo,
in dem selfhtml.blog "Grundlagen für Spaltenlayout mit CSS" wird erläutert, wie man erreicht, dass Spalten gleich hoch werden. Dies ist dann z.B. in diesem Beispiel der Fall.
Wie kann man aber erreichen, dass die Spalten bis an den unteren Rand des Screens heranreichen?
Schönen Sonntag
Lorenz

  1. Om nah hoo pez nyeetz, Lorenz!

    Wie kann man aber erreichen, dass die Spalten bis an den unteren Rand des Screens heranreichen?

    Im einfachsten Fall durch
      ~~~css html, body {
        margin: 0;
        padding: 0;
      }

      
    Matthias
    
    -- 
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Alte und Alternative](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=A#alte).  
    ![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  
    
    
    1. Hallo Matthias,
      ich habe die Änderung bei dem von mir zitiertem Beispiel gemacht, aber die Spalten werden dadurch nicht länger.
      G.
      L.

      1. Om nah hoo pez nyeetz, Lorenz!

        Wenn die Spalten immer 100% Höhe haben sollen, kannst du ihnen per height: 100% eine Höhe von 100% zuweisen. Du musst darauf achten, dass die Vorfahrenelemente auch festgelegte Höhen haben.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Rat und Rattenplage.

        1. Juhu,

          Wenn die Spalten immer 100% Höhe haben sollen, kannst du ihnen per height: 100% eine Höhe von 100% zuweisen. Du musst darauf achten, dass die Vorfahrenelemente auch festgelegte Höhen haben.

          Fast geschafft!? Wenn die Spalten kürzer sind als die Screenhöhe, so reichen sie jetzt bis unten.
          Wenn aber die Spalten länger sind und man blättert nach unten, so ist wieder der Effekt, dass sie nicht bis unten reichen.
          G.
          L.

          1. Om nah hoo pez nyeetz, Lorenz!

            Wenn aber die Spalten länger sind und man blättert nach unten, so ist wieder der Effekt, dass sie nicht bis unten reichen.

            kann ich auf die Schnelle nicht nachvollziehen, kannst du deine Versuche zeigen? Notfalls mit Quelltext?

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Boll und Bollerwagen.

            1. Hallo Matthias,
              hier der Quelltext:

                
              <html>  
              <head>  
              <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
              <title>Test</title>  
              <style type="text/css">  
              html, body  
              {  
                  font-size: 100.01%;  
                  margin: 0;  
                  padding: 0;  
                  height: 100%;  
              }  
              #Gesamtseite  
              {  
                  max-width: 1080px;  
                  height: 100%;    /* bringt keine Höhenänderung der Spalten über die Gesamtseite */  
              }  
              #Navigation  
              {  
                  float: left;  
                  font-size: 0.9em;  
                  width: 23.4375%;  
                  background-color: #b9b9b9;  
                  height: 100%;    /* bringt keine Höhenänderung der Spalten über die Gesamtseite */  
                                                border: 2px green solid;  
              }  
              #Infoteil  
              {  
                  background-color: #b9b9b9;  
                  margin-left: 23.4375%;  
                  height: 100%;    /* bringt keine Höhenänderung der Spalten über die Gesamtseite */  
                                                border: 2px red solid;  
              }  
              #Seitentitel  
              {  
                  /* background-image: .....;   */  
                  height: 50px;  
              }  
              #Seiteninhalt  
              {  
              }  
              #Kopf  
              {  
              }  
              #Daten  
              {  
              }  
              </style>  
              </head>  
              <body>  
              <div id="Gesamtseite">  
                <div id="Navigation">  
                  <ul>  
                    <li>Item1</li>  
                    <li>Item2</li>  
                    <li>.....</li>  
                    <li>.....</li>  
                    <li>.....</li>  
                    <li>.....</li>  
                    <li>.....</li>  
                    <li>.....</li>  
                  </ul>  
                </div>  
                <div id="Infoteil">  
                  <div id="Seitentitel">  
                    <h1>Seitentitel</h1>  
                  </div>  
                  <div id="Seiteninhalt">  
                    <div id="Kopf">  
                      <h2>Kopf</h2>  
                    </div>  
                    <div id="Daten">  
                      <h2>Daten</h2>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                    </div>  
                  </div>  
                </div>  
              </div>  
              </body>  
              </html></style>  
              </head>  
              <body>  
              <div id="Gesamtseite">  
                <div id="Navigation">  
                  <ul>  
                    <li>Item1</li>  
                    <li>Item2</li>  
                    <li>.....</li>  
                    <li>.....</li>  
                    <li>.....</li>  
                    <li>.....</li>  
                    <li>.....</li>  
                    <li>.....</li>  
                  </ul>  
                </div>  
                <div id="Infoteil">  
                  <div id="Seitentitel">  
                    <h1>Seitentitel</h1>  
                  </div>  
                  <div id="Seiteninhalt">  
                    <div id="Kopf">  
                      <h2>Kopf</h2>  
                    </div>  
                    <div id="Daten">  
                      <h2>Daten</h2>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                      <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                    </div>  
                  </div>  
                </div>  
              </div>  
              </body>  
              </html>  
              
              

              Schönen Gruß
              Lorenz

              1. Om nah hoo pez nyeetz, Lorenz!

                width: 23.4375%;

                Was soll das bringen? Eine Internetseite kann nicht in jedem Browser gleich aussehen.

                <div id="Gesamtseite">
                  <div id="Navigation">
                     ...
                  </div>
                  <div id="Infoteil">
                    <div id="Seitentitel">
                      <h1>Seitentitel</h1>
                    </div>

                Es ist Unsinn, ein h1-Element in ein div zu packen, wenn es das einzige Element bleibt.

                <div id="Seiteninhalt">
                      <div id="Kopf">
                        <h2>Kopf</h2>
                      </div>

                S.o.

                <div id="Daten">
                        <h2>Daten</h2>
                        ...
                      </div>
                    </div>
                  </div>
                </div>

                Verwende eine semantische Textauszeichnung!

                Schau dir Annes Lösung an, die auch im Spaltenlayout-Artikel verlinkt ist.

                Matthias

                --
                Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Löwe und Löwenzahn.

                1. Om nah hoo pez nyeetz, Lorenz!

                  width: 23.4375%;

                  Was soll das bringen? Eine Internetseite kann nicht in jedem Browser gleich aussehen.

                  Aus dem Buch von Zillgens "Responsive Webdesign"

                  <div id="Seitentitel">
                        <h1>Seitentitel</h1>
                      </div>

                  Es ist Unsinn, ein h1-Element in ein div zu packen, wenn es das einzige Element bleibt.

                  Natürlich kommt in das div noch mehr rein, das Beispiel wurde der Übersichtlichkeit vereinfacht, ohne dass der Effekt verlorenging.

                  Verwende eine semantische Textauszeichnung!

                  s.o.

                  Schau dir Annes Lösung an, die auch im Spaltenlayout-Artikel verlinkt ist.

                  Danke, werde ich tun.

                  1. Hallo Matthias,
                    mit dem
                    overflow:auto;
                    aus Deinem zitierten Beitrag ist dieses Problem behoben.
                    Aber, um Himmels willen, wie soll ein normaler Mensch auf so etwas kommen?
                    Mir schwant fürchterliches, wenn ich an den Weg denke bis zur Fertigstellung meiner Homepage, die dann auch noch auf verschiedenen Medien dargestellt werden soll.
                    Gruß
                    Lorenz

                  2. Om nah hoo pez nyeetz, Lorenz!

                    Natürlich kommt in das div noch mehr rein, das Beispiel wurde der Übersichtlichkeit vereinfacht, ohne dass der Effekt verlorenging.

                    Verwende eine semantische Textauszeichnung!

                    s.o.

                    Das Eine hat mit dem Anderen nichts zu tun. Es gibt in HTML 5 passendere Elemente als das nichtssagende div. Du solltest die Artikel wirklich lesen.

                    Matthias

                    --
                    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Plan und Plantage.

                    1. Hallo Matthias

                      Das Eine hat mit dem Anderen nichts zu tun. Es gibt in HTML 5 passendere Elemente als das nichtssagende div. Du solltest die Artikel wirklich lesen.

                      Will ich gerne tun, aber eins nach dem anderen - vor allem, da HTML5 wohl noch nicht von allen Browsern unterstützt wird?.

                      In meinem Beispiel ist mir jetzt aufgefallen, dass, wenn man die Schriftgröße verkleinert mit Strg/- (beim Firefox), plötzlich rechts der Hintergrund verschwindet und dercrollbalken in das Bild hineinrutscht.
                      Wenn ich das bleiche mit dieser Selfhtml-Seite mache passiert dies nicht.
                      Gibt es da auch noch so ein geheimnisvolles Statement?
                      Dank
                      Lorenz

                      1. Om nah hoo pez nyeetz, Lorenz!

                        Will ich gerne tun, aber eins nach dem anderen - vor allem, da HTML5 wohl noch nicht von allen Browsern unterstützt wird?.

                        Doch. Alle relevanten Browser unterstützen HTML5. Für IE6-8 gibts ein kleines Javascript am Anfang der Seite.

                        In meinem Beispiel ist mir jetzt aufgefallen, dass, wenn man die Schriftgröße verkleinert mit Strg/- (beim Firefox), plötzlich rechts der Hintergrund verschwindet und dercrollbalken in das Bild hineinrutscht.
                        Wenn ich das bleiche mit dieser Selfhtml-Seite mache passiert dies nicht.

                        ohne konkreten Quelltext lässt sich das nicht überprüfen. Mit dem Code von heute morgen ist das nicht nachvollziehbar.

                        Matthias

                        --
                        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen xi und Xiberg.

                        1. Hi Matthias,

                          ohne konkreten Quelltext lässt sich das nicht überprüfen. Mit dem Code von heute morgen ist das nicht nachvollziehbar.

                          Es ist der gleiche Quelltext wie heute früh mit der einzigen Ergänzung von
                          overflow:auto; unter #Infoteil.

                            
                          <html>  
                          <head>  
                          <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
                          <title>Test</title>  
                          <style type="text/css">  
                          html, body  
                          {  
                              font-size: 100.01%;  
                              margin: 0;  
                              padding: 0;  
                              height: 100%;  
                          }  
                          #Gesamtseite  
                          {  
                              max-width: 1080px;  
                              height: 100%;    /* bringt keine Höhenänderung der Spalten über die Gesamtseite */  
                          }  
                          #Navigation  
                          {  
                              float: left;  
                              font-size: 0.9em;  
                              width: 23.4375%;  
                              background-color: #b9b9b9;  
                              height: 100%;    /* bringt keine Höhenänderung der Spalten über die Gesamtseite */  
                                                            border: 2px green solid;  
                          }  
                          #Infoteil  
                          {  
                              overflow:auto;  
                              background-color: #b9b9b9;  
                              margin-left: 23.4375%;  
                              height: 100%;    /* bringt keine Höhenänderung der Spalten über die Gesamtseite */  
                                                            border: 2px red solid;  
                          }  
                          #Seitentitel  
                          {  
                              /* background-image: .....;   */  
                              height: 50px;  
                          }  
                          #Seiteninhalt  
                          {  
                          }  
                          #Kopf  
                          {  
                          }  
                          #Daten  
                          {  
                          }  
                          </style>  
                          </head>  
                          <body>  
                          <div id="Gesamtseite">  
                            <div id="Navigation">  
                              <ul>  
                                <li>Item1</li>  
                                <li>Item2</li>  
                                <li>.....</li>  
                                <li>.....</li>  
                                <li>.....</li>  
                                <li>.....</li>  
                                <li>.....</li>  
                                <li>.....</li>  
                              </ul>  
                            </div>  
                            <div id="Infoteil">  
                              <div id="Seitentitel">  
                                <h1>Seitentitel</h1>  
                              </div>  
                              <div id="Seiteninhalt">  
                                <div id="Kopf">  
                                  <h2>Kopf</h2>  
                                </div>  
                                <div id="Daten">  
                                  <h2>Daten</h2>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>  
                                </div>  
                              </div>  
                            </div>  
                          </div>  
                          </body>  
                          </html>
                          

                          Ohne das overflow:auto; vreschwindet der graue Hintergrund auch rechts nur der Scrollbalken ist nicht vorhanden.
                          Gruß
                          Lorenz

                          1. Om nah hoo pez nyeetz, Lorenz!

                            Ohne das overflow:auto; vreschwindet der graue Hintergrund auch rechts nur der Scrollbalken ist nicht vorhanden.

                            Definiere verschwindet. Du meinst nicht zufällig schmaler werden? Das ist eine Folge deiner festgelegten Mindestbreite.

                            Matthias

                            --
                            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Rad und Radar.

                            1. Hallo,

                              Das ist eine Folge deiner festgelegten Mindestbreite.

                              Du meintest Max.Breite. Ja, das stimmt! Das habe ich wiederum aus der Literatur zu "responsive Webdesign".

                              Eine andere Frage zum HTML5:
                              Es gibt ja nun ein <nav>.
                              Wenn ich in der linken Spalte die Navigation habe mit den einzelnen links, so schließe ich letztere in das nav ein. So weit, so gut.
                              Es sind aber in der linken Spalte noch weitere Elemente, wie Bilder und Texte vor und nach den links. Sind die dann auch innerhalb des nav anzugeben oder stellt man diese doch wieder in divs?
                              Gruß
                              Lorenz

                              1. Om nah hoo pez nyeetz, Lorenz!

                                Es gibt ja nun ein <nav>.
                                Wenn ich in der linken Spalte die Navigation habe mit den einzelnen links, so schließe ich letztere in das nav ein. So weit, so gut.
                                Es sind aber in der linken Spalte noch weitere Elemente, wie Bilder und Texte vor und nach den links. Sind die dann auch innerhalb des nav anzugeben oder stellt man diese doch wieder in divs?

                                Zeichne den Text als das aus, was er ist. eine Überschrift als eine Überschrift, ... Achte dabei _nicht_ auf die Gestaltung.

                                Matthias

                                --
                                Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Jod und Jodeldiplom.

                                1. Hallo Matthias,
                                  auf die Gefahr hin, dass ich Dich nerve, aber folgendes verstehe ich nicht.

                                  Zeichne den Text als das aus, was er ist. eine Überschrift als eine Überschrift, ... Achte dabei _nicht_ auf die Gestaltung.

                                  Im Augenblick habe ich ein div (id=Navigation), diesem verpasse ich float: left.
                                  Damit ist meine linke Seite definiert. Innerhalb des div-Bereichs definiere ich img,<p><ul>...
                                  In HTML5:
                                  img,<p>,...<nav>
                                  Wie ereiche ich, dass die dann auch links in einer Spalte stehen?
                                  Gruß
                                  Lorenz

                                  1. Om nah hoo pez nyeetz, Lorenz!

                                    Im Augenblick habe ich ein div (id=Navigation), diesem verpasse ich float: left.
                                    Damit ist meine linke Seite definiert.

                                    Achte dabei _nicht_ auf die Gestaltung.

                                    Innerhalb des div-Bereichs definiere ich img,<p><ul>...

                                    In HTML5:
                                    img,<p>,...<nav>
                                    Wie ereiche ich, dass die dann auch links in einer Spalte stehen?

                                    Zeichne den Text als das aus, was er ist. eine Überschrift als eine Überschrift, ... Achte dabei _nicht_ auf die Gestaltung.

                                    Du hast ja die von mir verlinkten Blogbeiträge gelesen. Wenn du dann später bestimmte Elemente gruppieren möchtest, gibt es praktisch 2 Möglichkeiten:

                                    1. Es gibt inhaltliche Gründe. Dann kommt etwa article, section oder auch aside in Frage.
                                    2. Es gibt Gestaltungsgründe. Dann sollte ein div-Element deine Wahl sein.

                                    wofür einzelne Elemente gedacht sind, kannst du kurz und knapp im Wiki sehen: Seitenstrukturierung, Textstrukturierung, Textauszeichnung

                                    Kümmere dich zuerst ausschließlich um die Inhalte. Erst danach kommt die Gestaltung.

                                    Matthias

                                    --
                                    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Buch und Buchsbaum.

                                    1. Hallo Matthias,
                                      in dem von Dir zitierten Dokument steht in dem Beispiel <article> ....</article> hinter dem body-Bereich. Ist dies korrekt?
                                      Bisher war ich der Meinung, </body> und </html> seien die letzten Elemente in einer html-Datei.
                                      Gruß
                                      Lorenz

                                      1. Om nah hoo pez nyeetz, Lorenz!

                                        in dem von Dir zitierten Dokument steht in dem Beispiel <article> ....</article> hinter dem body-Bereich. Ist dies korrekt?

                                        Du musst dich irren ;-)

                                        Bisher war ich der Meinung, </body> und </html> seien die letzten Elemente in einer html-Datei.

                                        Ja, das ist richtig. Allerdings handelt es sich hierbei um Tags. Erfahre den Unterschied.

                                        Danke für das aufmerksame Lesen und die Rückmeldung. Es handelt sich jeweils um 2 Beispiele. Das kommt jetzt deutlicher zur Geltung.

                                        Matthias

                                        --
                                        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Dom und Dominostein.

                                        1. Hallo Matthias

                                          Danke für das aufmerksame Lesen und die Rückmeldung.

                                          Gerne!

                                          Es handelt sich jeweils um 2 Beispiele. Das kommt jetzt deutlicher zur Geltung.

                                          Jetzt ist es klar!

                                          Aber nachdem ich jetzt tiefer in HTML5 einsteige, kommen natürlich weitere Fragen.
                                          Nachdem es nav, header und footer gibt, fehlt mir ein Element für den Rest, nämlich dem Teil zwischen header und footer.
                                          Dort stehen demnach Elemente wie section, articl, aside u.a. ohne sprechenden Ober-/Gruppenbegriff wie z.B. content.

                                          Gruß
                                          Lorenz

                                          1. Aber nachdem ich jetzt tiefer in HTML5 einsteige, kommen natürlich weitere Fragen.
                                            Nachdem es nav, header und footer gibt, fehlt mir ein Element für den Rest, nämlich dem Teil zwischen header und footer.
                                            Dort stehen demnach Elemente wie section, articl, aside u.a. ohne sprechenden Ober-/Gruppenbegriff wie z.B. content.

                                            Das Problem haben wohl auch andere erkannt.
                                            Gruß
                                            Lorenz

                                            1. Om nah hoo pez nyeetz, Lorenz!

                                              Das Problem haben wohl auch andere erkannt.

                                              Ich sehe da kein Problem. Ein Artikel zum main-Element wird folgen.

                                              Matthias

                                              --
                                              Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Tau und Taucher.

                                              1. Hallo Matthias,

                                                Ein Artikel zum main-Element wird folgen.

                                                Ich freue mich darauf!
                                                Gruß
                                                Lorenz

                                          2. Om nah hoo pez nyeetz, Lorenz!

                                            Nachdem es nav, header und footer gibt, fehlt mir ein Element für den Rest, nämlich dem Teil zwischen header und footer.

                                            Das sollte keineswegs der Rest sein, eher das Wichtigste ;-)

                                            Dort stehen demnach Elemente wie section, articl, aside u.a. ohne sprechenden Ober-/Gruppenbegriff wie z.B. content.

                                            section, article, main, aside sind mMn genauso sprechend wie nav, header und footer. Warum erwartest du für erstere einen Oberbegriff, für letztere jedoch nicht?

                                            Die semantische Bedeutung der Elemente siehst du in Kurzform auf der schon einmal verlinkten Wikiseite.

                                            Matthias

                                            --
                                            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Kamas und Kamasutra.

                                            1. Hallo Matthias,

                                              section, article, main, aside sind mMn genauso sprechend wie nav, header und footer. Warum erwartest du für erstere einen Oberbegriff, für letztere jedoch nicht?

                                              Ich meinte das was ich in diesem Beitrag geschrieben habe und was ich inzwischen in vielen Internet-Artikeln gefunden habe (<main>).

                                              Gruß
                                              Lorenz
                                              PS. Arbeitest Du rund um die Uhr?

              2. Om nah hoo pez nyeetz, Lorenz!

                https://forum.selfhtml.org/?t=213701&m=1461320,<del> es gab noch einen relativ aktuellen Thread, der genau dasselbe Problem hat, den finde ich aber im Moment nicht.</del><ins> https://forum.selfhtml.org/?t=213778&m=1462087</ins>

                Matthias

                --
                Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Hund und Hundertwasser.