Hugo Egon Balder: DIV Suppe

Hallo Forum!

Ich möchte bei der Erstellung von html5 Ressourcen so weit als möglich die neuen strukturierenden Tags verwenden.

Beim Design eines CMS/Blogs, in dessen umfangreichen CSS auch ein 'Sticky Footer' steckt, kommt es bei Paddings und Margins immer wieder zu unerwünschten Darstellungen in verschiedenen Browsern. Zumindest, solange ich _überhaupt keine_ divs verwende.

Alle meine Designprobleme verschwinden allerdings, sobald ich zusätzlich 2 div Container benutze. Außer diesen 2 Containern ('outer_wrapper' und 'inner_wrapper') werden keine weiteren divs mehr verwendet. Sämtliche section-, article-, nav- und aside-Tags folgen dem header-Tag und liegen im 'inner_wrapper'.

Meine Frage an Euch: Empfindet Ihr folgendes Grundgerüst schon als div-Suppe? Haltet Ihr den Einsatz von 2 divs für legitim oder seid Ihr der Meinung, divs gehören nicht verwendet und sind per se schlechtzureden?

  
<body>  
  
   <div id="outer_wrapper">  
  
      <div id="inner_wrapper">  
  
         <header>  
  
         </header>  
  
      </div>  
  
      <footer>  
  
      </footer>  
  
   </div>  
  
</body>  
  

Mit freundlichen Grüßen

Hugo Egon Balder

  1. @@Hugo Egon Balder:

    nuqneH

    Meine Frage an Euch: Empfindet Ihr folgendes Grundgerüst schon als div-Suppe? Haltet Ihr den Einsatz von 2 divs für legitim oder seid Ihr der Meinung, divs gehören nicht verwendet und sind per se schlechtzureden?

    Sie sind ohne viel Gerede schlecht.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @@Gunnar und Hugo Egon Balder:

      nuqneH

      Meine Frage an Euch: Empfindet Ihr folgendes Grundgerüst schon als div-Suppe? Haltet Ihr den Einsatz von 2 divs für legitim oder seid Ihr der Meinung, divs gehören nicht verwendet und sind per se schlechtzureden?

      Sie sind ohne viel Gerede schlecht.

      So pauschal kann man die Sache imho nicht abtun ...! ;-)

      DIV Elemente sind nur dann "schlecht", wenn es für ihr Vorhandensein keinen "zwingenden" Grund gibt!

      Nun gilt es natürlich noch zu klären, was ein "zwingender" Grund ist.

      Ein zwingender Grund ist, wenn ein gewünschtes Layout per CSS ein zusätzliches Element erfordert.

      Ferner kann ein zusätzliches (DIV) Element zumindest auch "hilfreich" sein, um sein zugehöriges CSS zu vereinfachen. Hier ist es dann zwar nicht zwingend, aber zumindest "Geschmackssache" ...!

      Zu dem konkreten Beispiel des OPs ist zu sagen:
      Dass der "Outer Wrapper" erforderlich ist, wage ich zu bewzeifeln. An dessen Stelle ließe sich vermutlich auch gleich das Body Element verwenden.

      Ebenso der "Inner Wrapper" - warum nicht gleich das Header Element?

      Fazit: DIV Elemente haben sehr wohl ihre Daseinsberechtigung. Wie bei vielen anderen Dingen auch, kommt es auf deren richtige Verwendung an. Ein DIV Element um jeden Preis vermeiden zu wollen, ist imho genauso "falsch", wie deren Verwendung wo sie nicht zwingend notwendig ist.

      Gruß Gunther

      1. Hallo Gunther!

        Sie sind ohne viel Gerede schlecht.
        So pauschal kann man die Sache imho nicht abtun ...! ;-)

        So sehe ich das auch.

        Ein zwingender Grund ist, wenn ein gewünschtes Layout per CSS ein zusätzliches Element erfordert.

        Und genau das ist hier der Fall.

        Dass der "Outer Wrapper" erforderlich ist, wage ich zu bewzeifeln. An dessen Stelle ließe sich vermutlich auch gleich das Body Element verwenden.
        Ebenso der "Inner Wrapper" - warum nicht gleich das Header Element?

        Falsch. Wie ich geschrieben habe, ist hier ein Sticky Footer Teil des Layouts. Als Methode verwende ich dazu die Verwendung von display:table und display:table-row. Diese Methode funktioniert nur, wenn das umschließende Element eine Weite von 100% zugewiesen ebkommt.

        Ja, den Body kann ich statt dem outer_wrapper nehmen, wenn die Inhalte 100% Breite einnehmen sollen. Nein, den Body kann ich _nicht_ als umschließendes Element nehmen, wenn alle Inhalte horizontal zentriert in einer Spalte sein sollen und der leere Teil links und rechts davon einen anderen Hintergrund hat als der Teil mit allen Inhalten.

        Und wie ich schon im Originalposting geschrieben habe: Das Header Element ist nicht der einzige Inhalt vom inner_wrapper. Bis auf den Footer sind hier auch alle anderen Teile der Seite untergebracht. Der Footer _muss_ getrennt sein davon, sonst kann man kein Sticky Footer Layout machen. Und deshalb kann man auch nicht das Header Element statt dem inner_wrapper nehmen, da selbiges ein Teil von vielen des inner_wrappers ist.

        Ich verwende sämtliche html5 Tags, um den Inhalt einer Seite semantisch richtig zu strukturieren. Die 2 divs gruppieren mir nur mehrere Teile der Seite, die sonst keinen semantischen Zusammenhang haben und für deren Gruppierung es kein vorbestimmtes Tag gibt. Und genau das ist doch der Sinn von divs. Ich persönlich sehe es also witerhin als OK an, die Seite wie ursprünglich beschrieben zu strukturieren. Die Frage war für mich einfach nur, ob man es als "DIV Suppe" empfindet, wenn man sich so einen Quelltext betrachten und die 2 divs sieht.

        Fazit: DIV Elemente haben sehr wohl ihre Daseinsberechtigung. Wie bei vielen anderen Dingen auch, kommt es auf deren richtige Verwendung an. Ein DIV Element um jeden Preis vermeiden zu wollen, ist imho genauso "falsch", wie deren Verwendung wo sie nicht zwingend notwendig ist.

        Ich stimme Dir zu!

        Mit freundlichen Grüßen

        Hugo Egon Balder

        1. Hallo,

          der leere Teil links und rechts davon einen anderen Hintergrund hat als der Teil mit allen Inhalten.

          hm, welchen Hintergrund hat denn dein html-Element?

          Gruß
          Kalk

        2. Om nah hoo pez nyeetz, Hugo Egon Balder!

          Ich verwende sämtliche html5 Tags, um den Inhalt einer Seite semantisch richtig zu strukturieren.

          Sei dir des Unterschiedes zwischen Tag und Element bewusst.

          Die Frage war für mich einfach nur, ob man es als "DIV Suppe" empfindet, wenn man sich so einen Quelltext betrachten und die 2 divs sieht.

          Suppe sicher nicht. Aber wie schon gesagt: html- und body-Element dürfen ruhig auch zur visuellen Gestaltung einer Seite beitragen.

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Angel und Angela.

        3. Hallo HEB!

          Ich verwende sämtliche html5 Tags, um den Inhalt einer Seite semantisch richtig zu strukturieren. Die 2 divs gruppieren mir nur mehrere Teile der Seite, die sonst keinen semantischen Zusammenhang haben und für deren Gruppierung es kein vorbestimmtes Tag gibt. Und genau das ist doch der Sinn von divs. Ich persönlich sehe es also witerhin als OK an, die Seite wie ursprünglich beschrieben zu strukturieren.

          Wenn es also nicht ohne die (zusätzlichen) DIV Elemente geht, diese demnach zwingend erforderlich sind, um dein gewünschtes Layout per CSS umzusetzen, dann hat sich deine Frage doch schon beantwortet.

          Die Frage war für mich einfach nur, ob man es als "DIV Suppe" empfindet, wenn man sich so einen Quelltext betrachten und die 2 divs sieht.

          Also erstens betrachtet der "gemeine User" nicht den Quelltext - das machen höchstens User mit Interesse an HTML (und CSS). Und zweitens hat die, ohne Zweifel existierende, "Unsitte" zur "Divitis" oder "Div Suppe" zumindest dazu beigetragen, einige Autoren dahingehend zu verunsichern, überhaupt irgendwelche DIV Elemente zu verwenden.

          Und auch HTML5 macht die Verwendung von DIV Elementen nicht völlig überflüssig. Es gibt dort lediglich neue semantische Elemente für häufig vorkommende Inhaltselemente auf einer Webseite.

          Also verwende DIV Elemente da, wo es nicht anders geht und mach' dir keinen Kopf, ob das ggf. von irgendwelchen Leuten als "Div Suppe" empfunden wird! Es gibt genügend andere Probleme, über die man sich einen Kopf machen muss ...!

          Gruß Gunther

        4. @@Hugo Egon Balder:

          nuqneH

          Ja, den Body kann ich statt dem outer_wrapper nehmen, wenn die Inhalte 100% Breite einnehmen sollen. Nein, den Body kann ich _nicht_ als umschließendes Element nehmen […]

          Du solltest das html-Element statt dem outer_wrapper nehmen können. Dann kannst du body _doch_ als umschließendes Element nehmen, statt inner_wrapper.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        5. Hallo!
          Zufällig bin ich auf diesen thread gestoßen und hoffe, dass er noch gelesen wird.

          Dass der "Outer Wrapper" erforderlich ist, wage ich zu bewzeifeln. An dessen Stelle ließe sich vermutlich auch gleich das Body Element verwenden.

          "Vermutlich"?

          In Zillgens "Responsive Webdesign"-Buch kommt das Beispiel

            
          ...  
          <body>  
            <div class="wrapper">  
              <header>  
          ....  
          
          

          und

            
          .wrapper {  
            width:90%;  
          }  
          
          

          Kann man noch obiger Aussage das div weglassen und dem body das "width:90%" zuordnen ohne das es irgendwelche Konsequenzen hat?
          Gruß
          Reiner

          1. @@Reiner1:

            nuqneH

            Kann man noch obiger Aussage das div weglassen und dem body das "width:90%" zuordnen ohne das es irgendwelche Konsequenzen hat?

            Womöglich muss man einige/alle Stile des body-Elements dann dem html-Element geben (bspw. den Hintergrund, der links/rechts der 90% zu sehen ist).

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. Hallo Forum!

    Ich möchte bei der Erstellung von html5 Ressourcen so weit als möglich die neuen strukturierenden Tags verwenden.

    Gut so.

    Beim Design eines CMS/Blogs, in dessen umfangreichen CSS auch ein 'Sticky Footer' steckt, kommt es bei Paddings und Margins immer wieder zu unerwünschten Darstellungen in verschiedenen Browsern. Zumindest, solange ich _überhaupt keine_ divs verwende.

    Alle meine Designprobleme verschwinden allerdings, sobald ich zusätzlich 2 div Container benutze. Außer diesen 2 Containern ('outer_wrapper' und 'inner_wrapper') werden keine weiteren divs mehr verwendet. Sämtliche section-, article-, nav- und aside-Tags folgen dem header-Tag und liegen im 'inner_wrapper'.

    Dann tu es. Nimm sie und denk nicht groß drüber nach.

    Ganz ehrlich? CSS ist murks. Solange man mit CSS nicht halbwegs programmieren kann, wird CSS auch immer Murks bleiben, einfach weil nicht alle Designanforderungen damit umgesetzt werden können. Das fängt mit banalen Rechnungen sowie fehlenden Selektoren (wo ist :parent?) an und endet bei Beziehungen zwischen Elementen und dynamischen(!) Entscheidungen.

    Sofern deine Seite also nicht explizit dafür vorgesehen ist irgendwie maschinell analysiert oder bearbeitet zu werden, kannst du auf ein paar divs nun wirklich pfeiffen. Das stört weder die Performance, noch das Verständnis des Quellcodes (sofern du nicht 100 divs nimmst) und bringt dir auch sonst kaum Nachteile. Also verschwende deine Arbeitszeit nicht damit über so einen Schmarn nachzudenken, sondern investier die Zeit in wirklich wichtige Fragen (Barrierefreiheit z.B).

    Viele Grüße!