Spaltenlayout in <select> möglich ???

[rein]

Hallo Leute,

ich möchte gerne mehrspaltiges Layout im <select>-Element erzeugen.

Normalerweise sieht eine Drop-Down-Liste in <select> z.B. so aus:
Müller: 100 Euro
Meier: 1.234 Euro
Schulze: 3 Euro

Ich möchte gerne, daß sie so aussieht:
Müller:    100 Euro
Meier:   1.234 Euro
Schulze:     3 Euro

Einen ähnlichen Fall habe ich mal gelöst, indem ich Leerzeichen eingefügt habe. Das war aber sehr umständlich (wg. der Proportionalschrift Arial).
Deshalb die Frage:
Geht das auch mit Attributen zu <select> oder <option>? Geht es vielleicht mit css? Ich habe bislang nichts dazu gefunden. Für einen Tip wäre ich sehr dankbar ...
Schöne Grüße am Montag morgen,
Reinhard

[Cheatah]

Hi,

Einen ähnlichen Fall habe ich mal gelöst, indem ich Leerzeichen eingefügt habe. Das war aber sehr umständlich (wg. der Proportionalschrift Arial).

die Schriftart lässt sich ändern.

Geht das auch mit Attributen zu <select> oder <option>?

Jedes <option>-Element enthält genau einen Text. Wie willst Du ein einziges Objekt gezielt in mehrere Spalten strukturieren?

Geht es vielleicht mit css?

Mit CSS kannst Du nur vorhandene Strukturen mit einer Darstellung versehen.

Cheatah

[Dieter Raber]

Hallo Reinhard,

eigentlich ist diese Moeglichkeit nicht vorgesehen, es gibt lediglich den Workaround, anstatt Leerzeichen geschützte Leerzeichen zu nehmen. Im Klartext heisst das, dass du anstatt
Müller:    100 Euro
Müller:&nbsp;&nbsp;&nbsp;&nbsp;100 Euro schreibst
Wenn du PHP benutzt, um die <option> Elemente zu erzeugen, geht das ganz komfortabel mit str_pad(), ansonsten von Hand zu Fuss. Damit auch wirklich Spalten entstehen, musst Du eine Schrift mit fester Breite wählen, also z. B. Courier. Ich finde die Kombination
select {
  font-family:"Bitstream vera sans", "Lucida Console", Monaco, "Courier New", Courier, monospace;
}
ziemlich gut für solche Fälle

Gruß,

Dieter

[rein]

Danke für den Tip. Ich hatte schon befürchtet, daß das nicht geht. Deine Font-Kombination werde ich ausprobieren. Mal schauen, wie die Kombination von Arial auf der Maske mit einer monospace-Schrift aussieht. Man kommt manchmal auch ganz gut hin, wenn man in Arial für 1 Zahl = 2 Leerzeichen nimmt. Das kommt einigermaßen hin, da nur die 1 und er Tausenderpunkt schmaler sind als die anderen Zahlen.
Nochmal Danke,
Reinhard

[Der Martin]

Hallo Reinhard,

Deine Font-Kombination werde ich ausprobieren.

du kannst eigentlich *jede* Schrift mit festem Zeichenabstand nehmen. Nur mit Proportionalschriften wie z.B. Arial ist es immer wieder Glückssache.

Mal schauen, wie die Kombination von Arial auf der Maske mit einer monospace-Schrift aussieht. Man kommt manchmal auch ganz gut hin, wenn man in Arial für 1 Zahl = 2 Leerzeichen nimmt. Das kommt einigermaßen hin, da nur die 1 und er Tausenderpunkt schmaler sind als die anderen Zahlen.

Das ist dann aber alles nur "ungefähr hingetrickst". Wenn man genau hinschaut, sieht man dann doch, dass die gedachte saubere Linie mal um ein, zwei Pixel nach links oder rechts abweicht. Das sieht dann aus wie gewollt und nicht gekonnt.
Das einzige, worauf du dich bei Arial (und vielen anderen proportionalen Schriften) verlassen kannst, ist eine einheitliche Breite aller Ziffern. Hast du also nur Ziffern in den Einträgen, dann bist du fein raus. ;-)

Ciao,
 Martin

[rein]

ganz andere Lösung ...
Gerade bin ich darauf gekommen, daß ich ja nur Daten anzeigen will und sonst nichts. Da gibt es dann bessere Lösungen als das <select>-Element: ich werde ein <div>-Element nehmen und es mit css so formatieren, daß es sich wie ein <select>-Element mit scrollbar (nicht drop-down) verhält. In das <div>-Element kommt eine Tabelle mit der gewünschten Formatierung.
Gruß, Reinhard

[Ashura]

Hallo Dieter.

Ich finde die Kombination
select {
  font-family:"Bitstream vera sans", "Lucida Console", Monaco, "Courier New", Courier, monospace;
}
ziemlich gut für solche Fälle

Du meintest „Bitstream Vera Sans Mono“.

Einen schönen Montag noch.

Gruß, Ashura