nicht angemeldet
Drei Select nebeneinander, Variante 1, Variante 2??
Hallo zusammen,
ich möchte mit CSS drei Select elemente nebeneinander platzieren.
Ich habe mal zum testen folgendes ausprobiert:
Die erste Variante "showfiles" mit zusätzlichen divs funktioniert soweit.
Warum jedoch funktioniert die zweite Variante (showfiles_1) ohne zusätzliche Divs nicht, bzw. woher kommt die Verschiebung nach unten ?
Würde es für Variante 2 auch eine Lösung geben?
Zusätzlich würde mich noch folgendes interessieren:
Wie könnte man den drei Selects unterschiedliche Breiten geben?
Erstes Select 500px
zweites 120px
drittes 80px
Mir würde nur einfallen alle drei zusätzlich über die ID anzusprechen?
#sel_files {
width:500px;
}
#sel_filesize {
width:120px;
}
#sel_filedate {
width:80px;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">
#showfiles{
width:720px;
}
#showfiles div {
float:left;
padding: 2px;
}
#showfiles label {
display:block;
}
#showfiles select {
width:150px;
}
#showfiles_1{
width:720px;
}
#showfiles_1 label {
display:block;
}
#showfiles_1 select {
float:left;
width:150px;
}
</style>
<body>
<div id="showfiles">
<div>
<label for="sel_files">Anzeige1</label>
<select name="sel_files" size="5" id="sel_files">
<option value=""></option>
</select>
</div>
<div>
<label for="sel_filesize">Anzeige3</label>
<select name="sel_filesize" size="5" id="sel_filesize">
<option value=""></option>
</select>
</div>
<div>
<label for="sel_filedate">Anzeige3</label>
<select name="sel_filedate" size="5" id="sel_filedate">
<option value=""></option>
</select>
</div>
</div>
<div style="clear:left"></div>
<hr>
<div id="showfiles_1">
<label for="sel_files_1">Anzeige1</label>
<select name="sel_files_1" size="5" id="sel_files_1">
<option value=""></option>
</select>
<label for="sel_filesize_1">Anzeige3</label>
<select name="sel_filesize_1" size="5" id="sel_filesize_1">
<option value=""></option>
</select>
<label for="sel_filedate_1">Anzeige3</label>
<select name="sel_filedate_1" size="5" id="sel_filedate_1">
<option value=""></option>
</select>
</div>
</body>
</html>
vielen Dank und viele Grüße
hawk
-
Hi,
Warum jedoch funktioniert die zweite Variante (showfiles_1) ohne zusätzliche Divs nicht, bzw. woher kommt die Verschiebung nach unten ?
Du laesst die labels mit display:block darstellen - und wunderst dich jetzt, dass sie sich auch wie block-Elemente verhalten ...
Würde es für Variante 2 auch eine Lösung geben?
Wenn du kein block-Verhalten fuer die Labels willst - dann formatiere sich nicht mit display:block.
Zusätzlich würde mich noch folgendes interessieren:
Wie könnte man den drei Selects unterschiedliche Breiten geben?
Erstes Select 500px
zweites 120px
drittes 80pxMir würde nur einfallen alle drei zusätzlich über die ID anzusprechen?
Und was schmeckt dir an dieser durchaus ueblichen Vorgehensweise nicht?
MfG ChrisB
-
Hallo Chris,
vielen Dank für deine Hilfe.Wenn du kein block-Verhalten fuer die Labels willst - dann formatiere sich nicht mit display:block.
Wenn ich das display:block bei den Labels rausnehme dann stimmt zwar die Ausrichtung aber die Labesls Beschriftung steht dann nicht mehr direkt über den zugehörigen Selects. Daher mein Versuch mit dem display:block.
Meine CSS Kenntnisse sind leider noch nicht soweit das ich eine andere Lösung hätte ;-)Und was schmeckt dir an dieser durchaus ueblichen Vorgehensweise nicht?
Ich habe kein Problem damit. Ich wollte nur wissen ob es event. noch eine elegantere Lösung gibt. Aber dann ist es ja gut so.
vielen Dank und viele Grüße
hawk-
Hi,
Wenn ich das display:block bei den Labels rausnehme dann stimmt zwar die Ausrichtung aber die Labesls Beschriftung steht dann nicht mehr direkt über den zugehörigen Selects. Daher mein Versuch mit dem display:block.
Meine CSS Kenntnisse sind leider noch nicht soweit das ich eine andere Lösung hätte ;-)Labels floaten lassen (und ihnen eine Breite geben) statt display:block?
MfG ChrisB
-
Hallo ChrisB,
Labels floaten lassen (und ihnen eine Breite geben) statt display:block?
hmmm, also irgendwie klappt das nicht so ganz.
Die Bezeichnung steht jetzt irgendwo, nur nicht über den selects.
Oder habe ich dich falsch verstanden?#showfiles_1{
width:720px;
}
#showfiles_1 label {
float:left;
width:150px;
}
#showfiles_1 select {
width:150px;
}
<div id="showfiles_1">
<label for="sel_files_1">Anzeige1</label>
<select name="sel_files_1" size="5" id="sel_files_1">
<option value=""></option>
</select>
<label for="sel_filesize_1">Anzeige3</label>
<select name="sel_filesize_1" size="5" id="sel_filesize_1">
<option value=""></option>
</select>
<label for="sel_filedate_1">Anzeige3</label>
<select name="sel_filedate_1" size="5" id="sel_filedate_1">
<option value=""></option>
</select>
</div>vielen Dank und viele Grüße
hawk-
Hi,
Labels floaten lassen (und ihnen eine Breite geben) statt display:block?
hmmm, also irgendwie klappt das nicht so ganz.
Die Bezeichnung steht jetzt irgendwo, nur nicht über den selects.Ach so, du hast ja label und select unabhaengig im Quelltext stehen (durchaus erlaubt so, keine Bange!) - dann muesstest du beide natuerlich noch durch ein zusaetzliches Element gruppieren, und das dann floaten.
Oder aber, du setzt die selects gleich *in* die labels mit rein - auch das ist erlaubt.
MfG ChrisB
-
Hi ChrisB,
Oder aber, du setzt die selects gleich *in* die labels mit rein - auch das ist erlaubt.
das ist eine super Idee. So klappt es auch gut und man spart sich zusätzliche Divs.
Ich wusste garnicht das dies erlaubt ist bzw. W3C konform ist.
na klassevielen Dank und viele Grüße
hawk-
Hi,
Oder aber, du setzt die selects gleich *in* die labels mit rein - auch das ist erlaubt.
das ist eine super Idee. So klappt es auch gut und man spart sich zusätzliche Divs.
Ich wusste garnicht das dies erlaubt ist bzw. W3C konform ist.Ist es, und damit kannst du dir sogar das for-Attribut sparen - wenn man mal Felder hat, die eigentlich nicht unbedingt eine ID brauchen, braucht man ihnen dann nicht nur des Labels wegen zwangsweise eine verpassen.
MfG ChrisB
-
[latex]Mae govannen![/latex]
das ist eine super Idee. So klappt es auch gut und man spart sich zusätzliche Divs.
Ich wusste garnicht das dies erlaubt ist bzw. W3C konform ist.Ist es, und damit kannst du dir sogar das for-Attribut sparen - wenn man mal Felder hat, die eigentlich nicht unbedingt eine ID brauchen, braucht man ihnen dann nicht nur des Labels wegen zwangsweise eine verpassen.
Wenn man für IE5/6 auf den Komfort, ein Input-Element auch per Klick aufs Label aktivieren zu können, verzichten möchte, dann kann man das durchaus so lösen, ja.
Cü,
Kai
--
Some things in life are bad, they can really make you mad
Other things just make you swear and curse.
When you're chewing on life's gristle, don't grumble, give a whistle
And this'll help things turn out for the best...
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|]-
Hi,
Ist es, und damit kannst du dir sogar das for-Attribut sparen - wenn man mal Felder hat, die eigentlich nicht unbedingt eine ID brauchen, braucht man ihnen dann nicht nur des Labels wegen zwangsweise eine verpassen.
Wenn man für IE5/6 auf den Komfort, ein Input-Element auch per Klick aufs Label aktivieren zu können, verzichten möchte, dann kann man das durchaus so lösen, ja.
Ja, ich hatte noch im Hinterkopf, dass irgendein rueckstaendiger Browser damit nicht umgehen konnte, Danke.
(Aber dass es beim 6er auch noch der Fall war, nicht mehr ...)Na, dann halt doch mit 'nem for-Attribut und ID, stirbt ja auch keiner dran.
MfG ChrisB
-
[latex]Mae govannen![/latex]
Ja, ich hatte noch im Hinterkopf, dass irgendein rueckstaendiger Browser damit nicht umgehen konnte, Danke.
(Aber dass es beim 6er auch noch der Fall war, nicht mehr ...)Du solltest deine Sätze sorgsamer formulieren. So, wie du es oben geschrieben hast, könnte man doch glatt auf die Idee kommen, daß IE7 *kein* rückständiger Browser wäre ;-)
(auch wenn er den <label><input ...></label> Fehler nicht mehr macht)
Cü,
Kai
--
Some things in life are bad, they can really make you mad
Other things just make you swear and curse.
When you're chewing on life's gristle, don't grumble, give a whistle
And this'll help things turn out for the best...
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|]
-
-
-
-
-
-
-
-
-