Verfasst am Dezember 1, 2008 von admin in Kategorie Divs zentrieren
Wenn ihr einen Div auf eurer Seite zentrieren möchtet, ohne diese über Position festzulegen, sondern in dynamisch zentrieren wollt könnt ihr dies ganz einfach über den Stylesheet regeln. Diese Zentrierung funktioniert wie folgt:
1
2
3
4
5
6
7
| #content
{
margin: auto;
background: black;
color:white;
width:300px;
} |
Das wichtige Element hierbei ist der Befehl Margin, dieser zentriert über das Attribut “auto” den Div “content” automatisch in der Bildschirmmitte. Die restlichen Elemente die hier eingebaut sind dienen nur der Darstellung.
Verfasst am November 4, 2008 von admin in Kategorie ID´s und Klassen
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.
Verfasst am Oktober 22, 2008 von admin in Kategorie Verlinkungen
Häufig bietet es sich bei langen Texten an am anfang des Texte ein Inhaltsverzeichnis zu integrieren, weches die Themengebiete des aktuellen Html-Dokumentes auflistet. Hierbei ist es möglich bestimmte Textpassagen am besten in einer Div mit einer entsprechenden ID zu versehen, so zum Beispiel bei einem Text über einem Stylesheet die ID stylesheet zu vergeben.
An dieser Stelle ein Tipp für diejenigen die sich noch nicht mit dem Thema Klassen und Id´s beschäftigt haben, nähere Informationen findet ihr hier: ID´s und Klassen
Wenn ihr nun diese Id´s entsprechend innerhalb eures Inhaltsverzeichnisses verlinkt, erhaltet ihr sogenannte Anker- oder Sprungpunkte. Durch einen Klick auf die Verlinkung “springt” ihr zu dem jeweiligen Div.
Was ihr beachten solltet, ist dass ihr die Verlinkung zur Div mit einem # ankündigen müsst.
Ein Beispiel findet ihr hier:
1
2
3
| <ul>
<li><a href="#stylesheet">Stylesheet</a></li>
</ul> |
Die Elemente ul und li gehören allerdings zu einer Liste, für intressierte gibts hier mehr.
