Schritt-für-Schritt-Anleitungen
ACHTUNG!
Seit 25-05-2010 sieht BookCrossing.com nicht mehr so aus wie gewohnt :)
Daher kann es sein, dass die hier beschriebene HTML-Beispiele vielleicht nicht mehr funktionieren.
Die German Support Site wird dies in den nächsten Wochen ausgiebig testen.
HTML Goodies für's Bücherregal und Bücherjournale auf www.bookcrossing.com.
WICHTIG! Seit der Umstellung wird im Profil keine Javascript mehr zugelassen, wodurch selectboxen mit Klick-Links nicht mehr funktionieren. Doch es gibt eine alternative, die auch einfacher zu definieren ist (siehe unten) und Ardik hat sogar ein Toolchen zum automatisch umändern alter Select-Boxen mit Javascript. Siehe diesen Beitrag im Forum.
Diese HTML-Codes funktionieren NICHT im Forum, nur im Profil bzw. Journal der Bücher!
Die auf diese Seite vorgestellte Lösungen für die sogenannten Scrollboxen kannst Du einfacher definieren
und zwar mit folgenden Zeilen:
[code]
<p class="box" style="height:100px; overflow:auto;">
deine Zeilen... ggf mit HTML-Links zum Buch
deine Zeilen... ggf mit HTML-Links zum Buch
</p>
[end-code]
daraus wird:
deine Zeilen... ggf mit HTML-Links zum Buch
deine Zeilen... ggf mit HTML-Links zum Buch
deine Zeilen... ggf mit HTML-Links zum Buch
deine Zeilen... ggf mit HTML-Links zum Buch
deine Zeilen... ggf mit HTML-Links zum Buch
deine Zeilen... ggf mit HTML-Links zum Buch
deine Zeilen... ggf mit HTML-Links zum Buch
deine Zeilen... ggf mit HTML-Links zum Buch
deine Zeilen... ggf mit HTML-Links zum Buch
deine Zeilen... ggf mit HTML-Links zum Buch
deine Zeilen... ggf mit HTML-Links zum Buch
deine Zeilen... ggf mit HTML-Links zum Buch
Anmerkung: Das "färben" einer solchen Box geht genauso wie es unten gemacht wird: mit den entsprechenden Definitionen im "STYLE" bereich... Und verlinkt wird, wie gehabt...
A. Selectbox OHNE Verlinkung des Inhalts:
[code]
<select multiple size="5">
<option>eine erste Zeile eine erste Zeile eine erste Zeile</option>
<option>eine zweite Zeile</option>
<option>eine dritte Zeile</option>
<option>eine vierte Zeile</option>
<option>eine fünfte Zeile</option>
<option>eine sechste Zeile</option>
</select>
[end-code]
daraus wird:
B. Selectbox MIT Verlinkung des Inhalts:
[code]
<select size="5" [kleb!]
onChange="PopUpName=window.open('','PopUpName');[kleb!]
PopUpName.location=options[selectedIndex].value;">
<option value="http://www.bookcrossing.com/journal/1234567">1) Die Säulen der Erde</option>
<option value="http://www.bookcrossing.com/journal/1234567">2) Die Säulen der Erde</option>
<option value="http://www.bookcrossing.com/journal/1234567">3) Die Säulen der Erde</option>
<option value="http://www.bookcrossing.com/journal/1234567">4) Die Säulen der Erde</option>
<option value="http://www.bookcrossing.com/journal/1234567">5) Die Säulen der Erde</option>
<option value="http://www.bookcrossing.com/journal/1234567">6) Die Säulen der Erde</option>
</select>
[end-code]
daraus wird:
· ALLE!!!! "[kleb!]" mußt Du löschen, und zwar so, daß der gesamte Codeschnipsel sozusagen 1 (eine) Zeile formt. Natürlich wird dieser Text an verschiedene Stellen in der Profil-Eingabe-Box automatisch umgebrochen werden, wichtig ist, daß kein einziges HARD-RETURN (Zeilenvorschub) drinstehen bleibt. (Wenn ich diesen Codeschnipsel so vorbereite, daß Du ihn nicht mehr kleben brauchst, paßt er leider nicht mehr innerhalb der mittlere Spalte diese Seite).
· Mit size= gibst Du an, wieviele Zeilen im Fenster sichtbar sein sollen. Wenn Du den Wert 1 nutzt, dann bekommst Du eine sogenannte Drop-Down-Box. Es können beliebig viele <option>...</option> zwischen den <select ...</select> geschrieben werden.
· Die Breite der Auswahlbox wird mit der Länge der Eingegebenen Auswahl automatisch festgelegt.
Weiter unten findest Du eine Möglichkeit die Breite fest vorzugeben.
Wenn die Zeile zu lang wird, kannst Du diesen nicht einfach umbrechen (weder mit <br>, noch mit der Enter/Return-Taste).
Entweder kürzt Du den Text oder machst daraus 2 Einträge...
· Das Wort multiple in der Auswahl-Box OHNE Links (nur dort macht es Sinn), erlaubt dem Leser der Liste, mehrere Einträge zu markieren. Dies hat zwar kein direkten Nutzen, höchstens zum schneller zurückfinden in der Liste, während er diese durchscrollst.
· Die Links in der Auswahlbox-Box MIT Links sind ohne Unterstrich; entweder nutzt Du diese oben erwähnten Tags
zur unterstreichen von Text, oder Du weist den Leser darauf hin, daß er einfach den Text anzuklicken hat. Wer lieber
per doppelklick den Link öffnen lassen möchte, ändert einfach das onChange in ein
onDblClick.
· Natürlich können die <option>...</option> der beiden Auswahl-Boxen mit einander vermischt werden, was aber ggf. den Leser irritieren könnte. Dennoch, für eine Trennlinie, Titel innerhalb der Liste, usw. kann sowas schon nützlich sein.
C1. Selectbox anders einfärben (Beispiel anhand einer OHNE Links):
[code]
<select multiple size="5" style="background-color:#FF9900; color:#000000;">
<option>eine erste Zeile eine erste Zeile eine erste Zeile</option>
<option>eine zweite Zeile</option>
<option>eine dritte Zeile</option>
<option>eine vierte Zeile</option>
<option>eine fünfte Zeile</option>
<option>eine sechste Zeile</option>
</select>
[end-code]
daraus wird:
C2. Selectbox anders einfärben (Beispiel anhand einer MIT Links):
[code]
<select size="5" style="background-color:#800080; color:#FFFFFF;" [kleb!]
onChange="PopUpName=window.open('','PopUpName'); [kleb!]
PopUpName.location=options[selectedIndex].value;">
<option value="http://www.bookcrossing.com/journal/1234567">1) Die Säulen der Erde</option>
<option value="http://www.bookcrossing.com/journal/1234567">2) Die Säulen der Erde</option>
<option value="http://www.bookcrossing.com/journal/1234567">3) Die Säulen der Erde</option>
<option value="http://www.bookcrossing.com/journal/1234567">4) Die Säulen der Erde</option>
<option value="http://www.bookcrossing.com/journal/1234567">5) Die Säulen der Erde</option>
<option value="http://www.bookcrossing.com/journal/1234567">6) Die Säulen der Erde</option>
</select>
[end-code]
daraus wird:
· ALLE!!!! "[kleb!]" mußt Du löschen, und zwar so, daß der gesamte Codeschnipsel sozusagen 1 (eine) Zeile formt. Natürlich wird dieser Text an verschiedene Stellen in der Profil-Eingabe-Box automatisch umgebrochen werden, wichtig ist, daß kein einziges HARD-RETURN (Zeilenvorschub) drinstehen bleibt. (Wenn ich diesen Codeschnipsel so vorbereite, daß Du ihn nicht mehr kleben brauchst, paßt er leider nicht mehr innerhalb der mittlere Spalte diese Seite).
· Wenn Du die andere Rubriken der HTML-Goodies durchgelesen hast, wirst Du diese Technik sofort verstanden haben: es wird mittels einer CSS (Cascade Style Sheet) Definition, die Standardfarbe überschrieben. Wie aus diesem Beispiel ersichtlich, wird an der style-Definition, die Schlüsselworte (background-color: und color:) und einen Wert (#FF9900 und #000000) übergeben. Die Hintergrundfarbe der Select-Box wird also mit background-color: und die Textfarbe der Select-Box wird mit color: festgelegt. Die Definition dieser Farben ist wieder in einer "hexadezimal"-Notation festgelegt. Hier 2 Seiten, wo Du viele Farbcodierungen siehst sowie damit experimentieren kannst: validhtml.com | 216 Colors.
· Und wenn Du es ganz bunt magst, kannst Du in der select-Anweisung nur die Hintergrundfarbe angeben (style="background-color:#FF9900;") und in jede einzelne option-Anweisung über eine style-Definition eine Textfarbe zuweisen (<option style="color:#000000;">). Zum Beispiel nützlich, um eine Titelzeile hervorzuheben:
Selectbox mit hervorgehobene Titelzeile (Beispiel anhand einer OHNE Links):
[code]
<select multiple size="5" style="background-color:#FF9900; color:#000000;">
<option style="color:#FFFF00; font-size:130%";>eine erste Zeile eine erste Zeile eine erste Zeile</option>
<option>eine zweite Zeile</option>
<option>eine dritte Zeile</option>
<option>eine vierte Zeile</option>
<option>eine fünfte Zeile</option>
<option>eine sechste Zeile</option>
<option>eine siebte Zeile</option>
<option>eine achte Zeile</option>
<option>eine neunte Zeile</option>
</select>
[end-code]
daraus wird:
· Prinzipiel kannst Du in diese style-Definition alles reinpacken, was einen einfluß auf Text und Farbe hat, also background-color:, color:, font-size:, letter-spacing:, u.s.w. Siehe auch das Kapitel: "Veränderung am Text".
· Wie ich gerade feststellen muß, scheint Internet Explorer 5.5 die font-size:-Angabe
innerhalb einer style-Definition im option-Tag nicht zu erkennen :(
Mozilla & Co tun dies einwandfrei...
D. Die BREITE der Selectbox festlegen (es geht also doch! ;):
[code]
<select multiple size="5" style="width:500px;">
<option>eine erste Zeile</option>
<option>eine zweite Zeile</option>
<option>eine dritte Zeile</option>
<option>eine vierte Zeile</option>
<option>eine fünfte Zeile</option>
<option>eine sechste Zeile</option>
</select>
[end-code]
daraus wird:
· Mittels eine CSS-Definition style="width:500px;" kannst Du die Breite vordefinieren
(in Pixel).
Welchen Wert Sinn macht, mußt Du durch experimentieren abschätzen, je größer der Wert, um so breiter die Box.
Und einen zu großen Wert sorgt dafür, daß Deine Box in die rechte Spalte reinragen wird...
Übrigens, da Du hiermit die Breite selbst festlegst, wird jeder Text, der länger ist als die Breite der Box
einfach geschnitten dargestellt. Ob Select-Boxen einen horizontalen scrollbar haben können, muß ich bei Gelegenheit
mal rausfinden.
· Denk dran: Wenn Du mehrere style-Definitionen verwenden möchtest, schreibst Du diese alle in einer style="-Definition, jeder Wert getrennt mit einem Semikolon (Punkt-Komma ";"). z.B. style="widht:500px; background-color:#FF9900; color:#000000;"
· Um 2 Select-Boxen neben einander darzustellen reicht es 2 select-Blöcke hintereinander zu definieren (ganz ohne HTML-Tabelle!). Allerdings sollte es sich hier um kleine select-Blöcke handeln, die in der mittlere Spalte locker Platz finden, sonst werden diese automatisch untereinander dargestellt.
Im Profil ist dabei darauf zu achten, dass Du die zweite Select-Box direkt auf die erste folgen läßt:
...</select><select>....
Sonst erscheinen sie immer untereinander...
Aber denkt bitte daran, dass nicht jede/r Mega-Grafikkarten mit Giga-Bildschirmen in einer Super-duper-Auflösung hat. Macht auch mal euer Browserfenster kleiner, um zu sehen, wie häßlich sich manche Seiten quer durcheinander schieben, wenn der Platz zum Anschauen einfach kleiner ist
HTML-Goodies:
Veränderungen am Text |
Links |
Boxen |
Select-Boxen |
Sonstiges |
zurück zum Index |
nach oben
Inhalt: ©2003-2012 by Wyando :: Impressum
(www.honchun.de ist unabhängig von www.bookcrossing.com)
Logos & Layout: ©2001-2012 bookcrossing.com All Rights Reserved
