Labels & Select-Boxen anordnen

[Arne Kröger]

Hallo erstmal,
ich versuche labels so anzuordnen, dass sie als jeweiliges label für die select-box über dieser steht, leider klappt das nicht so wirklich und ich hoffe, dass ihr mir helfen könnt.
So sieht die xhtml seite aus:

<div id="search">
  <map id="projectsearchform" name="projectsearchform">
    <form action="index.php" method="get">

<fieldset><legend>{L('taskproperties')}</legend>
        <label class="default multisel" for="type">{L('tasktype')}</label>
        <select name="type[]" id="type" multiple="multiple" size="5">
          {!tpl_options(array('' => L('alltasktypes')) + $proj->listTaskTypes(), Get::val('type', ''))}
        </select>

<label class="default multisel" for="sev">{L('severity')}</label>
        <select name="sev[]" id="sev" multiple="multiple" size="5">
          {!tpl_options(array('' => L('allseverities')) + $severity_list, Get::val('sev', ''))}
        </select>

<label class="default multisel" for="due">{L('dueversion')}</label>
        <select name="due[]" id="due" {!tpl_disableif(Get::val('project') === '0')} multiple="multiple" size="5">
          {!tpl_options(array('' => L('dueanyversion')) + $proj->listVersions(false, 3), Get::val('due', ''))}
        </select>
     </fieldset>
    </form>
  </map>
</div>

So in etwa....

und ich versuche diese global, dass heißt die labels als eines und die boxes als zweites gerade zu rücken.
Hier ist er auszug aus meiner css datei

div#search label.multisel {
    display:inline;
    margin-top:-20px;
  }
div#search select {
    float:left;
 margin-top:1.2em;
}
div#search input.users {
 margin-top:1.2em;
}
div#search button {
 color:#FFF;
 margin-left:0;
}
div#search input#searchtext {
  width:30em;
}
div#search fieldset {
 padding:0 0.5em 0.5em;
 margin:0.3em 0;
}
div#search fieldset legend {
 padding:0 2px;
}

[wahsaga]

hi,

leider klappt das nicht so wirklich

Tipps für Fragende

gruß,
wahsaga

[Der Martin]

Hallo Arne,

ich versuche labels so anzuordnen, dass sie als jeweiliges label für die select-box über dieser steht, leider klappt das nicht so wirklich und ich hoffe, dass ihr mir helfen könnt.

da hätte ich eine Bitte vorab fürs nächste Mal: Wenn es um clientseitige Probleme geht (und ein CSS-Problem *ist* ein solches), dann zeig uns bitte den Code, der tatsächlich beim Client ankommt. Dein Codeauszug enthält noch Fragmente, die vermutlich serverseitig ergänzt werden sollen. Das erschwert die Fehleranalyse.

<map id="projectsearchform" name="projectsearchform">
    <form action="index.php" method="get">

Was soll denn das map-Element hier? Das map-Element dient der Definiton von verweissensitiven Grafiken, aka Imagemaps. So wie du es hier einsetzt, ist es Unsinn.

<fieldset><legend>{L('taskproperties')}</legend>
        <label class="default multisel" for="type">{L('tasktype')}</label>
        <select name="type[]" id="type" multiple="multiple" size="5">
          {!tpl_options(array('' => L('alltasktypes')) + $proj->listTaskTypes(), Get::val('type', ''))}
        </select>

und ich versuche diese global, dass heißt die labels als eines und die boxes als zweites gerade zu rücken.

div#search label.multisel {
    display:inline;
    margin-top:-20px;
  }
div#search select {
    float:left;
margin-top:1.2em;
}

Hier krieg ich ein Verständnisproblem. Das label machst du zum Inline-Element (ich mein, das wäre es sowieso schon, aber okay). Das heißt, es erscheint an der regulären Textposition, nur eben durch das negative margin-top um 20px nach oben versetzt. Und das select-Element, das im Code direkt dahinter steht, floatest du einfach nach links. Was bringt dich dann auf die Idee, dass diese beiden Elemente dann noch in einem optisch erkennbaren Bezug zueinander stehen?

So long,
 Martin