Ein häufiger Fehler der häufig von Anfängern im Bereich CSS gemacht wird, ist dass für alles mögliche Div-ids erstellt werden. Das mag zwar funktionieren, ist aber für euch extrem unübersichtlich. Besser ist es wenn ihr bestimmte Divs statt mit einer Div mit einer Klasse belegt. Der Vorteil hierbei ist ganz simpel, Klassen könnt ihr mehrfach auf einer Seite verwenden, ID´s hingegen nicht aufgrund der fehlenden Validität.
In den Klassen könnt ihr dann verschiedene Elemente zusammenfassen, wie Schriftgrößen, Schriftfarben und vieles mehr. Durch die Verwendung der Klassen wird euer Stylesheet auch wesentlich übersichtlicher, was euch die Einarbeitungszeit, wenn ihr das Projekt einmal wieder aufgreifen solltet verkürzt.
Hier mal ein kleines Beispiel wie ein Div-Chaos aussehen kann, wenn ihr zum Beispiel eine Galerie ohne Tabellen mit einem CSS-basierten Rahmen einbauen wollt:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
</head>
<body>
<div id="galery">
<div id="rahmen1">
<div id="picture1">
<a href="galerie/bild1.jpg" title=""><img src="galerie/bild1_klein.jpg" alt="" /></a>
</div>
</div>
<div id="rahmen2">
<div id="picture2">
<a href="galerie/bild2.jpg" title=""><img src="galerie/bild2_klein.jpg" alt="" /></a>
</div>
</div>
<div id="rahmen3">
<div id="picture3">
<a href="galerie/bild3.jpg" title=""><img src="galerie/bild3_klein.jpg" alt="" /></a>
</div>
</div>
</div>
</body>
</html> |
Wie ihr seht habt ihr für jedes einzelne bild einen eigenen Div eröffnet, was in diesem Fall völlig unnötig ist. Auf diese Weise habt ihr für das ganze 6 verschiedene Divs angelegt, die im Prinzip alle identische Eigenschaften haben. Deshalb hier lieber mit Klassen arbeiten wie im folgendem Beispiel.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
</head>
<body>
<div id="galery">
<div class="rahmen">
<div class="picture">
<a href="galerie/bild1.jpg" title=""><img src="galerie/bild1_klein.jpg" alt="" /></a>
</div>
</div>
<div class="rahmen">
<div class="picture">
<a href="galerie/bild2.jpg" title=""><img src="galerie/bild2_klein.jpg" alt="" /></a>
</div>
</div>
<div class="rahmen">
<div class="picture">
<a href="galerie/bild3.jpg" title=""><img src="galerie/bild3_klein.jpg" alt="" /></a>
</div>
</div>
</div>
</body>
</html> |
Die Dazugehörige CSS Datei kann dann so aussehen
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .rahmen { width:214px; height:214px; background:white; border: 1px solid grey; margin:10px; } .picture { margin-left:7px; margin-top:7px; width:200px; height:200px; background:black; } |
Auf diese Art braucht ihr statt 6 Divs nur 2 Klassen, da identische Elemente vorhanden sind.
Schreiben sie einen Kommentar.
Sie müssen angemeldet sein, um einen Kommentar zu schreiben.