<< zurück zum Index

Schritt-für-Schritt-Anleitungen

---

HTML Goodies für's Bücherregal und Bücherjournale auf www.bookcrossing.com.

3. Boxen

Diese HTML-Codes funktionieren NICHT im Forum, nur im Profil bzw. in den Journals der Bücher!

· Vorab erstmal der Hinweis, daß diese Boxen zum Teil Definitionen aus den Cascading Style Sheets (CSS) von BookCrossing.com nutzen und somit in "Harmonie" sind mit der Seite. Was allerdings auch heißt, daß, wenn eines Tages die CSS-Definitionen - aus welchem Grund auch immer - bei BookCrossing.com geändert werden, diese ggf. auch auf Deine Kreationen Auswirkungen haben.

 

A. Die Box an sich:
CSS: [code]
<p class="box"> Dies ist eine Box </p>
[end-code]
  daraus wird:  

Dies ist eine Box

· Eine solche Box wird aus einem HTML-Paragraphen <p> ... </p> gemacht, somit kannst Du dort so viel oder so wenig Text zwischen den beiden Tags schreiben, wie Du möchtest. Die Box paßt sich automatisch an den Inhalt an und läßt sich nicht über Parameter in der Größe festlegen (wohl aber mit Leerzeilen ;). Die Breite der Box ist immer ausgerichtet auf die mittlere Spalte (= Content) bei BookCrossing.com. So, wie die Box jetzt aussieht, sind einige Angaben (Hintergrundfarbe, Textfarbe, Textgröße, ...) vordefiniert. Allerdings kannst Du einige Werte davon "überschreiben" - einige davon werde ich nun anhand von Beispielen erklären.

 

B. Hintergrundfarbe der Box ändern (background-color):
CSS: [code]
<p class="box" style="background-color:#F2F2FF;"> Dies ist eine Box </p>
[end-code]
  daraus wird:  

Dies ist eine Box mit einer anderen Hintergrundfarbe als voreingestellt

· Die (neue) Hintergrundfarbe wird mittels einer CSS-Definition festgelegt. Wie aus diesem Beispiel ersichtlich, wird in der style-Definition ein Schlüsselwort (background-color:) und ein Wert (#F2F2FF) angegeben. Die Hintergrundfarbe der Box wird also mit background-color: festgelegt, und die Definition dieser Farbe ist wieder in einer "Hexadezimal"-Notation festgelegt. In der Anleitung "Veränderung am Text" habe ich bereits die Darstellung der Farben in Hexadezimal erklärt.

 

C. Textfarbe der Box ändern (color):
CSS: [code]
<p class="box" style="color:#CC0000;"> Dies ist eine Box </p>
[end-code]
  daraus wird:  

Dies ist eine Box mit einer anderen Textfarbe als voreingestellt

· Die (neue) Textfarbe wird wieder mittels einer CSS-Definition festgelegt. Wie aus diesem Beispiel ersichtlich, wird in der style-Definition ein Schlüsselwort (color:) und einen Wert (#CC0000) angegeben. Die Textfarbe der Box wird also mit color: festgelegt, und die Definition dieser Farbe ist wieder in einer "Hexadezimal"-Notation festgelegt. Hier 2 Seiten, wo Du viele Farbcodierungen siehst sowie damit experimentieren kannst: validhtml.com | 216 Colors. Selbstverständlich mußt Du Sorge dafür tragen, daß die Textfarbe auf der Hintergrundfarbe gut leserlich ist!

· Aber... was ist denn jetzt mit der Hintergrundfarbe passiert? Die ist ja nach Änderung der Textfarbe wieder in der voreingestellten Farbe. Richtig! Denn, um beides zu bekommen (und jede weitere Änderung innerhalb dieser Box) mußt Du jede CSS-Definition in die style-Definition aufnehmen. Dazu wird jedes Schlüsselwort mit seinem Wert mittels eines "Semikolons" (aka "Punkt-Komma" = ";") getrennt:

Hintergrundfarbe UND Textfarbe der Box ändern:
CSS: [code]
<p class="box" style="background-color:#F2F2FF; color:#CC0000;"> Dies ist eine Box </p>
[end-code]
  daraus wird:  

Dies ist eine Box mit einen anderen Text- und Hintergrundfarbe als voreingestellt

· Alles in allem nicht sooo schwierig, nicht wahr? Aber Du solltest wirklich darauf achten, daß sich die Farben nicht beißen ;)

 

D. Textgröße in der Box ändern:
CSS: [code]
<p class="box" style="font-size:140%;"> Dies ist eine Box </p>
[end-code]
  daraus wird:  

Dies ist eine Box mit einer anderen Textgröße als voreingestellt

· Nun gibt es mehrere Möglichkeiten die Größe des Textes festzulegen. Auf alle einzugehen, würde den Rahmen dieser Anleitung sprengen, daher beschränke ich mich auf die Angaben in "Prozent" (%), wobei gilt: je größer der Wert, desto größer der Font. Am besten ein wenig mit den Werten zwischen 60% (seeeeeehhhrr klein) bis 200% (recht groß) experimentieren - und am besten orientierst Du Dich an den BookCrossing-Seiten, damit das Gesamtbild einheitlich wirkt :) Übrigens, diese Definition wirkt sich immer auf die gesamte Box aus - um innerhalb einer Box unterschiedliche Textgrößen zu haben, nutzt Du die in der Anleitung "Veränderungen am Text" angegebenen Möglichkeiten innerhalb der <p> ... </p>-Tags.

Ein kombiniertes Beispiel mit einer Box:
CSS: [code]
<p class="box"
style="font-size:110%; background-color:#CCFF66; color:#000000;">
<span style="letter-spacing:0.2em;">Dies ist der Titel der Box</span><br><br>
Dies ist Textgröße definiert durch die "box"<br>
<span style="font-size:80%;">Dies ist ein kleinerer Text innerhalb der Box</span><br>
Und wieder Textgröße durch die Box.<br>
<span style="color:#FFFFFF;">Und noch schnell eine Farbänderung innerhalb der Box</span><br>
</p>
[end-code]
  daraus wird:  

Dies ist der Titel der Box
Dies ist Textgröße definiert durch die "box"
Dies ist ein kleinerer Text innerhalb der Box
Und wieder Textgröße durch die Box.
Und noch schnell eine Farbänderung innerhalb der Box

· Und somit siehst Du sofort, daß kombinierte Sachen sehr wohl überlegt werden müssen, sowohl farblich ;) als auch bezüglich Textgröße und Zeilenabstand. Klar, es gibt auch noch jede Menge Optionen, womit Du in der style-Definition bei Zeilenabstand etc. Feineinstellungen vornehmen kannst. Nur, für die Ziele, die mit dieser Anleitung verfolgt werden, ist das nicht notwendig. Es wird in der Regel eine recht normale Größe der Schrift verwendet, so daß der Zeilenabstand einigermaßen vernünftig sein wird. Bei größeren Schriftzügen kannst Du dann mittels <br> eine Leerzeile hinzufügen :)

Hinweis: Um 2 Boxen aufeinander folgen zu lassen, ohne daß dazwischen ein breiter Zwischenraum ist, muß Du auf das Ende der ersten Box (</p>) direkt den Anfang der nächsten Box folgen lassen (<p class="box">), so daß beide "auf einer Zeile" sind (</p><p class="box">.

Übrigens, ein Beispiel regen Gebrauchs solcher Boxen findest Du auf Wyando's Bücherregal.

 

Jetzt wird es etwas kniffliger :) Wenn Du nun der Versuchung nicht widerstehen konntest und versucht hast, 2 Boxen zu verschachteln mit obigen Informationen, dann wirst Du verwundert festgestellt haben, daß das System sich standhaft weigert, die Boxen zu verschachteln. Die folgende Methode, funktioniert also NICHT!:

<p class="box">
Text in Box 1
   <p class="box">
   Text in Box2
   </p>
</p>

Das Resultat eines solchen Vorgehens ist, daß, neben etwas Kuddelmuddel, 2 Boxen untereinander erscheinen. Der Grund liegt ihm darin, daß die <p> ... </p> halt Absätze sind, und diese lassen sich in HTML nicht verschachteln. Allerdings, innerhalb von "Listen" kannst Du die "Boxen" verschachteln, wie folgendes Beispiel zeigt:

E. Boxen in Boxen darstellen:
CSS: [code]
<ul class="box"> <li style="list-style-type:none;">Dies ist eine Box <br><br></li>
<li class="box" style="list-style-type:none;"> Dies ist eine Box in der Box</li>
<li class="box" style="list-style-type:none;"> Dies ist eine Box in der Box</li>
</ul>
[end-code]
  daraus wird:  

• Dies ist eine Box
  
  
• Dies ist eine Box in der Box
• Dies ist eine Box in der Box

· innerhalb der <li> ... </li>-Angaben, kann der Text mittels normaler Paragraphen (<p> ... </p>) oder "span" (<span> ... </span>, wie in den HTML-Goodies beschrieben, formatiert werden. Die style-Definition "list-style-type:none;" ist notwendig, um die üblichen Listen-Numerierung bzw -Kennung auszuschalten.

· Mit den Tips unter B. und C. kannst Du die Boxen entsprechend einfärben, damit sie voneinander abheben. Einfach eine passende style-Definition mit einbinden :)

Übrigens, ein Beispiel regen Gebrauchs solcher Boxen in Boxen hättest Du auf Suzanne4Books' Bücherregal gefunden... wenn S4B nicht auf die Idee gekommen wäre, ihr Profil umzustellen ;)

Um Fragen zu vermeiden: Diese Boxen können nur untereinander plaziert werden, nicht nebeneinander. Dies hängt vor allem mit der CSS-Definition zusammen und aufgrund unterschiedlicher Interpretationen der Browser gibt es da zuviele Probleme. Solche Boxen funktionieren bedingt auch innerhalb von HTML-Tabellen, allerdings kommst Du dabei schnell ins (Layout)-Schleudern, denn auch wenn es bei Dir dann richtig aussieht, kann es durchaus passieren, daß andere Browser es nicht richtig darstellen.
Anmerkung von Chaotica: Es geht doch!. Wie man auch auf ihr Bücherregal sehen kann. Wie sie das hingekriegt hat, fragt ihr am besten bei ihr nach *veg*

 

F. Text in der Box ausrichten:
HTML+CSS: [code]
<p class="box" align="justify"> Dies ist eine Box </p>
[end-code]
  daraus wird:  

Dies ist eine Box mit einer anderen Ausrichtung des Textes als voreingestellt Dies ist eine Box mit einer anderen Ausrichtung des Textes als voreingestellt Dies ist eine Box mit einer anderen Ausrichtung des Textes als voreingestellt Dies ist eine Box mit einer anderen Ausrichtung des Textes als voreingestellt

CSS: [code]
<p class="box" style="text-align:right"> Dies ist eine Box </p>
[end-code]
  daraus wird:  

Dies ist eine Box mit einer anderen Ausrichtung des Textes als voreingestellt Dies ist eine Box mit einer anderen Ausrichtung des Textes als voreingestellt Dies ist eine Box mit einer anderen Ausrichtung des Textes als voreingestellt Dies ist eine Box mit einer anderen Ausrichtung des Textes als voreingestellt

· In der Anleitung "Veränderungen am Text" angegebenen Möglichkeiten, um Text auszurichten können hier ähnlich angewandt werden. Wobei, wenn Du Text in einer Box zentrieren möchtest, Du am besten die dafür definierte class nutzt, also: class="box centered".

 

G. Boxen basteln ohne vordefinierte BookCrossing-Classes!
CSS: [code]
<p style="background-color:#CCCCFF; border:5px dotted #99CC66; font-size:14px; padding:10px;">
Dies ist eine Box</p>
[end-code]
  daraus wird:  

Dies ist auch eine "Box", komplett erstellt mit inline CSS-Befehlen. Der Unterschied zur obigen "class=box"-Defintion ist, daß hier diese "box"-Definition komplett selbst definiert wird (und keine vordefinierten Werte überschrieben werden ;))

· In Prinzip ist eine class=box nichts anderes, als einige style-Definitionen, wie in diesem Beispiel angegeben. Und wenn wir schon dabei sind, habe ich hier neben den bereits bekannten noch ein paar neue Definitionen für noch mehr Abwechslung hinzugefügt:

· Die Hintergrundfarbe der Box wird, wie bereits bekannt, mit background-color: festgelegt, und die Definition dieser Farbe ist wieder in einer "Hexadezimal"-Notation festgelegt. Wenn Du auch noch die Textfarbe beeinflussen möchtest, kannst Du color: mit einem Hexadezimalen Farbwert der style-Definition hinzufügen (getrennt mit einem Semikolon (;). In der Anleitung "Veränderung am Text" habe ich bereits die Darstellung der Farben in Hexadezimal erklärt.

· Auch den Rand einer Box kannst Du selbst definieren: border:, bestehend aus 3 Werten, getrennt jeweils mit einem Leerzeichen:
border: Breite Art Farbe
· Die Breite gibt die Breite des Randes an, mit px als Pixelwert definiert.
· Als Art kannst Du folgende Werte verwenden: solid (fest), dotted (gepunkted), dashed (gestricheld), double (doppelt), sowie groove und ridge.
· Die Farbe wiederum legt die Farbe des Rahmens fest, und zwar nach demselben Prinzip wie die Hintergrundfarben bzw. Textfarben. (In Hexadezimal, also z.B. #9966CC)
Übrigens kannst Du mit der border:-Definition noch viel mehr festlegen, da CSS vorsieht, jeden einzelnen Rand komplett definieren zu können. Doch dafür verweise ich auf diese Seite :)
Anmerkung: Wenn kein Rahmen gewünscht ist, reicht ein border:none; :)

· Mit dem padding:-Wert, gibst Du an, wieviel Platz zwischen Deinem Text und dem Rand gehalten werden soll. Am besten den Wert in Pixel definieren, also px.

· Mit dem font-size:-Wert, gibst Du an, wie groß die Schrift sein soll. Hier mal, um diese Möglichkeit auch mal aufzuführen, in Pixel definiert, also px.

Übrigens, ein Beispiel regen Gebrauchs solcher Boxen findest Du auf Nikana' Bücherregal.

(Leider hat Nikana diese wieder von ihr Shelf entfernt. Somit habe ich derzeit kein Beispiel für diese Art Boxen)

P.S. Ja, auch Links kannst Du eine andere Farbe geben :) Wie das funktioniert, steht in der Anleitung "Links".

 

HTML-Goodies:  Veränderungen am Text | Links | Boxen | Select-Boxen | Sonstiges | zurück zum Index | nach oben