Breite von Select-Box mit CSS bestimmen

[Timo]

Hallo,

ich möchte die Breite einer Select-Box mit CSS bestimmen. Das funktioniert soweit auch alles ganz problemlos, wenn ich die style-Anweisung direkt in das HTML-Tag setze, also <select name="kompetenzen[]" style="width=300px" size="5">. Es klappt allerdings nicht, wenn ich die style-Anweisung in eine externe Datei ausgliedere.

HTML-Datei:

[...]
<div id="content">
  <form method='post' action='<?php echo $_SERVER['PHP_SELF'] ?>'>
    <table width="400" border="0">
      <tr>
        <td width="175"> </td>
        <td width="225">
          <p>
            <select name="kompetenzen[]" size="5">
              <option>gkgjhg </option>
              <option>ghjgjhgj</option>
              <option>hgjgjhgk</option>
              <option>hjgjhgjh</option>
              <option>klöklökölkä</option>
            </select>
          </p>
          <p>  </p>
        </td>
      </tr>
    </table>
  </form>
</div>
[...]

CSS-Datei:

#content
{
 position:absolute;
 top:180px;
 left:255px;
 width:400px;
 height:400px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10pt;
 color: #000099;
 line-height: 11pt;
 text-align: justify;
 background-color : transparent;
}

#content.kompetenzen[]
{
 width: 225px;
}

Wie muss ich den style in der CSS-Datei definieren, damit in der HTML-Datei die Select-Box mit der gegebenen Breite anzeigt? Ich habe jetzt schon zig Varianten in der CSS-Datei ausprobiert, könnte bisher aber noch keine funktionierende Lösung finden.

Für Hilfe wäre ich sehr dankbar!

MfG

Timo

[romy]

Hallo Timo,

hier noch eine Klasse reinsetzen
also

<select class="kompetenz" name="kompetenzen[]" size="5">
              <option>gkgjhg </option>
              <option>ghjgjhgj</option>
              <option>hgjgjhgk</option>
              <option>hjgjhgjh</option>
              <option>klöklökölkä</option>
            </select>
          </p>
          <p>  </p>
        </td>
      </tr>
    </table>
  </form>
</div>

hier dann den Klassennamen nehmen (mit dem Elementnamen kann css IMHO nichts anfangen. DU könntest aber auch einfach
#content.select schreiben IMHO, allerdings sähen dann ale selectfelder so aus, die Du besitzt.

#content.kompetenzen[]
{
width: 225px;
}

ciao
romy

[Timo]

Hallo Romy,

danke für Deine Antwort. Leider klappt das alles nicht ;-(

Ich habe jetzt beide Varianten versucht - leider ohne Erfolg. So sieht jetzt der Code aus:

HTML-Datei:

[...]
<div id="content">
  <form method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>">
    <table width="400" border="0">
      <tr>
        <td width="175"> </td>
        <td width="225">
          <p>
            <select class="kompetenz" name="kompetenzen[]" size="5">
              <option>gkgjhg </option>
              <option>ghjgjhgj</option>
              <option>hgjgjhgk</option>
              <option>hjgjhgjh</option>
              <option>klöklökölkä</option>
            </select>
          </p>
          <p>
            <select name="select" size="5">
              <option>gkgjhg </option>
              <option>ghjgjhgj</option>
              <option>hgjgjhgk</option>
              <option>hjgjhgjh</option>
              <option>klöklökölkä</option>
            </select>
          </p>
          <p>  </p>
        </td>
      </tr>
    </table>
  </form>
</div>
[...]

CSS-Datei:

#content
{
 position:absolute;
 top:180px;
 left:255px;
 width:400px;
 height:400px;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10pt;
 color: #000099;
 line-height: 11pt;
 text-align: justify;
 background-color : transparent;
}

#content.kompetenz
{
 width: 225px;
}

#content.select
{
 width: 225px;
}

Warum funktioniert das denn nicht. Eigentlich müssten doch beide Select-Boxen mit einer Breite von 225 Pixel angezeigt werden.

Für erneute Hilfe wäre ich sehr dankbar ;-)

MfG

Timo

[Stefan Einspender]

Hallo Timo,

#content.kompetenz
{
width: 225px;
}

hier definierst Du die Breite für ein Element, welches der Klasse
"kompetenz" angehört und die ID "content" besitzt. Theoretisch
könnte es so ein Element sein:
<span id="content" class="kompetenz">
(ungetestet)

Sowas ist natürlich Unfug, da eine ID immer nur einmal vorkommen
darf und als eindeutiges Identifizierungsmerkmal ausreicht.

Warum funktioniert das denn nicht. Eigentlich müssten doch beide Select-Boxen mit einer Breite von 225 Pixel angezeigt werden.

[pref:t=33204&m=180559] & http://www.w3.org/TR/REC-CSS2/selector.html#q1

Viele Grüße,
Stefan

[Stefan Einspender]

Hallo Timo,

<select name="kompetenzen[]" style="width=300px" size="5">

... style="width:300px;" ...

<div id="content">
...
            <select name="kompetenzen[]" size="5">

http://www.w3.org/TR/html401/types.html#type-cdata:
"ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
 followed by any number of letters, digits ([0-9]), hyphens ("-"),
 underscores ("_"), colons (":"), and periods (".")."

<select name="kompetenzen" size="5">

#content.kompetenzen[]
{
width: 225px;
}

#content select[name="kompetenzen"] { width: 225px; }
oder
#content select { width: 225px; }
oder
select { width: 225px; }
...

Viele Grüße,
Stefan

[Timo]

Hallo Stefan,

vielen Dank für Deine Antwort. #content select { width: 225px; } brachte die richtige Lösung.

MfG

Timo

[Stefan Einspender]

Hallo Timo,

vielen Dank für Deine Antwort. #content select { width: 225px; } brachte die richtige Lösung.

nur als Nachtrag, "richtig" waren alle drei Ansätze, d.h. ich wollte
nicht ein lustiges Ratespiel durchführen ;-)

Variante A funktioniert allerdings nur in ausreichend CSS-fähigen
Browsern.

Variante C ist sehr allgemein gehalten und gilt für alle select-
Elemente, auch die außerhalb von <div id="content"></div>

Viele Grüße,
Stefan

PS: Nur so als Linktipp ...
    http://www.edition-w3c.de/TR/REC-CSS2

[MudGuard]

Hi,

<select name="kompetenzen[]" size="5">

http://www.w3.org/TR/html401/types.html#type-cdata:
"ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".")."

An dieser Stelle ist aber weder ein ID noch ein NAME, sondern ein CDATA.
name hat als Datentyp CDATA (außer im Element meta, wo es den Datentyp NAME hat).
Datentyp ID hat z.B. id, Datentyp NAME hat z.B. das name-Attribut im meta-Element.

Auf das name-Attribut des select-Elements trifft also die von Dir zitierte Stelle gar nicht zu.
Kann man auch schön mit dem Validator ausprobieren:
<input id="bla1" name="bla1"> kein Problem
<input id="bla2" name="bla2[]"> kein Problem
<input id="bla3[]" name="bla3"> ein Error
<input id="bla4[]" name="bla4[]"> ein Error

Ich bin diesem Irrtum auch lange aufgesessen, daß (alle) name-Attribute unter "ID and NAME tokens" reingehören.

cu,
Andreas

[Stefan Einspender]

Hallo Andreas,

<select name="kompetenzen[]" size="5">

...

natürlich ein dummer Fehler von mir, ich habe gelesen, dass es sich
um CDATA handelt und dann irrtümlicherweise direkt im Absatz darunter
das Zitat entnommen. Danke für die Berichtigung.

Viele Grüße,
Stefan