franzsen: Container

Hallo! Üblicherweise werden mehrere HTML-Elemente beispielsweise mit dem Element "div" zusammengefaßt. Man umfaßt somit zwei- oder mehrspaltige Seiten. Nun gibt es noch das Element "main". Soll das als Container und wie div mit CSS3 formatiert oder nur als Zusammenfassung des Hauptteiles behandelt werden?

Unter SELFHTML steht:
Das main-Element enthält den (Haupt-)Inhalt einer Webseite. Dieser wurde bisher oft mit <div id="main"> oder <div id="content"> gekennzeichnet. Beachten Sie: IE9-11 unterstützen das main-Element noch nicht. Allerdings ist ein Einsatz problemlos möglich, wenn Sie es im CSS mit display: block; auszeichnen.

Sind oder sollen dann header, footer, nav, etc. innerhalb zu schreiben oder können Elemente auch außerhalb stehen? main und div sind ja nicht mehr gleichzusetzen.

Sollen div, aside, etc. grundsätzlich einen Selektor erhalten oder nur zur Unterscheidung wenn es mehrere davon gibt?

--
LG Franz P.S.:
Jeder Beitrag erhöht doch die Anzahl und erhöht diese Liste. Soll man deshalb nicht mehrere, wenn auch unterschiedlich im Betreff, in einem Beitrag zusammenfassen? Ich stelle mir deshalb schon diese Frage, da ich bereits mehrere Beiträge verfaßt habe und sicherlich noch mehr werden. Oft sind es nur kurze die schnell beantwortet sind.
  1. Hallo,

    deine Fragen sind schwierig zu beantworten, da du

    1. Behauptungen aufstellst die so nicht stimmen oder von denen du falsche Vorstellungen hast

    und

    2. Begriffe vergleichst, die in dem von dir konstruierten Zusammenhang nichts miteinander zu tun haben.

    Üblicherweise werden mehrere HTML-Elemente beispielsweise mit dem Element "div" zusammengefaßt.

    Nein, das ist nur eine von vielen Möglichkeiten Container wie div zu verwenden.

    Man umfaßt somit zwei- oder mehrspaltige Seiten.

    So dargestellt: Auch nein. Das ist nur eine von vielen Möglichkeiten.

    Nun gibt es noch das Element "main". Soll das als Container und wie div mit CSS3 formatiert oder nur als Zusammenfassung des Hauptteiles behandelt werden?

    Beides. main-Elemente dürfen formatiert werden und sollen den Hauptinhalt (die eigentlichen Informationen) der Seite enthalten.

    main und div sind ja nicht mehr gleichzusetzen.

    Das kommt auf die Semantik an. Wer Angst vor dem main-Element hat wird stattdessen in der Regel ein div-Element verwenden. Da div keine Semantik hat ist das nicht grundsätzlich falsch, sondern bestimmten Besuchern oder auch Suchmaschinen werden hilfreiche Informtionen vorenthalten.

    Sind oder sollen dann header, footer, nav, etc. innerhalb zu schreiben oder können Elemente auch außerhalb stehen?

    Das kommt auf die Semantik an. header und footer können auf einer Webseite mehrfach vorkommen und entsprechend auch innerhalb des main-Elements stehen.

    Ein nav-Element im main-Element macht semantisch meist keinen Sinn, kann aber im header direkt im body-Element angebracht sein.

    Sollen div, aside, etc. grundsätzlich einen Selektor erhalten oder nur zur Unterscheidung wenn es mehrere davon gibt?

    Weder noch. Inhalt und Aussehen sollen heutzutage getrennt werden. Dazu gehört auch, unnötige Angaben im body-Bereich wegzulassen. Von daher sind Bezeichnungen wie class und id (ich gehe mal davon aus, dass du die meinst) in der Mehrzahl überflüssig geworden. Deshalb sind im CSS3 unter anderem auch die Pseudo-Klassen erheblich erweitert worden. Bevor die Bezeichnungen im CSS-Teil aber zu lang werden, sollten doch vereinzelt Bezeichnungen verwendet werden. Alle oder die Mehrzahl der Elemente mit class oder id auszustatten ist heutzutage jedoch schlechter Stil. Bei Listen reicht es zum Beispiel in der Regel aus die umschließenden Elemente (ol, ul, dl) zu bezeichnen.

    Gruss

    MrMurphy

  2. Hi,

    Üblicherweise werden mehrere HTML-Elemente beispielsweise mit dem Element "div" zusammengefaßt. Man umfaßt somit zwei- oder mehrspaltige Seiten. Nun gibt es noch das Element "main". Soll das als Container und wie div mit CSS3 formatiert oder nur als Zusammenfassung des Hauptteiles behandelt werden?

    der obige Absatz erscheint mir ziemlich konfus, und ich bin mir nicht sicher, ob ich ihn wirklich verstanden habe. Aber generell gilt: Jedes Element, das den Inhalt strukturell sinnvoll auszeichnet, kann auch mit CSS formatiert werden.

    Sollen div, aside, etc. grundsätzlich einen Selektor erhalten ...

    Die Frage sagt mir, dass du den Begriff Selektor völlig falsch verstanden hast. Der Selektor ist die Angabe im CSS, die ein bestimmtes Element (oder mehrere) des Dokuments auswählt. Was du hier meinst, ist vielleicht eine Kennzeichnung eines Elements durch eine ID oder eine Klasse. Die sollte dann vorgenommen werden, wenn das Element inhaltlich eine besondere Bedeutung hat, so dass sich eine besondere Kennzeichnung "lohnt".

    Jeder Beitrag erhöht doch die Anzahl und erhöht diese Liste.

    Hä?

    Soll man deshalb nicht mehrere, wenn auch unterschiedlich im Betreff, in einem Beitrag zusammenfassen? Ich stelle mir deshalb schon diese Frage, da ich bereits mehrere Beiträge verfaßt habe und sicherlich noch mehr werden.

    Solange mehrere Fragen wirklich miteinander zusammenhängen (ähnliches Thema, gleiches Projekt oder so), ist es eine gute Idee, sie in einem gemeinsamen Thread unterzubringen. Haben sie aber inhaltlich nichts miteinander zu tun, sollte man doch besser einen neuen Thread anfangen.

    So long,
     Martin

    1. Üblicherweise werden mehrere HTML-Elemente beispielsweise mit dem Element "div" zusammengefaßt. Man umfaßt somit zwei- oder mehrspaltige Seiten. Nun gibt es noch das Element "main". Soll das als Container und wie div mit CSS3 formatiert oder nur als Zusammenfassung des Hauptteiles behandelt werden?

      der obige Absatz erscheint mir ziemlich konfus, und ich bin mir nicht sicher, ob ich ihn wirklich verstanden habe. Aber generell gilt: Jedes Element, das den Inhalt strukturell sinnvoll auszeichnet, kann auch mit CSS formatiert werden.

      Nun, als Neuling fehlt mir sicherlich die richtige Formulierung einer Frage.
      Gemeint ist folgendes:

      1. Beispiel
      <main>  
        <div>  
          <div>Haupt</div>  
          <div>Navi</div>  
          <div>Inhalt</div>  
        </div>  
      </main>  
      
      

      oder
      2. Beispiel

      <main>
          <div>Haupt</div>  
          <div>Navi</div>  
          <div>Inhalt</div>  
      </main>
      
      

      Soll nun main nur alles umschließen aber zusammengefaßt wird mit div wie im 1. Beispiel oder kann man das umschließende div weglassen und mit main die Formatierung bewerkstelligen? Im 2. Beispiel wäre dann main der Container.

      Sollen div, aside, etc. grundsätzlich einen Selektor erhalten ...

      Die Frage sagt mir, dass du den Begriff Selektor völlig falsch verstanden hast. Der Selektor ist die Angabe im CSS, die ein bestimmtes Element (oder mehrere) des Dokuments auswählt. Was du hier meinst, ist vielleicht eine Kennzeichnung eines Elements durch eine ID oder eine Klasse. Die sollte dann vorgenommen werden, wenn das Element inhaltlich eine besondere Bedeutung hat, so dass sich eine besondere Kennzeichnung "lohnt".

      Ja, ich dachte schon, daß mit <div id="test"> bzw. <div class="test"> div hier einen Selektor (id oder class) erhält deren Name eben "test" lautet. Wenn ich wieder als Beispiel div nehme, so kann ich mit CSS div nennen. Wenn ich nun aber zwei oder mehrere divs habe die unterschiedlich formatiert werden sollen, so ist eine id oder anderes unumgänglich und in CSS der Name anzuführen. Bisher alles klar. Wenn aber eben nur ein div vorkommt, soll (als Regel?) trotzdem eine Kennzeichnung erfolgen?

      Jeder Beitrag erhöht doch die Anzahl und erhöht diese Liste.

      Hä?

      Soll man deshalb nicht mehrere, wenn auch unterschiedlich im Betreff, in einem Beitrag zusammenfassen? Ich stelle mir deshalb schon diese Frage, da ich bereits mehrere Beiträge verfaßt habe und sicherlich noch mehr werden.

      Solange mehrere Fragen wirklich miteinander zusammenhängen (ähnliches Thema, gleiches Projekt oder so), ist es eine gute Idee, sie in einem gemeinsamen Thread unterzubringen. Haben sie aber inhaltlich nichts miteinander zu tun, sollte man doch besser einen neuen Thread anfangen.

      In meinem Fall ist es ja ein Projekt jedoch unterschiedliche Bereiche (html, CSS, Eigenschaften, etc.)

      --
      LG Franz
      1. Hallo,

        Quellcodeschnipsel lassen sich immer schwer beurteilen. Ob die Semantik stimmt läßt sich erst an Hand der gesamten Seite klären.

        Soll nun main nur alles umschließen aber zusammengefaßt wird mit div wie im 1. Beispiel oder kann man das umschließende div weglassen und mit main die Formatierung bewerkstelligen?

        Das zweite Beispiel ist besser, das div direkt hinter main ist überflüssig.

        Wenn ich nun aber zwei oder mehrere divs habe die unterschiedlich formatiert werden sollen, so ist eine id oder anderes unumgänglich und in CSS der Name anzuführen.

        Nein. id oder class sind seit der Erweiterung der CSS-Selektoren häufig überflüssig und sollten dann auch vermieden werden.

        Bisher alles klar.

        Offensichtlich nicht.

        Wenn aber eben nur ein div vorkommt, soll (als Regel?) trotzdem eine Kennzeichnung erfolgen?

        Wie schon geschrieben ist das div überflüssig. Wenn du trotzdem ein div benutzt ist in der Regel eine id oder class überflüssig.

        Gruss

        MrMurphy

        1. @@MrMurphy1

          id oder class sind seit der Erweiterung der CSS-Selektoren häufig überflüssig und sollten dann auch vermieden werden.

          Diese Regel ist häufig falsch und sollte ihrerseits vermieden werden.

          Eingabefeldern steht eine ID vorzüglich. Zum einen, um das zugehörige label mit for-Attribut zuordnen zu können. Zum anderen, weil die QA IDs liebt.

          Auch Buttons sollten IDs haben. Zum einen für Eventhandler; zum anderen, weil die QA IDs liebt. Und Frontendentwickler, die IDs verwenden. (ab 25:24)

          Selektoren wie input:nth-child(5) sind nicht robust; bei der nächsten Markupänderung müsste QA ihre Tests anpassen – das sollte man unbedingt vermeiden.

          Auch section und article schreien förmlich nach einer ID, damit man die Bereiche einer Seite einzeln verlinken kann.

          Wie sieht’s bei Klassen aus? Mit dem beschränkten Vorrat an HTML-Elementen kann man desöfteren nicht alle Inhalte differenziert genug auszeichnen; da sind Klassen eine willkommene Erweiterung. (Natürlich auf den Inhalt bezogene, nicht auf die Darstellung.)

          Wenn man allerdings Inhalte mit RDFa Lite oder microdata semantisch auszeichnet, kann das Klassen überflüssig machen. “Look Ma, no classes!” (ab 5:24)

          LLAP 🖖

          --
          Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
      2. @@franzsen

        <main>
            <div>Haupt</div>  
            <div>Navi</div>  
            <div>Inhalt</div>  
        </main>
        

        Wie MrMurphy schon sagte, ist main bereits ein gruppierender Container, ein weiteres div ist nicht erforderlich.

        Was noch erforderlich ist, ist das role-Attribut fürs main-Element, damit Browsern und assistieven Technologieen dessen Rolle bekannt ist: <main role="main">

        Aber: Das Markup stimmt vermutlich so nicht.

        Zur Auszeichnung der Navigation sollte das nav-Element verwendet werden, damit Browsern und assistieven Technologieen dessen Rolle bekannt ist.

        Und: die Navigation gehört nicht zum Hauptinhalt, also nicht ins main-Element.

        Was bei dir „Haupt“ und was „Inhalt“ bedeuten sollen, ist mir unklar.

        Die Struktur könne eher so aussehen:

        <div>
          <header>Header</header>
          <nav>Navi</nav>
          <main role="main">Inhalt</main>
        </div>
        

        Aber auch dieses gruppierende div ist nicht erforderlich, da mit body schon ein gruppierender Container vorhanden ist:

        <body>
          <header>Header</header>
          <nav>Navi</nav>
          <main role="main">Inhalt</main>
        </body>
        

        Außerdem könnte es sinnvoller sein, die Navigation im Markup hinter dem Hauptinhalt zu notieren:

        <body>
          <header>Header</header>
          <main role="main">Inhalt</main>
          <nav>Navi</nav>
        </body>
        

        LLAP 🖖

        --
        Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
        1. Wie MrMurphy schon sagte, ist main bereits ein gruppierender Container, ein weiteres div ist nicht erforderlich.

          "Enthält den (Haupt-)Inhalt einer Webseite" Habe ich dann falsch verstanden. Ich dachte, alles was auf der Webseite zu sehen ist, ist der Inhalt.

          Was noch erforderlich ist, ist das role-Attribut fürs main-Element, damit Browsern und assistieven Technologieen dessen Rolle bekannt ist: <main role="main">

          Habe ich beim Beispiel nicht angeführt.

          Zur Auszeichnung der Navigation sollte das nav-Element verwendet werden, damit Browsern und assistieven Technologieen dessen Rolle bekannt ist.

          War mehr ein Demonstrationsbeispiel. Grundsätzlich verwende ich überall HTML-Elemente schon alleine um das Dokument übersichtlicher und strukturierter zu halten.

          Und: die Navigation gehört nicht zum Hauptinhalt, also nicht ins main-Element.

          Gehört eigentlich dann footer auch nicht dazu? main ist also nur der Container für Text bzw. Graphiken wie aside, section, article, etc.?

          Was bei dir „Haupt“ und was „Inhalt“ bedeuten sollen, ist mir unklar.

          Haupt/Kopf/header. Mit Inhalt meine ich alles zwischen header und footer.

          Außerdem könnte es sinnvoller sein, die Navigation im Markup hinter dem Hauptinhalt zu notieren:

          <body>
            <header>Header</header>
            <main role="main">Inhalt</main>
            <nav>Navi</nav>
          </body>
          

          Welchen Sinn ergibt das? Wenn ich beispielsweise navi links floaten möchte wird alles Nachfolgende rechts angeordnet. In Deinem Fall würde das nicht gehen? Ich dachte immer die natürliche Reihenfolge wäre header/nav/Inhalt/footer?

          --
          LG Franz
          1. Hallo franzsen,

            Gehört eigentlich dann footer auch nicht dazu? main ist also nur der Container für Text bzw. Graphiken wie aside, section, article, etc.?

            aside ist für eher nebensächliche Inhalte gedacht, kann, muss aber nicht zum Hauptinhalt gehören. Ebenso kann es auch außerhalb von main section bzw. article geben.

            Was bei dir „Haupt“ und was „Inhalt“ bedeuten sollen, ist mir unklar.

            Haupt/Kopf/header. Mit Inhalt meine ich alles zwischen header und footer.

            Du solltest dir nicht deine eigenen Begrifflichkeiten ausdenken.

            Außerdem könnte es sinnvoller sein, die Navigation im Markup hinter dem Hauptinhalt zu notieren:

            Welchen Sinn ergibt das?

            Den, dass der wichtige Inhalt zuerst im Dokument erscheint. Und zwar unabhängig von der Darstellung.

            Wenn ich beispielsweise navi links floaten möchte wird alles Nachfolgende rechts angeordnet. In Deinem Fall würde das nicht gehen?

            floating war nur eine Krücke, um mehrspaltige Darstellungen zu erreichen. Das sieht man daran, dass es auf die Reihenfolge im Quelltext ankommt. Floating ist gedacht um beispielsweise einen Text um ein Bild fließen zu lassen. Für mehrspaltige Darstellungen verwendet man heute flexbox

            Ich dachte immer die natürliche Reihenfolge wäre header/nav/Inhalt/footer?

            Es gibt keine ‚natürliche Reihenfolge‘. Zumindest muss die visuelle Reihenfolge nicht mit der im Quelltext übereinstimmen. Häufig ist es gut, wenn der wichtige Inhalt, zuerst im Quelltext steht.

            Bis demnächst
            Matthias

            --
            Signaturen sind bloed (Steel) und Markdown ist mächtig.
        2. Aber auch dieses gruppierende div ist nicht erforderlich, da mit body schon ein gruppierender Container vorhanden ist:

          Habe es mit dieser Variante ausprobiert. Komme damit aber nicht ganz zurecht. Anscheinend verlangt diese Form wieder andere Gestaltungsregeln. Ich habe folgenden code geschrieben:

          <!doctype html>
          <html lang="de">
          <head>
            <meta charset="utf-8" />
            <title></title>
          <style>
          html {
            background-color: red;
            }
          body {
            background-color: blue;
            width:250px;
            outline: 2px solid;
            }
          p {
            display: block;
            background-color: yellow;;
            }
          </style>
          </head>
          
          <body>
          <div>
          <main role="main">
          	<p>Ein Übungstext Ein Übungstext Ein Übungstext</p>
          </main>
          </div>
          
          <div>
          <table border="" frame="">
          	<td>Inhalt</td>
          	<td>Inhalt</td>
          </table>
          </div>
          
          </body>
          </html>
          
          

          Die Farben bzw. Rahmen dienen nur zur Erkennung der Bereiche bestimmter Blöcke.
          Wen ich entweder html oder body eine Hintergrundfarbe gebe, ändert sich überhaupt nichts. Sobald ich in beiden eine unterschiedliche Farbe setze wird der Absatz "p" in der Farbe dargestellt als bekäme p einen Hintergrund; in Wirklichkeit ist es der body. Setze ich für p eine dritte Farbe so sieht man diese Farbe und die des body verschwindet. Sind body und p nun gleich groß oder wie?

          Eine weitere Besonderheit fällt mir auf, daß folgende HTML-Elemente alle im body verbleiben. Wahrscheinlich eine Gewöhnungssache. Eine Darstellung wie üblich bekomme ich nicht. Da habe ich zwar auch body als Container, aber ich kann darin unterschiedliche Bereiche gestalten bzw. divs setzen. Im Beispiel aber habe ich alles im body, also in einem einzigen Container zusammengefaßt, abgesehen von html; es verschiebt sich alles nur um eine Ebene noch oben. Beispielsweise hat hier für p "margin-top" überhaupt keine Wirkung außer man setzt für p float: left. Also was macht das für einen Unterschied ob ich schreibe:

          <div>
            <header>
            <Inhalt>
            <footer>
          </div>
          oder ich setze body als container
            <header>
            <Inhalt>
            <footer>
          
          

          Ich erspare mir lediglich div im Anfan- und Endtag. Jedenfalls kommt mir vor, daß html- bzw. CSS-Elemente anders zu handhaben sind.

          --
          LG Franz
          1. Hallo

            Habe es mit dieser Variante ausprobiert. Komme damit aber nicht ganz zurecht. Anscheinend verlangt diese Form wieder andere Gestaltungsregeln. Ich habe folgenden code geschrieben:

            <!doctype html>
            <html lang="de">
            <head>
              <meta charset="utf-8" />
              <title></title>
            <style>
            html {
              background-color: red;
              }
            body {
              background-color: blue;
              width:250px;
              outline: 2px solid;
              }
            p {
              display: block;
              background-color: yellow;;
              }
            </style>
            </head>
            
            <body>
            <div>
            <main role="main">
            	<p>Ein Übungstext Ein Übungstext Ein Übungstext</p>
            </main>
            </div>
            
            <div>
            <table border="" frame="">
            	<td>Inhalt</td>
            	<td>Inhalt</td>
            </table>
            </div>
            
            </body>
            </html>
            
            

            Wen ich entweder html oder body eine Hintergrundfarbe gebe, ändert sich überhaupt nichts.

            Die jeweilig gesetzte Hintergrundfarbe, genauer die des „vorderen“ Elements, sollte zu sehen sein.

            Sobald ich in beiden eine unterschiedliche Farbe setze wird der Absatz "p" in der Farbe dargestellt als bekäme p einen Hintergrund; in Wirklichkeit ist es der body. Setze ich für p eine dritte Farbe so sieht man diese Farbe und die des body verschwindet. Sind body und p nun gleich groß oder wie?

            Sofern kein weiteres Element, das für sich Platz einnimmt, vorhanden ist, ja. Du gibst für body eine Breite vor. Die Höhe von body richtet sich, ohne weitere Vorgaben, nach seinem Inhalt. Dieser wird offensichtlich von p bestimmt. Wird die Tabelle überhaupt ausgegeben?

            Eine weitere Besonderheit fällt mir auf, daß folgende HTML-Elemente alle im body verbleiben. Wahrscheinlich eine Gewöhnungssache. Eine Darstellung wie üblich bekomme ich nicht. Da habe ich zwar auch body als Container, aber ich kann darin unterschiedliche Bereiche gestalten bzw. divs setzen. Im Beispiel aber habe ich alles im body, also in einem einzigen Container zusammengefaßt, abgesehen von html; es verschiebt sich alles nur um eine Ebene noch oben.

            Soweit, so richtig.

            Beispielsweise hat hier für p "margin-top" überhaupt keine Wirkung außer man setzt für p float: left.

            Das hat zu funktionieren. Wenn es nicht funktioniert, ist da noch eine andere Angabe, die dieser margin-Regel widerspricht.

            Also was macht das für einen Unterschied ob ich schreibe:

            Ich erspare mir lediglich div im Anfan- und Endtag.

            Ja, das ist erstmal alles. Es geht auch nicht darum, alle Elemente zwangsweise direkt in body zu notieren, sondern unnötige Elemente zu vermeiden. Wenn dein div ausschließlich dazu dienen soll, die weiteren Elemente direkt innerhalb des Elements body zu gruppieren, kannst du es auch weglassen und sie stattdessen mit body selbst gruppieren. Erfüllt das div noch andere Zwecke, ist es sinnvoll, es dennoch zu notieren.

            Jedenfalls kommt mir vor, daß html- bzw. CSS-Elemente anders zu handhaben sind.

            Das ist nicht zutreffend. Was allerdings zu wissen wichtig ist, ist, dass body je nach browser andere Standardvorgaben für margin und padding hat. Im Firefox z.B. hat body einen margin von ca. 25px.

            Tschö, Auge

            --
            Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
            Terry Pratchett, „Gevatter Tod“
          2. Hallo,

            die von dir beobachteten Verhaltensweisen sind normal. In seriösen Lehrbüchern oder Lernkursen wird darauf auch eingegangen. Anfänger, die sich damit nicht beschäftigt haben werden davon halt überrascht.

            Habe es mit dieser Variante ausprobiert.

            Das div um das main-Element ist unnötig.

            Anscheinend verlangt diese Form wieder andere Gestaltungsregeln.

            Nein. Es gibt bestimmte Regeln an die sich die Browser halten. Die sollte man halt lernen wenn man Webseiten erstellen möchte. Das sogenannte Grundlagenwissen.

            Wen ich entweder html oder body eine Hintergrundfarbe gebe, ändert sich überhaupt nichts.

            Das Verhalten ist zwar gewöhnungsbedürftig aber so vorgesehen. Auch wenn der body kleiner als html ist füllt seine Hintergrundfarbe (und auch sein Hintergrundbild) das gesamten Fenster, sofern dem html keine eigene Hintergrundfarbe zugewiesen wurde.

            Beispielsweise hat hier für p "margin-top" überhaupt keine Wirkung

            Falsch. Gib dem p mal ein etwas größeres margin-top, zum Beispiel 100px oder noch mehr. Wenn du dich dann darüber wunderst dass der gesamte body nach unten verschoben wird solltest du dich mit den "collapsing margins" beschäftigen. Auch das ist ein vorgegebenes Verhalten.

            oder ich setze body als container

            Das ist die bessere Lösung.

            Gruss

            MrMurphy

            1. Habe jetzt eine generelle Frage:
              Es gibt als Container den

              Viewport
              html
              body

              Wäre es vernünftiger gleich mit Viewport als obersten Container anzufangen oder mit body?

              --
              LG Franz
              1. @@franzsen

                Habe jetzt eine generelle Frage:
                Es gibt als Container den

                Viewport
                html
                body

                Wäre es vernünftiger gleich mit Viewport als obersten Container anzufangen oder mit body?

                Was meinst du mit „anfangen“? Anfangen zu stylen?

                Mit dem html-Element, welches den Viewport ausfüllt. Denn eventuell willst du

                • Inhalte aus dem head anzeigen

                • den body nicht den ganzen Viewport ausfüllen lassen, sondern ihm max-width geben (Beispiel)

                LLAP 🖖

                --
                Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
                1. @@franzsen

                  Habe jetzt eine generelle Frage:
                  Es gibt als Container den

                  Viewport
                  html
                  body

                  Wäre es vernünftiger gleich mit Viewport als obersten Container anzufangen oder mit body?

                  Was meinst du mit „anfangen“? Anfangen zu stylen?

                  Ich meinte damit welcher der Container an erster Stelle genommen werden soll? Inzwischen habe ich mir angewöhnt den body als obersten container zu nehmen. Nun habe ich einige Sachen über Viewport gelesen, daß dieser ebenfalls als container gesehen wird; Soll dieser der oberste container sein?

                  Mit dem html-Element, welches den Viewport ausfüllt. Denn eventuell willst du

                  Habe ich da etwas mißverstanden? Ist etwa der Viewport mit dem html-Element gleichzusetzen?
                  Schwierigkeiten habe ich da mit "flex". Wo stehen dann die Elemente wenn ich schreibe

                  html {display: flex;}
                  

                  Mit body geht das.

                  • Inhalte aus dem head anzeigen

                  Da habe ich schon etwas gelesen, bin nicht weiter auf das Thema eingegangen. Für die Erstellung einer Webseite ist es für den Anfang noch nicht so wichtig.

                  --
                  LG Franz
                  1. @@franzsen

                    Habe ich da etwas mißverstanden? Ist etwa der Viewport mit dem html-Element gleichzusetzen?

                    Irgendein Element muss es ja sein; das Wurzelelement html liegt nahe.

                    Schwierigkeiten habe ich da mit "flex". Wo stehen dann die Elemente wenn ich schreibe

                    html {display: flex;}
                    

                    Flexbox richtet dessen Kindelemente aus.

                    Mit html {display: flex} machst du also head und body zu Flexitems; mit head {display: none} (aus dem Browserstylesheet) bleibt nur body übrig.

                    Mit body geht das.

                    Dann sind ja die Kindelemente von body die Flexitems.

                    LLAP 🖖

                    --
                    Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
                    1. @@franzsen

                      Manchmal ist es wie verhext. In diesem Beispiel funktioniert

                      justify-content: space-araound
                      

                      tadellos.

                      <!doctype html>
                      <html lang="de">
                      
                      <head>
                      	<meta charset="utf-8" />
                      	<title></title>
                      
                      <style>
                      body {
                      	margin: 0;
                      	padding: 0;
                      	}
                      #container {
                      	width:90%;
                      	height:300px;
                      	background:#fff;
                      	display: flex;
                          justify-content: space-around;
                      	outline: 2px solid;
                      	margin-top: 20px;
                      	margin-left: auto;
                      	margin-right: auto;
                      	}
                      #box1 {
                      	background:red;
                      	width:20%;
                      	}
                      #box2 {
                      	background:yellow;
                      	width:20%;
                      	}
                      #box3 {
                      	background:green;
                      	width:20%;
                      	}
                      #box4 {
                      	background:blue;
                      	width:20%;
                      	}
                      ul {
                      	display: flex;
                          justify-content: space-around;
                      	list-style: none;
                      	}
                      li {
                      	outline: 2px solid;
                      	}
                      </style>
                      </head>
                      
                      <body>
                      <nav>
                      	<ul>
                      		<li>Liste 1</li>
                      		<li>Liste 2</li>
                      		<li>Liste 3</li>
                      		<li>Liste 4</li>
                      	</ul>
                      </nav>
                      <div id="container">
                          <div id="box1">Box 1</div>
                          <div id="box2">Box 2</div>
                          <div id="box3">Box 3</div>
                          <div id="box4">Box 4</div>
                      </div>
                      </body>
                      </html>
                      

                      In diesem Beispiel bringe ich es nicht zuwege:

                      <!doctype html>
                      <html lang="de">
                      
                      <head>
                      	<meta charset="utf-8">
                      	<title></title>
                      <style>
                      body {
                      	margin: 0;
                      	padding: 0;
                      	}
                      ul {
                      	width: 900px;
                      	height: 70px;
                      	background-color: white;
                      	display: flex;
                              justify-content: space-around;
                      	list-style: none;
                      	margin-top: 10px;
                      	align-items: center;
                      	margin-left: auto;
                      	margin-right: auto;
                      	outline: 2px solid;
                      	}
                      li {
                      	background-color: red;
                      	width: 200px;
                      	height: 80%;
                      	flex-item: flex-start;
                      	font-size: 15px;
                      	margin: auto;
                      	outline: 2px solid;
                      	}
                      ul a {
                      	display:block;
                      	text-decoration: none;
                      	padding-top: auto;
                      	padding-bottom: auto;
                      	font-size: larger;
                      	text-align: center;
                      	}
                      ul a:hover {
                      	background-color: darken(deepskyblue, 5%);
                      	}
                      </style>
                      </head>
                      
                      <body>
                      	<ul>
                      		<li><a href="Allgemein.html">Allgemein</a></li>
                      		<li><a href="Schwein.php">Schwein</a></li>
                      		<li><a href="Rind.php">Rind</a></li>
                      		<li><a href="Geflügel.php">Geflügel</a></li>
                      		<li><a href="Ziege.php">Ziege</a></li>
                      		<li><a href="Lamm.php">Lamm</a></li>
                      		<li><a href="Kaninchen.php">Kaninchen</a></li>
                      		<li><a href="Wild.php">Wild</a></li>
                      		<li><a href="Fisch.php">Fisch</a></li>
                      		<li><a href="Suppen.php">Suppen</a></li>
                      	</ul>
                      </body>
                      </html>
                      

                      Ursprünglich war dieser Navigator mit einer Tabelle formatiert. In der neuen Webseite möchte ich das mit "flex" gestalten.

                      --
                      LG Franz
                      1. Hallo,

                        Erstes Beispiel ul-Liste:

                        Keine Breite der items (li) angegeben - items werde so breit wie ihr Inhalt - items haben genügend Platz sich horizontal zu verteilen

                        Erstes Beispiel div:

                        Breite der items (div) jeweils 20% - bleiben 20% für die items um sich horizontal zu verteilen

                        Zweites Beispiel:

                        items (li) haben eine Breite von jeweils 200px - macht bei 10 items 2000px - Breite des übergeordneten Containers 900px - items müssen schrumpfen und füllen den gesamten Container aus - flexbox funktioniert, items haben aber keinen Platz sich zu verteilen

                        Zusatzinfo, hat nichts mit deinem Problem zu tun:

                        flex-item: flex-start;
                        

                        flex-item gibt es nicht als Attribut. Falls du flex meinst gibt es dafür keinen Wert flex-start

                        Gruss

                        MrMurphy

                        1. @@MrMurphy1

                          flex-item: flex-start;
                          

                          flex-item gibt es nicht als Attribut. Falls du flex meinst gibt es dafür keinen Wert flex-start

                          In CSS gibt es keine Attribute. Falls du „Eigenschaft“ meinst …

                          LLAP 🖖

                          --
                          Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
                        2. Keine Breite der items (li) angegeben - items werde so breit wie ihr Inhalt - items haben genügend Platz sich horizontal zu verteilen

                          In diesem Fall geht es mir nicht um Textinhalt der die Größe der items bestimmt, sondern um gleichmäßige Verteilung bzw. einheitliche Darstellung.

                          items (li) haben eine Breite von jeweils 200px - macht bei 10 items 2000px - Breite des übergeordneten Containers 900px - items müssen schrumpfen und füllen den gesamten Container aus - flexbox funktioniert, items haben aber keinen Platz sich zu verteilen

                          Verflixt. Einfach und doch ...
                          Habe inzwischen das Problem bereinigt. Außerdem bin ich nun selber darauf gekommen (selber darauf gekommen - Eigenlob) warum justify-content: space around; nicht funktioniert. Ul hat ja eine Einrückung und daher konnte die Verteilung auf der linken Seite nicht berücksichtigt werden. Habe daher margin und padding auf null gesetzt.

                          <!doctype html>
                          <html lang="de">
                          
                          <head>
                          	<meta charset="utf-8">
                          	<title></title>
                          <style>
                          body {
                          	margin: 0;
                          	padding: 0;
                          	background-color: aqua;
                          	}
                          ul {
                          	margin: 0;
                          	padding: 0;
                          	width: 910px;
                          	height: 70px;
                          	background-color: white;
                          	display: flex;
                          	list-style: none;
                          	margin-top: 10px;
                          	margin-left: auto;
                          	margin-right: auto;
                          	align-items: center;
                              justify-content: space-around;
                          	outline: 2px solid;
                          	}
                          li {
                          	background-color: red;
                          	width: 80px;
                          	height: 80%;
                          	font-size: 15px;
                          	outline: 2px solid;
                          	}
                          ul a {
                          	display:block;
                          	text-decoration: none;
                          	font-size: larger;
                          	text-align: center;
                          	}
                          ul a:hover {
                          	background-color: darken(deepskyblue, 5%);
                          	}
                          </style>
                          </head>
                          
                          <body>
                          	<ul>
                          		<li><a href="Allgemein.html">Allgemein</a></li>
                          		<li><a href="Schwein.php">Schwein</a></li>
                          		<li><a href="Rind.php">Rind</a></li>
                          		<li><a href="Geflügel.php">Geflügel</a></li>
                          		<li><a href="Ziege.php">Ziege</a></li>
                          		<li><a href="Lamm.php">Lamm</a></li>
                          		<li><a href="Kaninchen.php">Kaninchen</a></li>
                          		<li><a href="Wild.php">Wild</a></li>
                          		<li><a href="Fisch.php">Fisch</a></li>
                          		<li><a href="Suppen.php">Suppen</a></li>
                          	</ul>
                          </body>
                          </html>
                          

                          Was ich noch nicht hinbekommen habe ist, den Text vertikal zu zentrieren.
                          Wieso funktioniert "hover" nicht?

                          --
                          LG Franz
                          1. Hallo franzsen,

                            ul a:hover {
                            	background-color: darken(deepskyblue, 5%);
                            	}
                            

                            Wieso funktioniert "hover" nicht?

                            Wahrscheinlich weil du der Eigenschaft background-color keinen gültigen Wett zuweist.

                            Bis demnächst
                            Matthias

                            --
                            Signaturen sind bloed (Steel) und Markdown ist mächtig.
                            1. @@Matthias Apsel

                              ul a:hover {
                              	background-color: darken(deepskyblue, 5%);
                              	}
                              

                              Wahrscheinlich weil du der Eigenschaft background-color keinen gültigen Wett zuweist.

                              Oder franzsen hat vergessen zu erwähnen, dass er uns SCSS-Code, nicht CSS-Code zeigt.

                              LLAP 🖖

                              --
                              Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
                              1. Oder franzsen hat vergessen zu erwähnen, dass er uns SCSS-Code, nicht CSS-Code zeigt.

                                Upps!!!

                                --
                                LG Franz
                          2. Hallo

                            Ul hat ja eine Einrückung und daher konnte die Verteilung auf der linken Seite nicht berücksichtigt werden.

                            Das es dir um die linke Einrückung ging hast du nicht geschrieben. Ich habe das als bekannt vorausgesetzt.

                            Habe daher margin und padding auf null gesetzt.

                            padding hätte gereicht.

                            Wieso funktioniert "hover" nicht?

                            Weil die Anweisung

                            darken(deepskyblue, 5%);
                            

                            keine Farbe ist.

                            Was ich noch nicht hinbekommen habe ist, den Text vertikal zu zentrieren.

                            Dazu mussen die a-Elemente innerhalb der li-Elemente zentriert werden, zum Beispiel mit Flexbox.

                            Gruss

                            MrMurphy

                            1. Hi,

                              Habe daher margin und padding auf null gesetzt.

                              padding hätte gereicht.

                              je nach Browser. Manche realisieren die Einrückung von Listen durch padding-left für ol/ul, manche durch margin-left für li.

                              So long,
                               Martin

                              1. Hallo Der Martin,

                                Habe daher margin und padding auf null gesetzt.

                                padding hätte gereicht.

                                je nach Browser. Manche realisieren die Einrückung von Listen durch padding-left für ol/ul, manche durch margin-left für li.

                                Ist das tatsächlich immer noch so? IE, FF, Chr, Op12, Op32, Saf5 unter Windows zeigen übereinstimmend 40px padding-left für die ul/ol. https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Listen7.html und das obwohl in dieser informativen Eränzung des W3C margin-left: 40px vermerkt ist.

                                Siehe etwa http://www.tagindex.net/css/list/margin_padding.html

                                Bis demnächst
                                Matthias

                                --
                                Signaturen sind bloed (Steel) und Markdown ist mächtig.
                                1. Hallo,

                                  je nach Browser. Manche realisieren die Einrückung von Listen durch padding-left für ol/ul, manche durch margin-left für li.

                                  Ist das tatsächlich immer noch so?

                                  davon bin ich jetzt stillschweigend ausgegangen. Ich selbst habe das vor schätzungsweise zwei bis drei Jahren mal ausprobiert und zwischen Opera, Firefox und IE genau die beschriebenen Unterschiede festgestellt, wobei ich jetzt nicht mehr genau weiß, wer's wie machte. Ich habe daraus jedenfalls die Erkenntnis abgeleitet, sowohl padding für ol/ul, als auch margin für li zu berücksichtigen (also explizit festzulegen).

                                  IE, FF, Chr, Op12, Op32, Saf5 unter Windows zeigen übereinstimmend 40px padding-left für die ul/ol. https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Listen7.html und das obwohl in dieser informativen Eränzung des W3C margin-left: 40px vermerkt ist.

                                  Interessant.

                                  Siehe etwa http://www.tagindex.net/css/list/margin_padding.html

                                  Ich würde mich trotzdem nicht darauf verlassen, wenn ich eine bestimmte Darstellung erreichen möchte.

                                  Ciao,
                                   Martin

                            2. Was ich noch nicht hinbekommen habe ist, den Text vertikal zu zentrieren.

                              Dazu mussen die a-Elemente innerhalb der li-Elemente zentriert werden, zum Beispiel mit Flexbox.

                              Aha! Das heißt, ich muß li wieder als Container umfunktionieren damit "a" zu items werden und der flex-code anwendbar ist. Außerdem konnte ich den code etwas verkürzen. Das wäre eigentlich der fertige code. Ich denke, daß ich nichts übersehen oder zu viel geschrieben habe:

                              <!doctype html>
                              <html lang="de">
                              
                              <head>
                              	<meta charset="utf-8">
                              	<title></title>
                              <style>
                              body {
                              	margin: 0;
                              	padding: 0;
                              	background-color: aqua;
                              	}
                              ul {
                              	padding: 0;
                              	width: 900px;
                              	height: 70px;
                              	background-color: white;
                              	display: flex;
                              	list-style: none;
                              	margin-top: 10px;
                              	margin-left: auto;
                              	margin-right: auto;
                              	align-items: center;
                                  justify-content: space-around;
                              	outline: 2px solid;
                              	}
                              li {
                              	background-color: red;
                              	width: 80px;
                              	height: 80%;
                              	font-size: 15px;
                              	display: flex;
                              	align-items: center;
                                  justify-content: space-around;
                              	outline: 1px solid;
                              	}
                              a {
                              	text-decoration: none;
                              	font-size: larger;
                              	}
                              a:hover {
                              	color: white;
                              	}
                              </style>
                              </head>
                              
                              <body>
                              	<ul>
                              		<li><a href="Allgemein.html">Allgemein</a></li>
                              		<li><a href="Schwein.html">Schwein</a></li>
                              		<li><a href="Rind.html">Rind</a></li>
                              		<li><a href="Geflügel.html">Geflügel</a></li>
                              		<li><a href="Ziege.html">Ziege</a></li>
                              		<li><a href="Lamm.html">Lamm</a></li>
                              		<li><a href="Kaninchen.html">Kaninchen</a></li>
                              		<li><a href="Wild.html">Wild</a></li>
                              		<li><a href="Fisch.html">Fisch</a></li>
                              		<li><a href="Suppen.html">Suppen</a></li>
                              	</ul>
                              </body>
                              </html>
                              

                              Auffällig ist, daß der rechte und linke Freiraum kleiner ist als der Zwischenraum?

                              Weiters habe gesehen, daß statt <ul> <ul class= "navigator"> geschrieben wird. Ist das nicht unnötig; ebenfalls im CSS-code "ul li" anstatt nur li. Einen Sinn würde es machen wenn ich mehrere navs habe.

                              --
                              LG Franz
  3. Habe jetzt auch die Fußzeile in eine flexbox umgeändert. Soweit funktioniert ja alles. Leider bringe ich wieder einen Teil nicht so hin wie ich möchte.
    Die mail-Adresse ist ausgeblendet. Dazu habe ich die Breite verkleinert. Mit "hover" wird die Breite schrittweise auf die Länge des Textes erhöht. So weit so gut. Es funktioniert ja. Allerdings erfolgt auf Grund der Breitenänderung ein Zeilenumbruch. Wenn ich es hinbrächte, daß der Text nach hover zentriert wäre, würde das kein Problem machen. Der Text "e-Post" ist ja als item in der Mitte. Warum bleibt es nicht mittig wenn mit hover der gesamte Text wieder vorhanden ist? Gebe ich die Breite weg, sieht man den gesamte Text mittig. Vertical-aligne funktionieren ja mit flexbox nicht.

    <!doctype html>
    <html lang="de">
    
    <head>
    	<meta charset="utf-8">
    	<title></title>
    
    <style>
    * {
    	margin: 0;
    	padding: 0;
    	}
    footer {
    	background-color: black;
    	color: yellow;
    	}
    ul {
    	list-style-type: none;
    	display:flex;
    	width: 100%;
    	height: 5em;
    	padding: 0 15px 0 15px;
    	justify-content: space-between;
    	align-items: center;
    	}
    .adresse {
    	width: 75px;
    	height: 20px;
    	overflow: hidden;
    	cursor: pointer;
    	text-indent: 5px;
    	transition: ease-in-out; 
    	transition-property: width,  background-color, border-color;
    	transition-duration: 0.5s,  0.5s, 0.5s;
    	transition-delay: 0s,  0.5s, 0.5s;
    	}
    a {
    	color: lightblue;
    	}
    .adresse:hover{
    	border-radius: 10px;
    	border: 4px solid yellow;
    	width: 270px;
    	height: 30px;
    	background-color: brown;	
    	}
    </style>
    </head>
    
    <body>
    <footer>
    	<ul>
    		<li class="adresse"> @ e-Post: 
    			<a href="mailto:pree.franz-homepage@aon.at">p.franz-homepage@aon.at</a></li>
    		<li>Erstellt mit Apple - Optimiert für Safari 9.0.</li>
    		<li>Aktualisiert am 13.10.2015</li>
    	</ul>
    </footer>
    </body>
    </html>
    
    

    Kann mir da jemand auf die Sprünge helfen?

    Wenn ich das geschafft habe, kann ich mich dem mittleren Teil widmen.

    LG Franz

    --
    LG Franz
    1. Upps! Habe ich eine falsche Frage gestellt weil keine Reaktion erfolgt?

      Habe inzwischen die Lösung nach mehreren Versuchen gefunden. Habe es auch schon in die Hauptseite eingebaut die ich ebenfalls als flexbox umgebaut habe. Schwierigkeiten macht mir wiederum das vertikale Zentrieren des Textes im header.

      <!doctype html>
      <html lang="de">
      
      <head>
      	<meta charset="utf-8" />
          <meta name="author" content="Pree Franz">
      	<title>Meine Homepage</title>
      
      <style>
      * {
      	margin: 0;
      	padding: 0;
      	}
      body {
      	background: URL(Graphiken/Geripped_fein.PNG);
      	}
      /*******************************Flexbox*******************************/
      #gesammt {
      	width: 70%;
      	margin-left: auto;
      	margin-right: auto;
      	display: flex;
      	flex-direction: column;
      	flex-wrap: wrap;
      	}
      header {
      	background: black;
      	margin-top: 10px;
      	height: 5em;
      	text-align: center;
      	color: white;
      	}
      header h1 {
      	}
      #zentrum {
      	display: flex;
      	justify-content: space-between;
      	}
      main {
      	background-color: white;
      	width: 86.6%;
      	padding-top: 10px;
      	padding-left: 20px;
      	}
      #navi h1 {
      	padding-top: 5px;
      	padding-bottom: 10px;
      	}
      #zentrum, #footer {
      	margin-top: 10px;
      	}
      /*******************************Navigator*******************************/
      #navi {
      	background-color: black;
      	min-width: 5%;
      	color: yellow;
      	padding-top: 15px;
      	padding-left: 20px;
      	padding-right: 20px;
      	padding-bottom: 10px;
      	border-right: 2px solid red;
      	}
      #navi a {
      	color: yellow;
      	display: block;
      	padding: 2px 0px;
      	text-decoration: none;
      	}
      #navi ul ul li {
      	margin-left: 1.5em;
      	padding: 0;
      	}
      #navi ul {
      	list-style-type: none;
      	margin: 2px 0px;
      	padding: 0;
      	text-align: left;
      	}
      #navi a:link, a:visited {
      	color: yellow;	
      	}
      #navi a:hover, nav a:focus, nav a:active {
      	color: lightblue;
      	margin-left: -5px;
      	letter-spacing: 1px;
      	text-decoration: underline;
      	}
      /********************************Footer********************************/
      #footer {
      	background-color: black;
      	color: yellow;
      	}
      #footer ul {
      	list-style-type: none;
      	display:flex;
      	height: 5em;
      	padding: 0 15px 0 15px;
      	justify-content: space-between;
      	align-items: center;
      	}
      .adresse {
      	height: 20px;
      	cursor: pointer;
      	transition: ease-in-out; 
      	transition-property: width,  background-color, border-color;
      	transition-duration: 0.5s,  0.5s, 0.5s;
      	transition-delay: 0s,  0.5s, 0.5s;
      	}
      .adresse a {
         font: 0/0 serif;
         z-index: -1;
      	}
      .adresse a {
      	color: lightblue;
      	}
      .adresse:hover a {
      	text-decoration: none;
      	border-radius: 10px;
      	border: 2px solid yellow;
      	background-color: brown;	
      	padding: 5px;
      	font: inherit;
      	z-index: auto;
      	}
      /********************************************************************/
      
      </style>
      </head>
      
      <body>
      <div id="gesammt">
      	<header>
      		<h1>Meine Internetseite</h1>
      	</header>
      <div id="zentrum">
      	<nav id="navi">
                <h1>Inhalt</h1>
                <hr>
                <ul>
                  <li><a href="#In eigener Sache">In eigener Sache</a></li>
                  <li><a href="#Ahnenforschung">Ahnenforschung</a></li>
                  <li><a href="#Rezepte">Rezepte</a>
                    <ul>
                      <li><a href="#Abkuerzungen">Abkürzungen</a></li>
                      <li><a href="#Beilagen">Beilagen</a></li>
                      <li><a href="#Gebaeck">Gebäck</a></li>
                      <li><a href="#Getraenke">Getränke</a></li>
                      <li><a href="#Fleischspeisen">Fleischspeisen</a></li>
                      <li><a href="#Mehlspeisen">Mehlspeisen</a></li>
                      <li><a href="#Suesspeisen">Süßspeisen</a></li>
                      <li><a href="#Eisrezepte">Eisrezepte</a></li>
                      <li><a href="#Kuchen">Kuchen</a></li>
                      <li><a href="#Torten">Torten</a></li>
                      <li><a href="#Puddings">Puddings</a></li>
                      <li><a href="#Marmeladen">Marmeladen</a></li>
                      <li><a href="#Weihnachtsbaeckereien">Weihnachtsbäckereien</a></li>
                    </ul>
                  </li>
                  <li><a href="#Garten">Garten</a>
                    <ul>
                      <li><a href="#Allgemein">Allgemein</a></li>
                      <li><a href="#Carnivoren">Carnivoren</a></li>
                      <li><a href="#Orchideen">Orchideen</a></li>
                      <li><a href="#Kakteen">Kakteen</a></li>
                      <li><a href="#Teich">Teich</a></li>
                      <li><a href="#Steingarten">Steingarten</a></li>
                      <li><a href="#Gemuesegarten">Gemüsegarten</a></li>
                    </ul>
                  </li>
                  <li><a href="#Sprueche">Sprüche</a></li>
                  <li><a href="#Witze">Witze</a></li>
                  <li><a href="#Links">Links</a></li>
                  <li><a href="#Urheberrecht">Urheberrecht</a></li>
                  <li><a href="#Suchmaschinen">Suchmaschinen</a></li>
                  <li><a href="#Foren">Foren</a></li>
                  <li><a href="#Gaestebuch">Gästebuch</a></li>
                <li><a href="#Zurück zum Hauptmenü">Zurück zum Hauptmenü</a></li>
                <li><a href="#Zur Sprachenauswahl">Zur Sprachenauswahl</a></li>
              </ul>
            </nav>
      	<main role="main">
            <h2>Herzlich Willkommen</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <h2>Was Sie alles hier finden</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      	</main>
      </div>
      
      	<footer>
      	<nav id="footer">
      	<ul>
      		<li class="adresse"> @ e-Post: 
      			<a href="mailto:pree.franz-homepage@aon.at">p.franz-homepage@aon.at</a></li>
      		<li>Erstellt mit Apple - Optimiert für Safari 9.0.</li>
      		<li>Aktualisiert am 13.10.2015</li>
      	</ul>
      	</nav>
      	</footer>
      </div>
      
      </body>
      </html>
      
      

      Vielleicht kann ich hier mit einer Antwort hoffen.

      --
      LG Franz
      1. Hallo

        Upps! Habe ich eine falsche Frage gestellt weil keine Reaktion erfolgt?

        Ich kann nur für mich schreiben: Dir helfen zu wollen ist anstrengend und frustrierend.

        Die Antworten gehen bei dir anscheinend zum einen Auge rein und zum anderen gleich wieder raus. Das ist jetzt zum Beispiel innerhalb kurzer Zeit bereits mindestens die dritte Frage von dir zum Thema vertikales zentrieren.

        Jedesmal muss sich jeder einzelne der Hilfswilligen aus deinen Angaben Webseiten erstellen, weil du zu faul bist deine online bereit zu stellen.

        Allmählich fühle ich mich von dir als Antwortroboter mißbraucht und nicht als Mensch der dir helfen möchte.

        Ich habe jetzt nicht nachgeschaut, aber wahrscheinlich habe ich dir bereits geschrieben, dass die Höhe von Elementen nur in Ausnahmefällen mit der heigt-Eigenschaft vorgegeben werden soll. Darum kümmern sich die Browser selbst. Und was finde ich? height: 5em;.

        Im Endeffekt läuft deine Lernunwilligkeit drauf hinaus, dir auf komplizierte und zeitaufwändige Art eine komplette Webseite zu erstellen. Wenn du beschrieben hättest wie die Seite aussehen soll ist die von einer Person in 10 Minuten erstellt. Statt dessen haben hier viele Leute für dich bereits Stunden investiert und von den Antworten haben dich gefühlt nicht mal 5% interessiert.

        Gruss

        MrMurphy

        1. Ich kann nur für mich schreiben: Dir helfen zu wollen ist anstrengend und frustrierend.

          Die Antworten gehen bei dir anscheinend zum einen Auge rein und zum anderen gleich wieder raus. Das ist jetzt zum Beispiel innerhalb kurzer Zeit bereits mindestens die dritte Frage von dir zum Thema vertikales zentrieren.

          Nun, ich nehme mir als Anfänger in Anspruch Fragen mehrfach zu stellen, insbesondere dann wenn das Problem in einem anderen Zusammenhang vorkommt. Manchmal scheinen bestimmte Fragen einfach zu sein und manche nicht. Das ist aber immer eine Sichtweise. Ich habe in Kursen erlebt, daß Erwachsene oft Fragen stellten die meiner Meinung nach läppisch waren, aber halt nicht aus der Sicht des Fragenden. Umgekehrt ist es sicherlich den anderen Kursteilnehmern gegangen wenn ich eine Frage stellte. Wie muß es erst dem Vortragenden gehen der ja in der Regel alles weiß; und erst den Lehrern in der Schule. Darum gibt es ja auch oft Wiederholungen um den Stoff aufzufrischen und Fragen zu stellen falls etwas doch noch nicht ganz klar ist. Nun, hier ist weder eine Schule noch ein Kurs sondern ein Forum mit freiwilligen Helfern aber die Lernenden und die in der Natur der Sache liegenden Probleme sind die gleichen. Ja, und manchmal hat man halt ein Brett vorm Kopf. Vielleicht kannst Dich noch an die Frage erinnern warum die items keine unterschiedliche Breite annehmen. Die Lösung war ja einfach; der Container war kleiner als die Summe der items und jemand von hier hat mich darauf aufmerksam gemacht.

          Jedesmal muss sich jeder einzelne der Hilfswilligen aus deinen Angaben Webseiten erstellen, weil du zu faul bist deine online bereit zu stellen.

          Na, jetzt hast Du Dich ein wenig im Ton vergriffen. Ich wußte gar nicht, daß es auch hier Leute gibt die die Geduld verlieren und ausfällig werden wenn andere halt einen anderen Intelligenzquotienten haben. Wie lauten die Forenregeln: ...gutes Klima, ein netter Umgangston, formuliere höflich und wertschätzend, ... Ich hatte schon ein paar mal die Webseite online gestellt und manchmal hier. Also von Faulheit zu sprechen? Da hast halt nicht nachgedacht als Du das geschrieben hast. Bist halt auch nicht perfekt. Es hätte ein Einzeiler genügt zu schreiben, daß vollständige Seiten online bevorzugt werden.

          Allmählich fühle ich mich von dir als Antwortroboter mißbraucht und nicht als Mensch der dir helfen möchte.

          Also, mißbraucht wird immer mit Gewalt, Betrug, etc. aber kein freiwilliger Helfer.

          Ich habe jetzt nicht nachgeschaut, aber wahrscheinlich habe ich dir bereits geschrieben, dass die Höhe von Elementen nur in Ausnahmefällen mit der heigt-Eigenschaft vorgegeben werden soll. Darum kümmern sich die Browser selbst. Und was finde ich? height: 5em;.

          Aber ich habe nachgeschaut. Wenn etwas optisch gestaltet werden soll, bleibt es nicht erspart einem item eine Höhe vorzugeben. Jedesmal deren Höhe dem Inhalt zu überlassen geht meiner Meinung nicht immer. In meinem Fall ging es um die Zentrierung der Überschrift im Header. Inzwischen habe ich das Problem gelöst.

          Im Endeffekt läuft deine Lernunwilligkeit drauf hinaus, dir auf komplizierte und zeitaufwändige Art eine komplette Webseite zu erstellen. Wenn du beschrieben hättest wie die Seite aussehen soll ist die von einer Person in 10 Minuten erstellt. Statt dessen haben hier viele Leute für dich bereits Stunden investiert und von den Antworten haben dich gefühlt nicht mal 5% interessiert.

          Findest Du? Wenn Du meine Fragen genau anschaust geht es nie um eine Webseite sondern immer um Detailfragen; wenn also bestimmte Dinge nicht so funktionieren wie sie angeblich sollen. Inzwischen habe ich das mit der Emailadresse (transition) alleine gelöst und die letzte Frage des vertikalen Zentrierens eines Textes in einem item ebenso. Ich arbeite also sehr wohl an einer Problemlösung. Wenn ich lernunwillig wäre würden keine Fragen entstehen. Ich habe nicht vor den Auftrag zu erteilen mir eine Webseite zu erstellen den schließlich möchte ich sie selber gestalten sonst bräuchte ich ja HTML und CSS nicht lernen. Und, als Anfänger hat man vom Aussehen seiner Webseite eine andere Vorstellung als ein versierter und daher ändert diese sich laufend weil man darauf kommt man könnte dieses und jenes anders gestalten. Also nur Fragen zu Auswirkungen bestimmter einzelner Codes und keine Fragen zur Weberstellung.
          Mit welchem Schlüssel Du die 5% ausgerechnet hast ist auch lustig.

          --
          LG Franz
          1. @@franzsen

            Ich habe jetzt nicht nachgeschaut, aber wahrscheinlich habe ich dir bereits geschrieben, dass die Höhe von Elementen nur in Ausnahmefällen mit der heigt-Eigenschaft vorgegeben werden soll. Darum kümmern sich die Browser selbst. Und was finde ich? height: 5em;.

            Aber ich habe nachgeschaut. Wenn etwas optisch gestaltet werden soll, bleibt es nicht erspart einem item eine Höhe vorzugeben. Jedesmal deren Höhe dem Inhalt zu überlassen geht meiner Meinung nicht immer.

            Dafür geht einer Box eine feste Höhe vorzugeben so gut wie nie. Du kannst kaum sicher sein, wieviel Höhe der Inhalt bei jedem Nutzer wirklich benötigt.

            Was du tun kannst ist, einer Box eine Mindesthöhe (min-height) zu geben, sie also bei Bedarf größer werden zu lassen.

            “I think it’s better to suffer some layout breakage than to kill content for the users.”Katie K.

            LLAP 🖖

            --
            Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
            1. Dafür geht einer Box eine feste Höhe vorzugeben so gut wie nie. Du kannst kaum sicher sein, wieviel Höhe der Inhalt bei jedem Nutzer wirklich benötigt.

              In meinem Fall werden nur der header und footer mit einer fixen Höhe festgelegt. Das geschieht eigentlich nur aus gesammt-kosmetischen Gründen. Der Inhalt ändert sich bei Beiden ja nie. Ist eine Mindesthöhe dann erforderlich? Ich könnte zwar die Höhe heraus nehmen und genügend Padding-top und padding-bottom setzen. Dann würden auch der header und footer flexibel und die Überschrift vertikal zentriert bleiben. Link

              Was du tun kannst ist, einer Box eine Mindesthöhe (min-height) zu geben, sie also bei Bedarf größer werden zu lassen.

              Der Mittelteil "#zentrum" (Navigator und Text) bleiben flexibel; in diesem Fall bestimmt der Navigator die Höhe. Ich habe aber schon überlegt wie die gesamte Seite ausgefüllt bleibt wenn ich die Navigatorliste verändere? Verwende ich also Garten und Rezepte als link ohne Liste schrumpft alles zusammen und auf größeren Monitoren schaut das etwas verloren aus. Beide links als aufklappbar zu machen ist auch nicht klar. Ich könnte dafür zwar "min-widht" setzen damit der Listentext nicht über den items-Rand läuft, aber die Höhe ist damit nicht gelöst. Welche Probleme ergeben sich für mobile Monitore bei "min-height" wenn sie kleiner kleiner als die Mindesthöhe sind? In meinem Fall müßte das bei "zentrum" gesetzt werden? Wenn ich das Browserfenster verändere tut sich überhaupt nichts. Ganz gleich wieviel Prozente ich eingebe. Keinen Effekt bei "#zentrum"zeigt dabei auch "flex-wrap: row wrap;".

              --
              LG Franz