 Grafiken positionieren
Sie verwenden häufiger kleine Grafiken als Blickfang und zur Auflockerung ihrer Texte. Die Grafiken sind links oder rechts positioniert und sollen einen Abstand zum Text haben?
|
|
Eigene CSS-Klasse für Grafiken zur Positionsbestimmung
Ich empfehle, für Blickfang-Grafiken (Eyecatcher) eigene CSS-Klassen anzulegen. Damit umgeht man die veraltete Darstellung von Text und positionierter Grafik in einer Tabellenstruktur oder rechts- / links-Ausrichtung der Grafiken durch HTML-Attribute.
 Gummibärchen sind auf eine aufreizende Art weich. Und da sie weich sind, kann man sie auch ziehen. Ich mache das sehr gerne. Ich sitze im dunklen Kino und ziehe meine Gummibärchen in die Länge, ganz ganz langsam. Man will sie nicht kaputtmachen, und dann siegt doch die Neugier, wieviel Zug so ein Bärchen aushält. (Vorstellbar sind u.a. Gummibärchen-Expander für Kinder und Genesende). Forscherdrang und gleichzeitig das Böse im Menschen erreichen den Climax, wenn sich die Mitte des gezerrten Bärchens von Millionen Mikrorissen weiß färbt und gleich darauf das zweigeteilte Stück auf die Finger zurückschnappt.
Gummibärchen sind auf eine aufreizende Art weich. Und da sie weich sind, kann man sie auch ziehen. Ich mache das sehr gerne. Ich sitze im dunklen Kino und ziehe meine Gummibärchen in die Länge, ganz ganz langsam. Man will sie nicht kaputtmachen, und dann siegt doch die Neugier, wieviel Zug so ein Bärchen aushält. (Vorstellbar sind u.a. Gummibärchen-Expander für Kinder und Genesende). Forscherdrang und gleichzeitig das Böse im Menschen erreichen den Climax, wenn sich die Mitte des gezerrten Bärchens von Millionen Mikrorissen weiß färbt und gleich darauf das zweigeteilte Stück auf die Finger zurückschnappt.
Mit HTML-Werkzeugen hätten Sie das bisher so umgesetzt:
<img align="left" vspace="5" hspace="10" src="grafik.jpg" width="120" ... >
<img align="right" vspace="5" hspace="10" src="grafik.jpg" width="120" ... >
| Attribut |
|
Wert |
| align=" " |
Ausrichtung zum Text / Nachbarelement |
left ; right |
| hspace=" " |
horizontaler Abstand |
Zahl (Wert in Pixel) |
| vspace=" " |
vertikaler Abstand |
Wert in Pixel |
Das hat allerdings Nachteile:
- der horizontale Abstand (hspace) gilt für den Bereich links und rechts der Grafik
- Die Notierung muss jedesmal komplett eingetragen werden
Arbeitserleichterung mit CSS
Ich empfehle daher zwei eigene CSS-Klassen festzulegen, womit die Arbeit wesentlich erleichtert wird. Die Notierung an der Grafik sähe dann z.B. so aus:
<img class="Bildlinks" src="grafik.jpg" width="120" ... >
<img class="Bildrechts" src="grafik.jpg" width="120" ... >
Dazu legen Sie entweder im HEAD-Bereich ihrer Datei oder in der externen CSS-Datei zwei eigene Klassen fest:
<style type="text/css">
<!--
.Bildrechts
{
float:right;
margin: 0px 0px 10px 10px;
border: 1px solid #666666;
padding: 2px;
}
.Bildlinks
{
float:left;
margin: 0px 10px 10px 0px;
border: 1px solid #666666;
padding: 2px;
}
-->
</style>
Die Eintragungen für 'margin' setzen sich aus 4 Werten zusammen, die für den Abstand oben beginnend im Uhrzeigersinn eingetragen werden. Zusätzliche Angaben für den Rand (border) und Abstand zum Rand (margin) wurden ebenfalls notiert. Hinweis: Der Innenabstand zum Rand wird vom FF und IE unterschiedlich / nicht dargestellt.
Ersten Buchstaben hervorheben
Weil es gerade zum Thema passt, gleich noch eine eigene Klasse für den ersten Buchstaben der Absätze:
<style type="text/css">
<!--
.Erster
{
float: left;
width: 0.9em;
font-size: 3em;
line-height: 85%;
}
-->
</style>
Notierung der Klasse 'Erster' im Dokument:
<span class="Erster">M</span>an will sie nicht kaputtmachen ...
Man will sie nicht kaputtmachen, und dann siegt doch die Neugier, wieviel Zug so ein Bärchen aushält. (Vorstellbar sind u.a. Gummibärchen-Expander für Kinder und Genesende). Forscherdrang und gleichzeitig das Böse im Menschen erreichen den Climax, wenn sich die Mitte des gezerrten Bärchens von Millionen Mikrorissen weiß färbt und gleich darauf das zweigeteilte Stück auf die Finger zurückschnappt.
Das hätte man natürlich auch anders umsetzen können aber diese simple
Technik funktioniert auch.
Beispiel zur Ausrichtung von Grafiken
Schnick-Schnack-Schnuck
Lernspiel zum ersten Umgang mit der Maus. Funktioniert wie Schere-Stein-Papier. Interessant für den Computerunterricht ab Klasse 2
Quiz + Test Tastaturschreiben
Lernspiel zum ersten Umgang mit der Tastatur. Buchstaben, Wörter und Sonderzeichen müssen eingetippt werden. Interessant für den Computerunterricht ab Klasse 2
Legekartenspiel
Unter dem Menüpunkt 'Schüler' in der Rubrik 'Fun + Spiele' findet ihr ein neues Spielchen: 24 Karten müssen aufgedeckt werden. Ein Wettlauf gegen die Zeit!
Zahlen raten - nicht nur für Schüler
Aufgabe: Errate eine Zahl zwischen 0 und 100. Das trainiert methodisches Vorgehen, die Denkleistung und logischen Fähigkeiten.
Lesen sie zum Thema auch die Seite:
 CSS-Box - Container für Text und Grafik
| 
Home • Bilder • CSS • CSS Bildposition
CSS-Notierung