Deus Figendi: /CSS Select vs. checkbox oder: h-scroll soll weg!

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):
Screenshot des o.g. Codes
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:(
  1. Nachtrag:
    Die Checkboxen-Einrückung habe ich gerade gelöst, ein position:relative hat da geholfen (dass ich da vor dem Posting nicht drauf gekommen bin...) allerdings scheint die Box immernoch breiter zu sein als sie müsste... naja mal sehen, sieht jedenfalls nicht mehr sooo furchtbar aus, aber die Scrollleiste bleibt :-(

    --
    sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
  2. Hallo,

    Okay, irgendwie gehört es nach HTML und nach CSS...

    nachdem du dich mal für eine Struktur entschieden hast, gehört es eigentlich nur noch in den Bereich CSS.

    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ß.

    Ja. Listen mit Mehrfachauswahl sind allgemein problematisch: Zum einen ist die Möglichkeit der Mehrfachauswahl nicht erkennbar; zum andern wissen tatsächlich viele Benutzer nicht, wie das geht.

    Daher die Überlegung das ganze mit Checkboxes zu machen

    Halte ich hier auch für die bessere Wahl.

    <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>

    Willst du tatsächlich eine unpaarige eckige Klammer im name-Attribut der Checkboxen haben? Seltsam ...

    </ul>
    <br />
    <input name="upl_tag3_other" type="text" />
    </fieldset>

    Das br-Element ist an dieser Stelle nicht nur unnötig, sondern unsinnig, denn ul ist ein Blockelement, das nachfolgende input steht also sowieso in einer neuen Zeile.

    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;
    }

    Die left-Eigenschaft, die du für die li-Elemente setzt, hat keine Wirkung, solange du keine Angaben zu position machst.

    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.

    Das mit dem Scrollbalken ist klar, den hast du ja über overflow:scroll explizit angefordert. Wenn du ihn nur da haben willst, wo er nötig ist, solltest du nicht scroll, sondern auto setzen (oder verwende nicht overflow, sondern overflow-y).

    Das Einrücken der Listenelemente bekommst du weg, indem du padding-left für ul und margin-left für li eliminierst (beide, weil die verschiedenen Browser die Einrückung von Listen unterschiedlich realisieren).

    (PS: Bitte haut mich nicht wegen der zweieinhalb br-Elemente, ich verwende die wirklich sparsam, nur in diesem Code-Fetzen eben nicht)

    Aber wozu?

    So long,
     Martin

    --
    Paradox ist, wenn jemand eingefleischter Vegetarier ist.
    1. nachdem du dich mal für eine Struktur entschieden hast, gehört es eigentlich nur noch in den Bereich CSS.

      War ja nicht ganz entschieden, war ja noch offen für weitere Ideen :)

      Das br-Element ist an dieser Stelle nicht nur unnötig, sondern unsinnig, denn ul ist ein Blockelement, das nachfolgende input steht also sowieso in einer neuen Zeile.

      (PS: Bitte haut mich nicht wegen der zweieinhalb br-Elemente, ich verwende die wirklich sparsam, nur in diesem Code-Fetzen eben nicht)

      Aber wozu?

      Stimmt, war halt ein Relikt aus der select-Lösung

      Wenn du ihn nur da haben willst, wo er nötig ist, solltest du nicht scroll, sondern auto setzen (oder verwende nicht overflow, sondern overflow-y).

      Ich habe beides gesetzt und werde das overflow:auto entfernen sobald CSS3 ausreichend verbreitet ist.

      Das Einrücken der Listenelemente bekommst du weg, indem du padding-left für ul und margin-left für li eliminierst (beide, weil die verschiedenen Browser die Einrückung von Listen unterschiedlich realisieren).

      Alles klar, schönen Dank damit sind alle Probleme gelöst :) (naja nicht wirklich, aber die hier angesprochenen).

      Schönen Dank und schönen Tag!

      --
      sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(