WebDesign by mts

Startseite » Webdesign Tutorial » CSS » Quick Diät für den Quelltext -div Suppen vermeiden – Dein Beitrag zum Klimawandel

Quick Diät für den Quelltext -div Suppen vermeiden – Dein Beitrag zum Klimawandel

in CSS, von mts

Zu viele divs blähen den Quelltext unnötig auf. Man nennt dies dann eine div Suppe. Wenn man sich genau vorsagt was man mag, kann man diese sehr oft verhindern. Somit spart man Traffic und leistet einen Beitrag zum Klimawandel.

Div Suppe im Quelltext 

Viele verwenden sehr oft Divs, um einzelne Teile einer html Seite zu gestalten.

Dies ist sehr oft unnötig, denn die Hierarchie der einzelnen Angaben (Elemente, tags) hilft zu gestalten ohne Div-Suppe.

Beispiel eines aufgeblähten Quellcodes

<div id="content">
    <div class="ueberschrift">
        <h1>Ich bin die &#220;berschrift.
          </h1>
    </div><!--class ueberschrift end-->
 
      <div class="post">
          <p>Ich bin der Artikeltext
          </p>
 
          <div class="meta">
              <p>Ich zeige die Anzahl der Kommentare, 
                 das Datum etc. an
              </p>
            </div><!--class meta end-->
        </div><!--class post end-->
 
</div><!--id content end-->

Hier kann man sich 2 div einsparen

div class ueberschrift und div meta

Man braucht sich nur laut vorzusagen was man machen möchte und dies dann in der Style.css, der Cascading StyleSheet Datei hineinschreiben:

Ich möchte die Überschrift unter der id content blau.
Keine andere Überschrift, nur die unter der id content. Das geht so:

#content h1{ color:blue;}

So bringt man das div class meta weg.

Ich möchte die p mit den Meta Angaben rot und am rechten Rand stehen haben.

.meta{color:red; text-align:right;}

Jetzt wirst Du sagen, das habe ich vorher auch in der style.css drin stehen gehabt.
Möglich, aber das div ist unnötig.

Schlank und rank sieht das HTML jetzt so aus.

 
<div id="content">
 
        <h1>Ich bin die &#220;berschrift.
          </h1>
 
 
      <div class="post">
          <p>Ich bin der Artikeltext
          </p>
 
 
              <p class="meta">Ich zeige die Anzahl der Kommentare, 
                 das Datum etc. an
              </p>
 
        </div><!--class post end-->
 
</div><!--id content end-->

Bei Fragen einfach einen Kommentar schreiben. Gern helfe ich.

Basis Know-how CSS
Internetmarketing

• Vertikal und horizontal zentrieren ohne Tabelle
• Emanzipation ist Out. Hierarchie ist gefragt.
• Tabellen zum Hören BITV Praxis
• Anleitung für die Print.css, denn Datei -> Drucken ist nach wie vor sehr beliebt - das Drucklayout
• barrierefreies Webdesign

Top

8 zu : Quick Diät für den Quelltext -div Suppen vermeiden – Dein Beitrag zum Klimawandel