berdn: Select

Hallo tolles Forum,

ich versuch immer noch CSS zu verstehen ...
Also ich will eine Navigation, only intern, mit einen Selectfeld realisieren, ähnlich dem in Selfhtml. Ich denke mal laut und bitte im Berichtigung bzw. ob ich es denn verstanden habe

Also bei HTML transitional könnte ich es direkt in den body plazieren.
<body>
<form>
<select>
<option></option>
</select>
</form>
</body>

Verwende ich HTML strict müßte es in einem Block-Element stehen
<body>
<form>
<p>
<select>
<option></option>
</select>
</p>
</form>
</body>

Will ich die Breite verändern, sehe ich fast immer
<select style="width: 240px;">
oder mit einer Klasse, oder für alle select im CSS Bereich

Aber da doch "select" ein inline-Element ist, darf es doch keine vorgegeben Breite haben ?!!

also wäre dann nicht
style="display:block;width: 240px;"
erst richtig ??

Für eine Berichtigung oder Bestätigung sehr dankbar,

berdn

  1. HAllo Forum,

    nun habe ich das ganze konkret so umgesetzt, und in Mozilla 1.73
    verschwindet der Text und der Pulldown Button beim über fahren mit der Maus. ????????

    Hat jemand eine Idee

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html><head><title>Navigation</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
    body {
     background-color: #eeeeee;
     }
    .selectMenue{
     display:block;
     width:240px;
     float:left;
     margin-right:20px
    }
    </style>
    <body>
    <form name="myMenue" action="">
    <select size="1" name="Site" class="selectMenue">
     <option value="nothing">Seite</option>
     <option value="nothing">----------------------------------</option>
     <option value="saveSite">Sichern</option>
     <option value="duplicateSite">Duplizieren</option>
     <option value="renameSite">Umbenennen</option>
     <option value="nothing">----------------------------------</option>
     <option value="deleteSite">L&ouml;schen</option>
     <option value="nothing"></option>
    </select>
    <select size="1" name="Attribute" class="selectMenue">
     <option value="nothing">Seitenattribute</option>
     <option value="nothing">----------------------------------</option>
     <option value="makeMetatags">Meta Tags</option>
     <option value="changeBackground">Hintergrundfarbe/-Muster</option>
     <option value="nothing"></option>
    </select>
    <select size="1" name="Content" class="selectMenue">
     <option value="nothing">Seiteninhalt</option>
     <option value="nothing">----------------------------------</option>
     <option value="newContent">Neu</option>
     <option value="clearAllContent">Alle l&ouml;schen</option>
     <option value="nothing"></option>
    </select>
    </form>
    </body></html>

    1. Hallo Forum,

      vieleicht ein Mozilla Bug ?

      Firefox RC1 OK
      IE 5 OK
      IE 5.5 OK
      IE 6 OK
      Opera 7.51 OK

      Mac
      Mouilla 1.7 OK
      Safari 1.2.3 OK

      Halt nur auf dem PC xpPro SP2, Mozilla 1.73 verschwinden die Buttons und
      der Text von den selectboxen. Beim Klicken sind sie wieder da, beim rüberfahren wieder weg.
      Voodoo

      1. Hallo,

        vieleicht ein Mozilla Bug ?

        Nein. Lass das display:block und float: weg. Nutze die SELECT-Objekte, wie in HTML vorgesehen als %formctrl-Elemente.

        Zu Deiner ersten Frage:
        SELECT-Elemente sind zwar im HTML %inline-Elemente http://www.w3.org/TR/html4/sgml/dtd.html#inline, aber eben spezielle %inline-Elemente, %formctrl-Elemente http://www.w3.org/TR/html4/sgml/dtd.html#formctrl. Diese hatten nie width-Attribute, sondern höchstens size-Attribute, welche die Größe in Anzahl Zeichen bzw. Zeilen festlegen. Bei SELECT meint size allerdings die Anzahl der sichtbaren Zeilen. Nach striktem HTML ist ein SELECT also so breit, wie der längste OPTION-Eintrag.

        Für CSS sind %formctrl-Elemente eben auch keine _normalen_ Inline-level-Elemente http://www.w3.org/TR/CSS21/visuren.html#inline-level, sondern wohl eher Replaced-Elemente http://www.w3.org/TR/CSS21/conform.html#replaced-element. Schließlich haben SELECTs, INPUTs und TEXTAREAs durchaus Intrinsic dimensions http://www.w3.org/TR/CSS21/conform.html#intrinsic. Deswegen wird width: auch angewendet.

        viele Grüße

        Axel

  2. Hi,

    Will ich die Breite verändern, sehe ich fast immer
    <select style="width: 240px;">
    oder mit einer Klasse, oder für alle select im CSS Bereich

    Aber da doch "select" ein inline-Element ist, darf es doch keine vorgegeben Breite haben ?!!

    select ist ein replaced-inline. Ergo gilt width/height.

    also wäre dann nicht
    style="display:block;width: 240px;"
    erst richtig ??

    Nein.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.