Schlagwort-Archive: CSS Klasse

Mit dem HTML Blockelement „div“ arbeiten

Ein HTML „div“ ist wie die Überschrift schon sagt ein Blockelement. Das „div“ steht für Division und wird von allen gängigen Browsern unterstützt. Alles was zwischen dem Start-Tag und dem End-Tag des Div’s steht wird als ein Teil dieses Bereiches angesehen. Man benutzt dieses Element um Bereiche einzugrenzen welche man zum Beispiel mit CSS formatieren möchte. Dazu teilt man dem Element dann eine „Klasse (class)“ oder eine „ID (id)“ zu.
 
So wird ein „div“ erstellt:
<div id="div_01" class="header">
    Hier stehen dann alle Elemente welche man durch den "div" eingrenzen möchte.
</div>

Die id kann nur einmalig vergeben werden, muss also eindeutig sein, der Klasse können mehrere Elemente angehören, bzw. mehrere „div’s“ können die selbe Klasse haben, aber nur eine id.
 
Jetzt kann man den „div“ mit CSS formatieren, das sieht so aus:
<style type="text/css">
    .header {
        /* Element wird relativ positioniert */
        position: relative;
        /* Element steht links und weitere Elemente umfliessen es von rechts her */
        float: left;
        /* Äusserer Randabstand = 0 */
        margin: 0;
        /* Innerer Randabstand = 0 */
        padding: 0;
    }
 
    #div_01 {
        /* Hintergrundfarbe des Elements wird festgelegt */
        background: #BCBCBC;
        /* Schriftfarbe des Elements wird festgelegt */
        color: #333333;
    }
</style>

Ihr könnt in den „div“ reinpacken was Ihr wollt, da sind eigentlich keine Grenzen gesetzt. Und er akzeptiert die globalen HTML Attribute wie z.B. „align=“center“, width=“100%“, height=“200″ und noch viele mehr. Man sollte dies aber soweit möglich komplett über CSS regeln, das macht einen wesentlich übersichtlicheren Code und hat sich im Prinzip schon Standart durchgesetzt. Ich regle auch soweit es geht alles über CSS.
 
Ich hoffe dieser Beitrag hilft euch weiter, viel Spass beim Testen.