Problem mit nachgebautem <select>-Tag

[Enrico]

Hallo,

da ich bei meiner Seite komplett auf JavaScript verzichten werde und gleichzeitig aber in allen Browsern einheitlich angezeigte Auswahllisten ("<select>") haben will, habe ich dies über eigene Grafiken realisiert. Die JavaScript-seitige Abfrage des "onchange"-Ereignisses bei Änderung der Auswahl bzw. Treffen einer Auswahl habe ich durch konventionelle Links ersetzt (hier der Übersichtlichkeit halber noch ohne Ziele):

  
   <ul>  
  
      <li>  
      <a class="DropDown" href="#"><span class="DropDownLinks"></span>Größe?<span class="DropDownRechts"></span></a>  
      <ul>  
         <li><a href="#">S</a></li>  
         <li><a href="#">M</a></li>  
         <li><a href="#">L</a></li>  
         <li><a href="#">XL</a></li>  
      </ul>  
      </li>  
  
      <li>  
      <a class="DropDown" href="#"><span class="DropDownLinks"></span>Farbe?<span class="DropDownRechts"></span></a>  
      <ul>  
         <li><a href="#">Rot</a></li>  
         <li><a href="#">Blau</a></li>  
         <li><a href="#">Grün</a></li>  
         <li><a href="#">Weiß</a></li>  
      </ul>  
      </li>  
  
   </ul>  

Leider missfällt mir aber noch die Ausgabe im Browser.

Ich habe für die Grafik beide Listen dupliziert, damit meine nachfolgende Frage verständlicher wird:

Woran liegt es, dass ich bei der aufgeklappten Liste einen großen linksseitigen Abstand habe und sich die Liste zudem über die Breite des "Select"-Elements hinaus ausdehnt?

Hier die css-Definitionen:

  
   ul  
   {  
      float:           left;  
      list-style-type: none;  
      z-index:         5;  
   }  
  
   ul li  
   {  
      float:        left;  
      margin-right: 12px;  
   }  
  
   ul a span.DropDownLinks  
   {  
      background: url(../GRAFIKEN/DropDownLinks.png);  
      float:      left;  
      height:     22px;  
      width:      7px;  
   }  
  
   ul a.DropDown  
   {  
      background:      url(../GRAFIKEN/DropDownMitte.png) repeat-x;  
      display:         block;  
      height:          22px;  
      line-height:     22px;  
      text-decoration: none;  
   }  
  
   ul a.DropDown:hover  
   {  
  
   }  
  
   a span.DropDownRechts  
   {  
      background: url(../GRAFIKEN/DropDownRechts.png);  
      float:      right;  
      height:     22px;  
      width:      22px;  
   }  
  
   ul ul  
   {  
      background:      #fff;                /* Hack für IE7+                            */  
      background:      rgba(255,255,255,0); /* Vorherige Definition "unsichtbar" machen */  
      display:         none;  
      list-style-type: none;  
   }  
  
   ul li ul  
   {  
      background: url(../GRAFIKEN/DropDownHintergrundListe.png) repeat;  
   }  
  
   ul ul li  
   {  
      float: none;  
   }  
  
   ul ul a  
   {  
      text-decoration: none;  
      white-space:     nowrap;  
   }  
  
   ul li:hover ul  
   {  
      display: block;  
   }  

Vielen Dank für eure Mithilfe.

Gruß,
Enrico

[ChrisB]

Hi,

Woran liegt es, dass ich bei der aufgeklappten Liste einen großen linksseitigen Abstand habe und sich die Liste zudem über die Breite des "Select"-Elements hinaus ausdehnt?

Vermutlich an den Default-Margins/-Paddings von UL/LI, die du größtenteils nicht überschrieben hast.

MfG ChrisB

[Enrico]

Hallo ChrisB,

Vermutlich an den Default-Margins/-Paddings von UL/LI, die du größtenteils nicht überschrieben hast

Ich bin aber auch wirklich ein Schaf... ^^

Ok, das hätten wir schon mal.

Danke Dir :-)

Gruß,
Enrico

[Enrico]

Hallo ChrisB,

wie müsste ich den Selector noch aufbauen, wenn ich bei hover über den Link <a class="DropDown" href="#"> die span-Bereiche "DropDownLinks" und "DropDownRechts" mit einer anderen Hintergrundgrafik versehen möchte?

Ist dies nur rein mit css überhaupt möglich?

Gruß,
Enrico

[bubble]

Hallo ChrisB,

wie müsste ich den Selector noch aufbauen, wenn ich bei hover über den Link <a class="DropDown" href="#"> die span-Bereiche "DropDownLinks" und "DropDownRechts" mit einer anderen Hintergrundgrafik versehen möchte?

Ist dies nur rein mit css überhaupt möglich?

Darauf bauen an sich alle CSS-Hover-Menüs auf.

a.DropDownLinks:hover span.DropDownLinks, a.DropDownLinks:hover span.DropDownRechts {  
     background-image: url(pic.png);  
}

Voraussetzung dafür ist aber, dass die Span-Elemente Nachfahren vom "gehoverten" a-Element sind. Ansonsten wird das schwer mit reinem CSS

MfG
bubble

[Matthias Apsel]

Om nah hoo pez nyeetz, Enrico!

wie müsste ich den Selector noch aufbauen, wenn ich bei hover über den Link <a class="DropDown" href="#"> die span-Bereiche "DropDownLinks" und "DropDownRechts" mit einer anderen Hintergrundgrafik versehen möchte?

Ist dies nur rein mit css überhaupt möglich?

Vor allem nicht notwendig.

• moderne Browser können multiple Hintergründe darstellen.
• falls du das nicht möchtest, hast du zwei Elemente, die du formatieren kannst: li und a.

Nebenbei:

• Die Klasse ist sicher nicht notwendig. Wenn es keine untergeordnete Liste gibt, wird auch nichts angezeigt.
• Klassenbezeichner, die nach dem gegenwärtig gewünschten Aussehen gewählt werden, sind nicht so gut (besser class="warnung" als class="rot")

Matthias