DIV element verschwindet

[Gunnar Bittersmann]

@@gary:

Ich kann doch sicher eine grosse Anzahl an Klassen erzeugen, die ich im CSS dann alle einzeln ansprechen kann. Welchen Nutzen hat dann noch eine zusätzliche id, die ich darüber hinaus nur einmal verwenden kann.

Ein Element mit einer ID kann als Anker dienen:

<div class="navigation><a href="#ende">zum Seitenende</a></div>  
<p id="anfang" class="gruss">Herzlich Willkommen</p>  
<!-- hier viel Text, sodass ein Nutzer wohl scrollen muss -->  
<p id="ende" class="verabschiedung">Auf Wiedersehen</p>  
<div class="navigation><a href="#anfang">zum Seitenanfang</a></div>

Also ich will damit sagen, dass ich sowohl über Klassen wie auch über id's Formatierungen im CSS vornehmen kann.

Ja. Aber löse dich von der Vorstellung, du würdest Klassen und IDs (nur) deshalb vergeben, um irgendwas zu formatieren.

Oder gibt es einen Fall wo die Vergabe von beidem sinnvoll ist?
(Was man nicht nur durch eine id oder eine Klasse auch lösen könnte?)

<blockquote>  
<p><q class="gruss pu" id="pu1">Hallo!</q>, sagte Pu für den Fall, dass dort draußen etwas war.</p>  
<p><q class="gruss tieger" id="tieger1">Hallo!</q> sagte Was-es-auch-war.</p>  
<p><q>Oh!</q>, sagte Pu. <q class="gruss pu" id="pu2">Hallo!</q></p>  
<p><q class="gruss tieger" id="tieger2">Hallo!</q></p>  
<p><q>Ach, da bist du!</q>, sagte Pu. <q class="gruss pu" id="pu3">Hallo!</q></p>  
<p><q class="gruss tieger" id="tieger3">Hallo!</q>, sagte das fremdartige Tier, das sich fragte, wie lange dies wohl noch so weitergehen würde.</p>  
<p>Pu wollte gerade zum vierten Mal <q class="gruss pu" id="pu4">Hallo!</q> sagen, als er dachte, dass er das eigentlich doch nicht wollte, und deshalb sagte er stattdessen <q>Wer ist da?</q></p>  
<cite>A.A. Milne, Pu baut ein Haus</cite>  
</blockquote>

Wenn du jetzt alle Elemente der Klasse "gruss" formatieren willst, geht das einfach mit dem Klassenselektor:
.gruss {background: yellow}

Hättest du nur die IDs, müsstest du umständlich alle einzeln aufzählen:
#pu1, #pu2, #pu3, #pu4, #tieger1, #tieger2, #tieger3 {background: yellow}

Willst du aber nur ein bestimmtes Element formatieren, dann mit dessen ID. (Wozu sollte man deshalb noch eine Klasse verwenden?) Bspw. das „Hallo“, das Pu nicht mehr gesagt hat, nicht gelb hervorheben:
#pu4 {background: inherit}

Live long and prosper,
Gunnar