selectfelder mit zusätzlichem Rahmen versehen

[Enrico]

Hallo,

ich möchte um selectfelder einen zusätzlichen Rahmen anzeigen lassen und habe hierfür folgende Definitionen:

span
     {
        border:     1px solid #ffffff;
     }

select
     {
        border:     1px solid #646464;
        color:      #b2b2b2;
        background: #5d7ac5;
     }

select:hover
     {
        background: #b0c6ff;
        color:      #000000;
     }

Der relevante Teil der html-Datei sieht wie folgt aus:

<span>
        <select>
           <option value="Keine_Auswahl" selected>Anfangsbuchstabe</option>
           <option value="Keine_Auswahl">A</option>
           <option value="Keine_Auswahl">D</option>
           <option value="Keine_Auswahl">E</option>
        </select>
     </span>

Nun habe ich aber festgestellt, dass mir der umgebende Rahmen nur links, oben und rechts vom
selectfeld angezeigt wird, nicht aber unten.

Warum ist das so?
Habe ich bei den Difinitionen etwas falsch gemacht oder etwas vergessen?

Vielen Dank für Eure Hilfe.

Gruß
Enrico

[romy]

Hi Enrico,

ich möchte um selectfelder einen zusätzlichen Rahmen anzeigen lassen und habe hierfür folgende Definitionen:

Um das select im aufgeklappten Zustand, oder im nicht aufgeklappten Zustand?

Nun habe ich aber festgestellt, dass mir der umgebende Rahmen nur links, oben und rechts vom
selectfeld angezeigt wird, nicht aber unten.
Warum ist das so?
Habe ich bei den Difinitionen etwas falsch gemacht oder etwas vergessen?

Kann ich nicht festestellen, habe dein Beispiel angeschaut (dein Hintergrund ist nicht weiß nehme ich an?) ;) Der Rahmen geht komplett drumm herum, nur im aufgeklappten Zustand wird der untere Rahmen überschrieben, meinst du das?

ciao
romy

[Enrico]

Hallo Romy,

ui, da hab ich ja eine Diskussion losgetreten ;-)

Erstmal danke an alle für die rege Beteiligung.

Der untere Rahmen ist auch im eingefahrenen Zustand weg.

Wenn ich ein div anstatt eines spans nehme, dann geht der div über die
komplette Breite, was nicht schön aussieht. Auf der anderen Seite kann ich
ihm aber auch keine feste Größe geben, da die Breite der selectfelder
variiert, je nach Inhalt.

Gruß
Enrico

[Vinzenz Mai]

Hallo Enrico,

Der untere Rahmen ist auch im eingefahrenen Zustand weg.

hmm, das könnte daran liegen, dass ein Select-Element von Deinem Betriebssystem den Rahmenstil "inset" bekommt.

Teste doch bitte mal mit einer Rahmenbreite von 4 oder 5 Pixel (mehr als einem :-))

Wenn ich ein div anstatt eines spans nehme, dann geht der div über die
komplette Breite, was nicht schön aussieht. Auf der anderen Seite kann ich
ihm aber auch keine feste Größe geben, da die Breite der selectfelder
variiert, je nach Inhalt.

Schau Dir doch bitte Listboxen Deines OS an. Der Rahmen um die Listbox wird bei den mir zur Verfügung stehenden OS nicht vergrößert, wenn die Listbox ausgeklappt ist. Für den Benutzer ist dies meiner Meinung nach gewohntes GUI-Verhalten.

Freundliche Grüße

Vinzenz

[Enrico]

Hallo Vinzenz & alle anderen Hilfestellern,

ich habe die Darstellung meines selectfeldes nun über einen eigenen Nachbau hinbekommen,
allerdings mit der Ausnahme, dass ein CSS-Klassenwechsel des Menüpunkte-divs bei
MouseOver im div-Bereich, nicht klappt.

Folgende variablen Funktionen habe ich entworfen:

function Menuepunkt_aktiv (Objekt)
     {
        var Objekt = window.document.getElementById (Objekt);
        alert (Objekt);

// Objekt.className = eval (Objekt + "_aktiv");
     }

function Menuepunkt_inaktiv (Objekt)
     {
        var Objekt = window.document.getElementById (Objekt);
        alert (Objekt);

// Objekt.className = eval(Objekt + "_inaktiv");
     }

Leider funktioniert mein Vorhaben aber nicht wie gewünscht, der zu Testzwecken eingebaute
alert-Befehl liefert mir nur die Ausgabe "object HTMLDivElement", nicht aber die ID des
jeweiligen div-Bereiches, so wie es eigentlich der Fall sein sollte.

Der Aufruf der Funktionen erfolgt über folgende Anweisungen:

onmouseover="Menuepunkt_aktiv('Auswahlliste_Anfangsbuchstabe');"
     onmouseout="Menuepunkt_inaktiv('Auswahlliste_Anfangsbuchstabe');"

Hier der komplette HTML-Code mit seinen relevanten Teilen:

<div id="Auswahlliste_Anfangsbuchstabe" class="Auswahlliste_Anfangsbuchstabe" ... onmouseover="dropdownmenu(this, event, 'Anfangsbuchstabe')"></div>
     <div id="Anfangsbuchstabe" class="Auswahlliste_Optionen">
        <div ... onmouseover="Menuepunkt_aktiv('Auswahlliste_Anfangsbuchstabe');" onmouseout="Menuepunkt_inaktiv('Auswahlliste_Anfangsbuchstabe');">
           <a href="http://www.dynamicdrive.com/">A</a>
           <a href="http://www.cssdrive.com">D</a>
           <a href="http://www.javascriptkit.com">E</a>
        </div>
     </div>

Da die Seite nur lokal betrieben wird und Javascript immer aktiviert ist, brauche ich mir
hier keine Gedanken machen, was wäre, wenn Javascript deaktiviert wäre.

Was mache ich in obigem Code falsch?
Ich wüsste nicht, wie ich den Aufruf sonst definieren sollte.

Vielen Dank für Eure Mithilfe.

Gruß
Enrico

[Struppi]

// Objekt.className = eval(Objekt + "_inaktiv");

Wozu eval?

Leider funktioniert mein Vorhaben aber nicht wie gewünscht, der zu Testzwecken eingebaute
alert-Befehl liefert mir nur die Ausgabe "object HTMLDivElement", nicht aber die ID des
jeweiligen div-Bereiches, so wie es eigentlich der Fall sein sollte.

Wieso sollte das so sein?
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id

Du willst die Eigenschaft id

Da die Seite nur lokal betrieben wird und Javascript immer aktiviert ist, brauche ich mir
hier keine Gedanken machen, was wäre, wenn Javascript deaktiviert wäre.

Du hast hier Sorge, dass jemand dir Vorwirft JS einzusetzten, das ist bei deiner vorgehensweise aber unbegründet, da dein JS ja nicht das Menü ersetzt, sondern lediglich ergänzt. Und genau in so einem Fall macht JS am meisten Sinn.

Was mache ich in obigem Code falsch?
Ich wüsste nicht, wie ich den Aufruf sonst definieren sollte.

Der Aufruf ist ja an sich ok, wobei aber die Methode mit den vielfachen "inline" Events (also denen im HTML Code) nicht besonders schön und wenig Effektiv ist. Mathias hat einen Artikel  geschrieben, wo Techniken beschrieben werden die besser sind.

Kurz: Es geht darum, den JS Code aus dem HTML Code zu entfernen und die Events erst nachträglich hinzuzufügen.

Struppi.

[Enrico]

Hallo Struppi,

Du willst die Eigenschaft id

Dein Anstoß war - glaub ich - goldrichtig :-)

Ohne zu wissen, ob es richtig ist, habe ich jetzt einfach ".id" ergänzt, so dass meine, jetzt umgebaute Funktion
wie folgt aussieht:

function Menuepunkt (Objekt, Flag)
     {
        var Status = "";
        var Objekt = window.document.getElementById(Objekt).id;

if (Flag == true)
        {
           Status = "_aktiv";
        }
        else
        {
           Status = "_inaktiv";
        }

Objekt.className = Objekt + Status;
     }

Wenn ich nun testweise folgenden alert-Befehl einbaue...

alert (Objekt + ".className = " + (Objekt + Status));

...wird mir folgende Ausgabe erzeugt:

Auswahlliste_Anfangsbuchstabe.className = Auswahlliste_Anfangsbuchstabe_aktiv

Dies signalisiert mir, dass der Code soweit korrekt ist.

Allerdings bekomme ich aber immer noch keinen Klassenwechsel bei meinem Menüpunkte-div.

Ich dachte, dass dies evtl. an den CSS-Definitionen liegen könnte, was aber nicht der Fall zu sein scheint.

Hier der komplette Block (um auszuschliessen, dass ich vorher oder zwischendrin irgendetwas falsch gemacht habe):

div.Auswahlliste_Anfangsbuchstabe,
     div.Auswahlliste_Anfangsbuchstabe_aktiv,
     div.Auswahlliste_Anfangsbuchstabe_inaktiv,
     div.Auswahlliste_Genre,
     div.Auswahlliste_FSK,
     div.Auswahlliste_Darsteller,
     div.Auswahlliste_Produzent,
     div.Filter_loeschen,
     div.Filter_loeschen:hover
     {
        height:     20px;
        position:   absolute;
        top:        22px;
     }

div.Auswahlliste_Anfangsbuchstabe,
     div.Auswahlliste_Anfangsbuchstabe:hover,
     div.Auswahlliste_Anfangsbuchstabe_aktiv,
     div.Auswahlliste_Anfangsbuchstabe_inaktiv
     {
        width:      134px;
        left:       194px;
     }

div.Auswahlliste_Anfangsbuchstabe,
     div.Auswahlliste_Anfangsbuchstabe_inaktiv
     {
        background: url(../../GRAFIKEN/SCHALTFLAECHEN/Auswahlliste_Anfangsbuchstabe_0.png) no-repeat;
     }

div.Auswahlliste_Anfangsbuchstabe:hover,
     div.Auswahlliste_Anfangsbuchstabe_aktiv
     {
        background: url(../../GRAFIKEN/SCHALTFLAECHEN/Auswahlliste_Anfangsbuchstabe_1.png) no-repeat;
     }

Diese CSS-Definitionen sorgen bei mir auch für die Ausgabe der Menüpunkte nach Aufrufen meiner Seite, somit
sind hier die Pfadangaben auch korrekt.

Ich verstehe es nicht, vielleicht sehe ich ja auch den Wald vor lauter Bäumen nicht mehr ;-)

Gruß
Enrico

[Struppi]

Ich verstehe es nicht, vielleicht sehe ich ja auch den Wald vor lauter Bäumen nicht mehr ;-)

Ich ehrlich gesagt auch nicht mehr. Es ist extrem schwierig mit Hilfe von Fragementen Fehlersuche zu betreiben. Ohne komplettes Beispiel, am besten Online, kann ich dir nicht sagen was falsch läuft.

Struppi.

[Enrico]

Hallo Struppi,

leider verfüge ich über keinen Webspace, so dass ich die Seite online stellen
könnte.

Hättest Du etwas dagegen, wenn ich Dir den Code per eMail zusenden würde, dann
könntest Du die Seite bei Dir aufrufen?

Die Lösung können wir dann ja online reinstellen in's Forum, so dass andere
User daran lernen können, falls sie selber so ein Problem haben.

Gruß
Enrico

[Enrico]

So, jetzt habe ich mein Vorhaben endlich lösen können :-)

War nicht ganz einfach, auf den Lösungsweg zu kommen, aber so klappt es:

function Menuepunkt_hervorheben (Objekt, Flag)
     {
        var Zustand = "";

var Objekt    = window.document.getElementById(Objekt);
          var Objekt_ID = Objekt.getAttribute("id");

if (Flag == true)
          {
               Zustand = "_aktiv";
          }
          else
          {
               Zustand = "_inaktiv";
          }

Objekt.setAttribute("class", Objekt_ID + Zustand);
     }

Vielen Dank für Eure Mithilfe.

Gruß
Enrico

[Struppi]

var Objekt    = window.document.getElementById(Objekt);
          var Objekt_ID = Objekt.getAttribute("id");

Es reicht völlig auf Objekt.id; zu zugreifen.

Objekt.setAttribute("class", Objekt_ID + Zustand);

und hier auf: Objekt.className = .....

Struppi.

[romy]

Hi Enrico,

select
     {
        border:     1px solid #646464;
        color:      #b2b2b2;
        background: #5d7ac5;

Die Border-Eigenschaft kann man bei select wohl gar nicht setzen, habe ich gerade gelesen.

ciao
romy

[Gino]

Nun habe ich aber festgestellt, dass mir der umgebende Rahmen nur links, oben und rechts vom
selectfeld angezeigt wird, nicht aber unten.

Mach aus dem span ein DIV. Und gib diesem dann die Border die du möchstest

Gruß
Enrico

[romy]

Hi Gino,

Nun habe ich aber festgestellt, dass mir der umgebende Rahmen nur links, oben und rechts vom
selectfeld angezeigt wird, nicht aber unten.
Mach aus dem span ein DIV. Und gib diesem dann die Border die du möchstest

Das ergibt einen Rahmen, der über die gesamte Breite geht und das Problem, dass unten nach dem Aufklappen kein Rahmen ist, bleibt.

ciao
romy

[Gino]

Das ergibt einen Rahmen, der über die gesamte Breite geht und das Problem, dass unten nach dem Aufklappen kein Rahmen ist, bleibt.

Ok und was ist damit:
<script>
 function resizeDiv() {
  document.getElementById("SelectDIV").style.height = "100px";
 }
</script>

<title>TEST</title>
</head>
<body>
<div id="SelectDIV">
        <select onclick="resizeDiv()">
           <option value="Keine_Auswahl" selected>Anfangsbuchstabe</option>
           <option value="Keine_Auswahl">A</option>
           <option value="Keine_Auswahl">D</option>
           <option value="Keine_Auswahl">E</option>
   </select>
     </div>

</body>
</html>

Also auf klick hin das Element vergrößern einfach

[romy]

Hi Gino,

Ok und was ist damit:
<script>
function resizeDiv() {
  document.getElementById("SelectDIV").style.height = "100px";
}
</script>
<title>TEST</title>
</head>
<body>
<div id="SelectDIV">
        <select onclick="resizeDiv()">
           <option value="Keine_Auswahl" selected>Anfangsbuchstabe</option>
           <option value="Keine_Auswahl">A</option>
           <option value="Keine_Auswahl">D</option>
           <option value="Keine_Auswahl">E</option>
   </select>
     </div>
</body>
</html>

Also auf klick hin das Element vergrößern einfach

Ja aber warum? Der Rahmen drum herum wird trotzdem nicht vergrößert. (Du hast ihn hier gar nicht gesetzt) Es gibt ja einen schwarzen Rahmen, der wohl immer da ist, aber das scheint nicht das zu sein, was der UP möchte. Macht man einen weiteren Rahmen mit Span drumherum, wird dieser nicht mit vergrößert beim Aufklappen der Selectbox. Wenn man nun ein DIV hernimmt, verändert sich der Zustand aber nicht, außer, dass der Rahmen nun 100% in die Breite geht. Dein resize vergrößert sich ja auch einfach um 100px? Was ist, wenn die Selectbox größer wird?

ciao
romy

[Gino]

Also auf klick hin das Element vergrößern einfach
Ja aber warum? Der Rahmen drum herum wird trotzdem nicht vergrößert. (Du hast ihn hier gar nicht gesetzt) Es gibt ja einen schwarzen Rahmen, der wohl immer da ist, aber das scheint nicht das zu sein, was der UP möchte.

Ja hab die Styles vergessen zu posten.

Macht man einen weiteren Rahmen mit Span drumherum, wird dieser nicht mit vergrößert beim Aufklappen der Selectbox. Wenn man nun ein DIV hernimmt, verändert sich der Zustand aber nicht, außer, dass der Rahmen nun 100% in die Breite geht. Dein resize vergrößert sich ja auch einfach um 100px? Was ist, wenn die Selectbox größer wird?

Ich hab über eine komplizierte Javascript-funktion hinbekommen, es dynamisch auszurichten, je nach größe des DropDown. Aber es ist unglaublich unansehnlich es auf diese Weise zu machen. Klappen würde es, aber ich  würde nach den Erkenntnissen nun sagen:

Ein SELECT dahingehend zu verändern ist eigentlich Blödsinn und sehr unpraktikabel, weil eigentlich nicht vorgesehen. Aber wenn es unbedingt sein muss empfehle ich das DropDown nachzubauen. Sprich eine Eigenkonstruktion die einem DropDown Ähnlich sieht. Die Werte könnte man dann in hidden fields speichern um wie bei einem normalen Form weiter zu arbeiten.

[romy]

Hi Gino,

Ich hab über eine komplizierte Javascript-funktion hinbekommen, es dynamisch auszurichten, je nach größe des DropDown. Aber es ist unglaublich unansehnlich es auf diese Weise zu machen. Klappen würde es, aber ich  würde nach den Erkenntnissen nun sagen:
Ein SELECT dahingehend zu verändern ist eigentlich Blödsinn und sehr unpraktikabel, weil eigentlich nicht vorgesehen. Aber wenn es unbedingt sein muss empfehle ich das DropDown nachzubauen. Sprich eine Eigenkonstruktion die einem DropDown Ähnlich sieht. Die Werte könnte man dann in hidden fields speichern um wie bei einem normalen Form weiter zu arbeiten.

Wenn uns der UP noch sagt, was er eigentlich wollte, kann man nochmal schauen, aber ich bin deiner Meinung, es geht nur kompliziert oder eben nicht.

ciao
romy

[Detlef G.]

Hallo Enrico

Nun habe ich aber festgestellt, dass mir der umgebende Rahmen nur links, oben und rechts vom
selectfeld angezeigt wird, nicht aber unten.

Warum ist das so?

Bei Inlineelementen ergibt ein border oft nicht das erwartete und auch ein browserabhängiges Ergebnis, besonders wenn diese umbrochen werden oder nicht nur reinen Fließtext enthalten sondern Elemente wie z.B.<img> oder <select>.

Um einen geschlossenen sichtbaren Rahmen zu erhalten, musst du das <span> zu einem Block machen. Wie du bereits getestet hast, funktioniert es ja mit einem <div>.
Außerdem musst du dafür sorgen, dass dieser Block nur so breit wie sein Inhalt ist, dies kannst du durch float erreichen.
Wenn du dem umschließenden Element float:left zuweist, erhältst du (im zugeklappten Zustand) einen geschlossenen Rahmen, genau um den Inhalt, egal ob dieses Element ursprünglich ein Inline- oder Blockelement ist.

Ein Rahmen auch um das ausgeklappte <select> herum dürfte mit vertretbarem Aufwand kaum möglich sein.

Auf Wiederlesen
Detlef