 |
Hier gibt es etwas prinzipiell Neues. Leider spielen die
Browser nicht immer mit. Auf dieser Seite gibt es die Style-Vorlagen,
die im ganzen Kurs gelten. Denen verdanken wir den hellen
Hintergrund unter diesem Text, denn der gehört zum
<P>-Tag.
Sodann werden beigesellt (= "kaskadiert", das bedeutet das
"C" in CSS!): Hintergrundfarben zu speziellen Container-Tags,
weiterhin Hintergrundbilder einerseits zu <BODY> andrerseits
wiederum zu speziellen Tags.
DIESE SEITE IST KEIN GESTALTERISCHES VORBILD!
Möglichkeiten zur Manipulation der Hintergründe
| background: |
Ermöglicht gesammelte Angaben (background-color,
background-image, background-repeat, background-attachment,
background-positeon) zur Hintergrundfarbe und
zum Hintergrundbild. Generell verwendbar für
alle Container-Elemente, speziell außer für
<BODY> auch etwa <P>, <TD>oder <DIV>. |
STYLE="background:#666666 url(bilder/feet.gif) no-repeat"
ist hier an <TD>vergeben |
| background-attachment: |
Legt fest, ob ein Hintergrundbild im Browserfenster
festliegt oder mit dem Text scrollt. Mögliche
Werte demgemäß: scroll und fixed |
Auf dieser Seite ist das Hintergrundbild zu <BODY>,
das gräuliche (hier = greuliche) Puzzle-Muster
fixiert. |
| background-color: |
Farbangabe, sollte auch dann vergeben werden, wenn
ein Hintergrundbild verwendet wird, weil letzteres
ja vom Nutzer abgewählt werden kann. |
STYLE="background-color:#0000ff:color=#ff0000" |
| background-image: |
es folgt der Dateiname bzw. die URL, es ist die
Wiederholung voreingestellt |
|
| background-positeon: |
Anfangspositeon eines Hintergrundbildes. Angaben
mit zwei Zahlenwerten für Seitenverschiebung
und Höhe, die als Prozentwert der Abmessungen
des Hintergrundbildes interpretiert werden. Zulässig
sind auch left, center, right bzw. top,
center, bottom. |
Hier
ist eingestellt: center
center. Die Courierschrift mußte eigens
ein Hintergrundbild erhalten (das nun versetzt erscheint),
weil sie ansonsten nur ihre voreingestellte Hintergrundfarbe
zeigt. |
| background-repeat: |
Einstellung des Wiederholungsverhaltens, zulässig
sind: repeat, repeat-x, repeat-y, no-repeat.
Voreingestellt ist repeat. Die anderen Befehle
verursachen tw. Probleme bei Netscape <5. |
Beispiele siehe unten |
Lasst uns ein paar Experimente machen:
Zuerst
mal die Hintergrundfarbe, sie gilt immer für das Tag,
dem sie zugeordnet ist. Hier also für den Textbereich:
<SPAN STYLE="color:#ffffff;background-color:#888888">
Hier
ist ein Aufruf: <SPAN STYLE="background-image:url(bilder/feet.gif);background-repeat:repeat-x;padding:1mm;margin:1mm"></SPAN>
Kommentar: Für die seitliche Ausdehnung ist margin:
zuständig, sonst reicht der Hintergrund nur so weit,
wie der Text
Hier
kein "margin", wenig Text!
noch
einmal,
aber jetzt mit
Zeilenumbrüchen im Text.
Was man erkennt ist, das Hintergrundbild wird bei nicht
ausreichendem Text in y-Richtung nur soweit gezeigt, wie
nötig. Mehr als eine Reihe in x-Richtung läßt
sich nicht erzwingen.
Und nun die andere Richtung:
Diesmal
ist die y-Richtung gefragt.
Wie es bei Ihnen aussieht, weiß ich nicht,
mein Browser benimmt sich jedenfalls
beim ersten Bildaufbau
höchst merkwürdig.
Erst nach mehrfachem
Neuladen der Seite
wird es besser.
Schließlich
der letzte Versuch, der beweisen
soll, wie es mit der Wiederholung der Hinter-
grundbilder klappt. Der Aufruf erfolgt hier
wieder wie oben, mit margin, padding aber
diesmal nur repeat. Die Zeilenumbrüche
sind normal in HTML gesetzt.
Noch
einmal der letzte Versuch: Jetzt
aber ohne margin. Auch er soll zeigen,
wie es mit der Wiederholung der Hinter-
grundbilder klappt. Der Aufruf erfolgt hier
ansonsten wie oben, mit padding aber
wieder mit repeat. Die Zeilenumbrüche
sind wieder in HTML gesetzt.
Hinweis: Beobachten Sie die Schriftarten! Die Hintergrund-Formatierung
stört bei Netscape teilweise die Schriftformatierung,
während der IExplorer sich hier besser benimmmt.
|
|
|
DIENSTE
