Weitere Möglichkeiten der Ausrichtung und Platzierung
Viele Möglichkeiten für die Gestaltung mit der CSS-Datei hast Du nun schon kennen gelernt und noch viele viele weitere gibt es. So unter anderem die absolute Positionierung, welche gelegentlich für ein bestimmtes aussehen benötigt wird.
Eine weitere Form der Gestaltung ist die Unterscheidung nach Klassen und IDs.
Die Unterschiede von Klassen und ID:
| CSS-Datei | Hinweis |
|---|---|
| #startseite { } | Das ist eine ID mit dem Namen Startseite. |
| .startseite { } | Das ist eine Klasse mit dem Namen Startseite |
Achtung: Der Name "startseite" wurde gewählt um den Unterschied in der CSS-Datei sichtbar zu machen - es darf aber den Namen selbst nicht zweimal in der CSS-Datei geben!
| Quelltext | Hinweis |
|---|---|
| <div id="startseite"></div> | Die ID wird im Quelltext mit ID und Name aufgerufen. |
| <div class="startseite"></div> | Die Klasse wird im Quelltext mit CLASS und Name aufgerufen. |
Da IDs nur einmal auf der Seite aufgerufen werden dürfen (Quelltext) setzt man diese zur grafischen Gestaltung (Layout / Design) ein. Klassen setzt man für den fliesenden Inhalt der Seite ein. Mehr dazu findest Du auf den Seiten des Seitenaufbaus.
Kehren wir nun wieder zurück zur absoluten Positionierung eines Bereichs.
Am besten funktioniert dies mit Blöcken, also den bisher noch nicht weiter beschriebenen div-Bereich (<div> </div>).
Du wirst Dich jetzt vielleicht fragen, warum ich jetzt erst auf ihn eingehe - aber alles was mit normalen HTML und CSS funktioniert bedarf
nicht gleich einem Block.
Der Block sollte nur eingesetzt werden, wenn entweder die ganze Seite darauf basiert oder anders genau die gewünschte Gestaltung
nicht erreicht werden kann, denn er arbeitet geringfügig anders als zum Beispiel ein Absatz(<p> </p>).
Genauso vielfältig man ihn auch einsetzen kann, so unterschiedlich reagieren auch die unterschiedlichen Browser darauf - wenn Du also mit Blöcken arbeiten möchtest, dann solltest Du mindestens den Firefox und Opera neben dem Internet Explorer als Browser installiert haben um die Anzeige in allen Browser kontrollieren zu können und somit gleichmäßig zu bekommen.
Für Blöcke gelten für Textformatierungen und Bildformatierungen alle bisher gegebenen Hinweise der vorhergehenden Seiten.
Ferner kann man im Block absolute Plätze anweisen, was zwar mit anderen Bereichen in etwa auch funktioniert, jedoch nicht unbedingt HTML-Konform ist.
Eine solche absolute Positionierung kann folgender Maßen aussehen:
| CSS-Datei | Hinweis |
|---|---|
| #absolute01 { position:absolute; margin-left:0px; margin-top:0px; width:131px; height:189px; background-image:url(bilder/startseite/startseite01_kl.jpg); background-repeat:no-repeat; } | Hier wird das Feld für das Hintergrund-Bild startseite01_kl.jpg für die absolute fest Position von oben 0px (kein Abstand nach oben) und 0px von links (kein Abstand nach links) angewiesen. Das Bildfeld selbst hat eine Größe von 131px (Breite) mal 189px (Höhe), das Bild darf nicht wiederholt werden. |
| #absolute02 { position:absolute; margin-left:131px; margin-top:0px; width:873px; height:117px; background-image:url(bilder/startseite/startseite01_gr.jpg.jpg); background-repeat:repeat; } | Mit dieser Anweisung wird das Feld für das Hintergrund-Bild startseite01_gr.jpg auf 0px von oben und ein linken Abstand mit 131px festgelegt. Das Feld selbst ist 873px Breit und 117px hoch. Das Hintergrundbild selbst soll in diesem Feld wiederholt werden. |
| #absolute03 { position:absolute; margin-left:131px; margin-top:117px; width:873px; height:37px; background-image:url(bilder/startseite/startseite01_sw.jpg); background-repeat:repeat; } | Jetzt noch das dritte Feld dazu, damit wir wieder auf die gemeinsame Höhe kommen - Positionierung 131px Abstand nach links, 117px von oben, Höhe des Feldes 37px, Breite des Feldes 873px, Bild wird wiederholt. |
| Quelltext | Hinweis |
|---|---|
| <div id="absolute01"></div> | Die ID absolute01 wird aufgerufen und das Bild startseite01_kl.jpg wird in diesem Feld einmal angezeigt. |
| <div id="absolute02"></div> | Die ID absolute02 wird aufgerufen und das sich wiederholende Bild startseite01_gr.jpg wird im Feld neben dem Bild startseite01_kl.jpg angezeigt. |
| <div id="absolute03"></div> | Die ID absolute03 wird aufgerufen und das Bild startseite01_sw.jpg wird neben dem Bild startseite01_kl.jpg und unterhalb des Bildes startseite01_gr.jpg angezeigt. |
Da Du diese Bilder noch nicht besitzt, hast Du jetzt zwei Möglichkeiten:
erste - Du erstellst Dir diese Bilder
zweite - Du setzt background-color zusätzlich in der CSS-Datei zum anzeigen ein (3 unterschiedliche Farben).
ID absolute01 ist dabei gedacht für ein Logo, ID absolute02 für ein Banner und absolute03 für eine Bildschrift oder Textinfo. Probiere es doch einfach einmal aus.
Was kannst Du noch mit Blöcken?
Zum Beispiel Tabellen erstellen, welche auch mit einem Vorleseprogramm Behinderter funktionieren - also eine barrierefreie Tabelle.
| CSS-Datei | Hinweis |
|---|---|
| .block-tabelle { display:block; width:660px; border-style:dashed; border-width:1px; border-color:#000000; } | Hier wird die Gesamt-Tabelle mit Rahmen und Breite, so wie dem Hintergrund festgelegt |
| .block-td-links { display:block; float:left; margin-top:10px; margin-bottom:10px; width:180px; } | Der linke Anzeigefeld wird festgelegt mit Abständen, Ausrichtung etc. |
| .block-td-rechts { margin-top:2px; padding:5px; font-size:16px; line-height:17px; color:#000000; font-family:'times new roman',arial,verdana; text-align:left; } | Das größere Erläuterungsfeld wird angelegt |
| .block-neue-zeile { clear:both; width:660px; text-align:left; padding:5px; } | Damit die nächste Zeile nicht ins vorhergehende Feld rutscht - clear:both; - gleichzeitig Zeilenabstand zur nächsten Zeile |
| Quelltext | Hinweis |
|---|---|
| <div class="block-tabelle"> | Die Tabelle wird geöffnet (wichtig: nur geöffnet!) |
| <div class="block-td-links">Text1 Links</div> | Das Hinweisfeld 1 geöffnet, es folgt der Text und anschließend wird das Feld geschlossen. |
| <div class="block-td-rechts">Beschreibungs-Text1</div> | Das erste Erläuterungsfeld wird geöffnet, der Text folgt und anschließend wieder geschlossen. |
| <div class="block-neue-zeile"></div> | Das ist der Abstandshalter und auch wechsel zur neuen Zeile (öffnen und wieder schließen - auch Texteingabe möglich |
| <div class="block-td-links">Text2 Links</div> | Siehe oben: Text- / Hinweisfeld 1 |
| <div class="block-td-rechts">Beschreibungs-Text2</div> | Siehe oben: Erläuterungsfeld |
| <div class="block-neue-zeile"></div> | Je nach Bedarf und Optik kann diese Zeile sein oder auch weggelassen werden. |
| </div> | Erst jetzt wird die Tabelle mit Blöcken wieder geschlossen! |
Probiere es doch einfach einmal aus, eine solche Tabelle zu verwenden.
Dein Quelltext wurde Dir zu Umfangreich und/oder Du weißt nicht mehr, was was war?
Dann verwende folgende Möglichkeit Dir Notizen im Quelltext anzulegen (diese werden im Browser nicht angezeigt):
<!-- DEINE NOTIZ -->
Im Bereich von <!-- bis --> wird der betreffende Inhalt im Browser nicht angezeigt. Diese Möglichkeit kannst Du über mehrere Zeilen Quelltext verwenden.
Also auch so:
<!--
Notiz Notiz Notiz Notiz Notiz Notiz Notiz
-->