Willkommen auf CSS-Roots

der Starthilfe für Webdesigner

Seht euch um und schaut euch unsere Beiträge an, für euch ist sicher was dabei,
für Themenanregungen und Ideen stehe ich gerne unter info@css-roots.de zur Verfügung.

Mitglieder-Login

Lost your password?

Registrierung ist geschlossen

Die Registrierung wurde gesperrt, möchtest du dich registrieren schreibe bitte eine E-Mail an info@css-roots.de



Die Unterschiede zwischen Id´s und Klassen

Verfasst am November 16, 2008 von admin in Kategorie ID´s und Klassen

In den ersten beiden Lektionen habt ihr die Divbenennung Id kennengelernt, womit ihr einer ID einen eindeutigen Namen gebt. Was macht ihr aber jetzt wenn ihr eine Div mit genau den gleichen Eigenschaften haben möchtet? Einfach alle Div-Attribute im Stylesheet kopieren und unter einem neuen Div Namen einfügen? Warum so kompliziert? Nutzt doch einfach das Element “class” anstatt dem Element ID. Der Unterschied zwischen ID und Class ist, dass ihr Classen mehrmals innerhalb eines Html-Dokumentes aufführen könnt, ohne dass dieses die validität eurer Seite stört. Das beste an der ganzen Geschichte ist, dass ihr euch nicht unbedingt entscheiden müsst zwischen Klassen und Id´s, sondern beide gleichzeitig in einem Element verwenden könnt, dazu aber später. Durch diesen entscheidenen Vorteil könnt ihr euren Id´s zusätzlich die Werte einer Klasse übergeben wie Schriftfarbe und den üblichen Css-Klammotten.

Erstellen von Klassen

Verfasst am November 16, 2008 von admin in Kategorie ID´s und Klassen

Wenn ihr eine Klasse in eurem Stylesheet erstellen möchtet, dann nehmt einfach statt dem “# ” ein “. ” So sollte dann in etwa euer Stylesheet aussehen:

.bluebig
{
font:18px Arial;
color: blue;
}

Wie ihr seht eigentlich nicht schwer, jetzt zeige ich euch noch wie man das ganze in unser bestehendes Html-Dokument einbindet.

<div id="banner">
<div id="bannert">
            BANNER</div>
</div>
<div id="navi">
<div id="navit">
          Navigation</div>
</div>
<div id="content">
<div id="contentt">
<div class="bluebig">
              text</div>
</div>
</div>

Jetzt wird es in manchen Bereichen so langsam unüberstichtlich, weshalb ich jetzt an dieser stelle die seperater Erstellung eines Divs für den blauen Text vermeiden will und euch nun zeige wie man Klassen mit Ids kombiniert

Kombinieren von Klassen und Id´s

Verfasst am November 16, 2008 von admin in Kategorie ID´s und Klassen

Jetzt wird es in manchen Bereichen so langsam unüberstichtlich, weshalb ich jetzt an dieser stelle die seperater Erstellung eines Divs für den blauen Text vermeiden will und euch nun zeige wie man Klassen mit Ids kombiniert:

<div id="content">
<div id="contentt" class="bluebig">
          TEST-TEXT</div>
</div>

Das Ergebnis ist das gleiche, nur Ihr habe a)weniger Zeilen benutzt und b)es für euch selbst wesentlich übersichtlicher gemacht.

Glückwunsch ihr habe eure erste Klasse sinnvoll verwendet

Klassen und Id´s effektiv nutzen

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.

Klassen und ids nicht nur für Divs verwenden

Verfasst am Oktober 16, 2008 von admin in Kategorie ID´s und Klassen

Id´s und Klassen, sind in CSS nicht nur für Div-container zu gebrauchen, ihr könnt im Prinzip nahezu alles mit einer Klasse versehen, was natürlich eingige Vorteile für euer Projekt bringen kann, so müsst ihr für einzelne Bilder die Ihre im Prinzip gleich gestallten wollt nicht unbedingt extra dafür gedachte Div-Container erstellen, sondern könnt diese Bilder mittels einer Klasse direkt ansteuern.

Im Prinzip macht ihr hierbei nichts anders als bei den Div-Containern, so fügt ihr bei einem Bild einfach nach Abschluss des “src” Elementes noch ein “class” oder “Id” Element hinzu und schön könnt ihr die Bilder direkt ansteuern. Dieser Vorgang funktioniert im übrigen auch mit den Überschriften H1 – H6, wodruch ihr auf ebenfalls nutzlose Div-Container aus eurem Quellcode entfernen könnt, was euch einiges an Quellcode in der HTML Datei ersparrt und dazu nur wenig Platz in eurem Stylesheet erfordert.

Ihr solltet euch also stets bei einem Projekt überlegen, ob ihr Formatierungen für Bilder zum Beispiel, auf einer Homepage mehrfach verwenden möchtet, so zum Beispiel in einer Bildergalerie.

Ein Design von CSS-Roots Starthilfe für Webworker