Okay, irgendwie gehört es nach HTML und nach CSS...
Guten Morgen,
ich habe ein Formular, in dem der Benutzer aus einer ganzen Reihe von Optionen sehr viele (bzw. auch sehr unterschiedlich viele) auswählen können soll. Genauer gesagt geht es um tagging aber eben zur Auswahl und nicht (nur) zum freien Eingeben.
Sinn und Zweck dieser Beschränkung ist, dass die Anzahl der Tags gering gehalten werden soll und multilingual funktionieren soll (folglich muss der Server wissen, welcher Tag welchem in einer anderen Sprache entspricht).
Naja, also Auswahl von ggf. sehr vielen Optionen (oder auch mal nur einer). Meine bisherige Lösung sah so aus:
<div class="lined_boxes">
<label for="upl_tag1">Epoche / Ära</label>
<!-- Hier steht eine Art ToolTipp-Funktion, tut hier aber nichts zur Sache -->
<br />
<select multiple="multiple" name="upl_tag1" id="upl_tag1" size="12">
<option value="17">60er</option>
<option value="16">50er</option>
<option value="18">70er</option>
<option value="9">30er</option>
<option value="8">20er</option>
<option value="19">80er</option>
<option value="6">Romantik</option>
<option value="20">90er</option>
<option value="4">Barock</option>
<option value="10">40er</option>
<option value="21">Moderne</option>
<option value="22">nahe Zukunft</option>
<option value="1">Antike</option>
<option value="7">Industrialisierung</option>
<option value="5">Klassik</option>
<option value="3">Renaissance</option>
<option value="2">Mittelalter</option>
<option value="23">ferne Zukunft</option>
<option value="all">jede (epochenunabhängig)</option>
<option value="none">keine</option>
<option value="other">sonstige</option>
</select>
<br />
<input name="upl_tag1_other" type="text" />
</div>
Dazu folgendes CSS:
.lined_boxes {
float:left;
}
Damit werden mehrere dieser "Tag-Listen" nebeneinander aufgereiht.
Nun habe ich mir überlegt, dass bei ggf. 200 Einträgen in der Liste es irgendwie blöd ist ständig Strg gedrückt zu halten und dass mancher nicht ganz so techy Benutzer das vielleicht nicht einmal weiß.
Daher die Überlegung das ganze mit Checkboxes zu machen, aber mit einer ähnlichen Optik. Sieht dann etwa so aus:
<fieldset class="lined_boxes checklist">
<legend>Stimmung/Adjektiv
<!-- Hier wieder besagte Tooltipp-Funktion, die aber in dieser Variante nicht wie gewünscht funktioniert.... anderes Thema. --></legend>
<ul class="checklist">
<li>
<input type="checkbox" name="upl_tag3[35" id="ulp_tag3_35" />
<label for="ulp_tag3_35">bedrohlich</label>
</li>
<li>
<input type="checkbox" name="upl_tag3[29" id="ulp_tag3_29" />
<label for="ulp_tag3_29">langsam</label>
</li>
<li>
<input type="checkbox" name="upl_tag3[37" id="ulp_tag3_37" />
<label for="ulp_tag3_37">fröhlich</label>
</li>
<li>
<input type="checkbox" name="upl_tag3[27" id="ulp_tag3_27" />
<label for="ulp_tag3_27">wehmütig</label>
</li>
<li>
<input type="checkbox" name="upl_tag3[41" id="ulp_tag3_41" />
<label for="ulp_tag3_41">erfreuend</label>
</li>
<li>
<input type="checkbox" name="upl_tag3[24" id="ulp_tag3_24" />
<label for="ulp_tag3_24">spannend</label>
</li>
<li>
<input type="checkbox" name="upl_tag3[31" id="ulp_tag3_31" />
<label for="ulp_tag3_31">tragend</label>
</li>
<li>
<input type="checkbox" name="upl_tag3[33" id="ulp_tag3_33" />
<label for="ulp_tag3_33">anstrengend</label>
</li>
<li>
<input type="checkbox" name="upl_tag3[39" id="ulp_tag3_39" />
<label for="ulp_tag3_39">beängstigend</label>
</li>
<li><input type="checkbox" name="upl_tag3[none]" id="upl_tag3_none" /><label for="upl_tag3_none" >keine</label></li>
<li><input type="checkbox" name="upl_tag3[other]" id="upl_tag3_other" /><label for="upl_tag3_other">sonstiges</label></li>
</ul>
<br />
<input name="upl_tag3_other" type="text" />
</fieldset>
CSS dazu sieht so aus:
.lined_boxes {
float:left;
}
ul.checklist {
height:15em;
overflow:scroll;
margin:0 0 0 0.5em;
list-style-type:none;
list-style-position:inside;
}
ul.checklist li {
left:-2.5em;
}
Optisch sieht es dann etwa so aus (FF 3.5.4, die Fragezeichen sind besagte Tooltipps):
Mein Problem ist jetzt nicht die unterschiedliche Höhe oder so, wenn ich die Techniken angleiche bekomme ich das schon hin.
Sondern vielmehr stört mich, dass in der zweiten Variante 1. mehr Platz verbraucht als benötigt wird (weil die Listenpunkte so weit eingerückt sind) und 2. eine horizontale Scrollbar erscheint, die ich nicht brauche.
Eigentlich gefällt mir die zweite Variante wirklich besser, eben weil man Ctrl nicht halten muss was man ja ggf. schnell mal vergisst, wenn man zwischendurch "woanders" war.
Aber die Formatierung... ich weiß ja nicht.
Also meine Frage ist im Grunde: Weiß jemand wie man die horizontale Scrollbar da weg bekommt. Oder hat jemand eine dritte Idee, wie man das geschickt lösen kann?
(PS: Bitte haut mich nicht wegen der zweieinhalb br-Elemente, ich verwende die wirklich sparsam, nur in diesem Code-Fetzen eben nicht)
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(