Enrico: Problem mit nur über css nachgebauten Selectboxen

Mahlzeit,

ich bin gerade dabei, die Optik und Funktionsweise von Selectboxen mit eigenen Grafiken über css nachzubauen, damit die Selectboxen diese zur Optik unserer Homepage passen.

Mein Problem ist aktuell, dass die Auswahllisten "ListeTag", "ListeMonat" und "ListeJahr" initial nicht verborgen und zudem rechts von dem sich davor befindlichen div (und nicht darunter) angezeigt werden.

Die eben genannten Auswahllisten werden in der finalen Fassung dynamisch mit den jeweils verfügbaren Optionen belegt und sind hier zu Testzwecken bereits mit einem Wert vorbelegt.

Schematisch habe ich (wohl nicht nur im Firefox) folgende Ausgabe mit sofort angezeigten Listen (hier nur aus einem Wert bestehend):

[Tag][]1 [Monat][]Januar [Jahr][]2015

Der HTML-Code sieht wie folgt aus:

  
<div id="AuswahlTag">  
   <div class="SelectLinksUndMitte"><span>Tag</span></div>  
   <div id="ListeTag">1</div>  
</div>  
  
<div id="AuswahlMonat">  
   <div class="SelectLinksUndMitte"><span>Monat</span></div>  
   <div id="ListeMonat">Januar</div>  
</div>  
  
<div id="AuswahlJahr">  
   <div class="SelectLinksUndMitte"><span>Jahr</span></div>  
   <div id="ListeJahr">2015</div>  
</div>  

Hier der zugehörige css-Code:

  
.SelectLinksUndMitte  
{  
   background:  url(../IMG/SelectLinksUndMitte.png) no-repeat 0 0;  
   display:     block;  
   line-height: 21px;  
   padding:     0 0 0 8px;  
   color:       #000;  
}  
  
.SelectLinksUndMitte span  
{  
   background:    url(../IMG/SelectRechts.png) no-repeat top right;  
   display:       block;  
   float:         left;  
   padding-right: 22px;  
}  
  
#ListeTag,  
#ListeMonat,  
#ListeJahr,  
{  
   background: url(../IMG/SelectOptionenliste.png);  
   display:    none;  
   margin-top: 21px;  
}  
  
#AuswahlTag:hover #ListeTag  
{  
   display: block;  
}  

Was stimmt an meinen Defitionen nicht oder/und was habe ich übersehen?

Viele Dank für eure Mithilfe!

Gruß,
Enrico

  1. Om nah hoo pez nyeetz, Enrico!

    Was … habe ich übersehen?

    Zeig bitte ein online-Beispiel.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Gänse und Gänseblümchen.

    1. Hallo Matthias,

      Zeig bitte ein online-Beispiel

      Natürlich, entschuldige:

      Hier ist der Link.

      Gruß,
      Enrico

      1. Om nah hoo pez nyeetz, Enrico!

        Zuvor: Ich rate davon ab. „Uns gibt es nur mit Meinung und ungebetener Beratung“ (Chräcker Heller) „Ziel dieses Forums ist es, die Qualität von Webseiten zu steigern. Es wäre daher widersinnig, dir bei der Realisation des Gegenteils zu helfen“ (Orlando)

        Lass die Bedienelemente so, wie es der Benutzer gewöhnt ist.

        Du solltest dennoch semantisch passende Elemente verwenden.

        Du möchtest alle Listen ausblenden.

        <div id="AuswahlMonat">  
          <div class="SelectLinksUndMitte">  
            <span>Monat</span>  
          </div>  
          <ul id="ListeMonat">  
            <li>Januar</li>  
          </ul>  
        </div>
        
        div[id^=Auswahl] ul {  
          display: none;  
        }  
          
        div[id^=Auswahl]:hover ul {  
          display: block;  
        }  
        /* wird dazu führen, dass es auf touch-Geräten nur unzuverlässig funktioniert */
        

        Zudem möchtest du die Listen absolut positionieren.

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Igel und Igelit.

        1. @@Matthias Apsel:

          nuqneH

          „Uns gibt es nur mit Meinung und ungebetener Beratung“ (Chräcker Heller) „Ziel dieses Forums ist es, die Qualität von Webseiten zu steigern. Es wäre daher widersinnig, dir bei der Realisation des Gegenteils zu helfen“ (Orlando)

          Das hast du aber schön rausgesucht. Oh, wait. ;-)

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. @@Enrico:

    nuqneH

    ich bin gerade dabei, die Optik und Funktionsweise von Selectboxen mit eigenen Grafiken über css nachzubauen, damit die Selectboxen diese zur Optik unserer Homepage passen.

    Na bloß gut, dass du noch dabei bist und noch nicht fertig, sonst wäre die ganze Arbeit für die Katz gewesen.

    Auch wenn div so *aussehen* wie Auswahlfelder, sind sie noch lange nicht wie Auswahlfelder *bedienbar*.

    Es ist unsinnig, die Funktion von HTML-Elementen mit div nachzubauen. Heydons Artikel Reinventing The Hyperlink legt dar, wie aufwändig dies für Links wäre. Für select/option schätze ich den Aufwand auf das Doppelte.

    Also lass den Unfug. Style die select- und option-Elemente wie gewünscht. Aber es ist unsinnig, die Funktion von HTML-Elementen mit div nachzubauen.

    Das kann man nicht oft genug sagen.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)