Leider wieder Problem mit Dropdown-Liste

[Enrico]

Hallo,

mein ursprünglicher Beitrag ist mittlerweile ins Archiv gewandert, weil ich mich zwischenzeitlich anderen Themen zugewendet hatte, deshalb mein neuer Beitrag, was sich nun allerdings mit einem anderen Problem befasst.

Mittels css habe ich folgende Dropdwon-Liste:

Wie man sehen kann, überlagern sich der erste und zweite Unterpunkt.

Der zugehörige html-Code:

  
<div class="Dropdown">  
   <div class="Hintergrund">AktuelleAuswahl</div>  
   <div class="Pfeil"></div>  
   <div class="Liste">  
      <div class="Abschluss"></div>  
      <div class="Auswahl">Unterpunkt 1</div>  
      <div class="Auswahl">Unterpunkt 2</div>  
      <div class="Auswahl">Unterpunkt 3</div>  
   </div>  
</div>  

Die zugehörigen css-Definitionen:

  
.Dropdown  
{  
   cursor: pointer;  
   float:  left;  
   height: 16px;  
}  
  
.Hintergrund  
{  
   background:  url(../GRAFIKEN/FormularDropdownHintergrund.png);  
   display:     block;  
   float:       left;  
   height:      16px;  
   line-height: 16px;  
   padding:     0px 4px;  
}  
  
.Pfeil  
{  
   background: url(../GRAFIKEN/FormularDropdownPfeil.png);  
   display:    block;  
   float:      right;  
   height:     16px;  
   width:      18px;  
}  
  
.Dropdown:hover .Pfeil  
{  
   behavior:            url("../CSS/Hover.htc");  
   background-position: 0px -16px;  
}  
  
.Liste  
{  
   background: url(../GRAFIKEN/FormularDropdownListe.png) repeat;  
   display:    none;  
   position:   relative;  
   top:        16px;  
   width:      100%;  
}  
  
.Dropdown:hover .Liste  
{  
   display: block;  
}  
  
.Abschluss  
{  
   background: url(../GRAFIKEN/FormularDropdownAbschluss.png) repeat-x;  
   height:     2px;  
}  
  
.Auswahl  
{  
   display:     block;  
   height:      16px;  
   line-height: 16px;  
}  
  
.Auswahl:hover  
{  
   background: url(../GRAFIKEN/FormularDropdownAuswahl.png) repeat-x;  
}  

Woran liegt es, dass ich diese unschöne Überlagerung habe?

Danke für eure Unterstützung.

Gruß,
Enrico

[Matthias Apsel]

Om nah hoo pez nyeetz, Enrico!

Du solltest keine Div-Suppe kochen. Ein online-Beispiel wäre nett.

Matthias

[Enrico]

Hallo Matthias,

Du solltest keine Div-Suppe kochen

Ich habe jetzt den Code entschlackt und bis auf den nicht angezeigten Abschluss der Dropdown-Liste am linken Rand funktioniert es.

  
<div class="Dropdown">  
   <div class="DropdownLinks"></div>  
   <ul>  
      <li class="Auswahl">Größe ?</li>  
      <li class="Liste">  
         <ol>  
            <li>AA</li>  
            <li>BBBBBBBB</li>  
            <li>CCCCC</li>  
         </ol>  
      </li>  
   </ul>  
</div>  

~~~~~~css
  
div.Dropdown  
{  
   background: url(../GRAFIKEN/FormularDropdown.png) top right;  
   cursor:     pointer;  
   display:    block;  
   height:     22px;  
   width:      200px;  
}  
  
div.Dropdown:hover  
{  
   background: url(../GRAFIKEN/FormularDropdown.png) bottom right;  
}  
  
div.Dropdown:hover ul li.Liste  
{  
   display: block;  
}  
  
div.DropdownLinks  
{  
   background: url(../GRAFIKEN/FormularDropdownLinks.png);  
   display:    block;  
   height:     22px;  
   left:       0px;  
   position:   absolute;  
   top:        0px;  
   z-index:    99;  
}  
  
div.Dropdown ul li  
{  
   list-style: none;  
}  
  
div.Dropdown ul li.Auswahl  
{  
   height:      22px;  
   line-height: 22px;  
   margin:      0px 24px 0px 6px;  
}  
  
div.Dropdown ul li.Liste  
{  
   background: url(../GRAFIKEN/FormularDropdownListe.png) repeat;  
   display:    none;  
   width:      100%;  
}  
  
div.Dropdown ul li.Liste ol li  
{  
   list-style: none;  
}  
  
div.Dropdown ul li.Liste ol li:hover  
{  
   background: url(../GRAFIKEN/FormularDropdownOption.png) repeat;  
}  

Du wolltest aber wohl darauf hinaus, alles mit HTML5-Elementen nachzubilden, nehme ich an?

Gruß,
Enrico

[Matthias Apsel]

Om nah hoo pez nyeetz, Enrico!

Ich habe jetzt den Code entschlackt und bis auf den nicht angezeigten Abschluss der Dropdown-Liste am linken Rand funktioniert es.
[code lang=html]
<div class="Dropdown">
   <div class="DropdownLinks"></div>
   <ul>
      <li class="Auswahl">Größe ?</li>
      <li class="Liste">
         <ol>
            <li>AA</li>
            <li>BBBBBBBB</li>
            <li>CCCCC</li>
         </ol>
      </li>
   </ul>
</div>

Besser.

Du wolltest aber wohl darauf hinaus, alles mit HTML5-Elementen nachzubilden, nehme ich an?

Nicht unbedingt. Aber wenn das der endgültige Code ist besteht noch weiteres Potential.
Dropdown enthält nur ein Element, dropdownlinks ebenso. Die könnten also weg. Alle CSS-Eigenschaften kann auch die Liste selbst bekommen.

Vor allem wollte ich aber daruaf hinaus, dass deine Chancen auf Hilfe wesentlich größer sind, wenn potentielle Helfer sich nicht erst den Quelltext zusammenkopieren müssen.

Matthias

[Enrico]

Hallo Matthias,

Dropdown enthält nur ein Element, dropdownlinks ebenso. Die könnten also weg.

Hm, ok, verstehe...

D.h. die Hintergrundgrafik, die die Stati (?) der Liste darstellt (geschlossene/offene Liste) in den ul-Tag rein, das umgebende div-Element weg und die Grafik für den linken Abschluss über css definieren und dem ersten li-Element zuweisen?

Dann schaue ich, wie ich den doppelten Rahmen nur für die links Seite definieren kann (2 Farben mit 1px Versatz nach unten)...

Gruß,
Enrico

[Enrico]

Hallo Matthias,

so, nun muss ich nur noch mit "border-style:ridge;" rumexperimentieren, dann sollte das Potential voll ausgeschöpft sein :-)

  
<ul class="Dropdown">  
   <li class="Auswahl">Größe ?</li>  
   <li class="Liste">  
      <ol>  
         <li>AA</li>  
         <li>BBBBBBBB</li>  
         <li>CCCCC</li>  
      </ol>  
   </li>  
</ul>  

Danke für Deine Hinweise :-)

Ich muss sagen, dass ich es wunderbar finde, wie einem hier geholfen wird, natürlich vorausgesetzt, man formuliert sein Anliegen dementsprechend :-)

Gruß,
Enrico

[Matthias Apsel]

Om nah hoo pez nyeetz, Enrico!

Dann schaue ich, wie ich den doppelten Rahmen nur für die links Seite definieren kann (2 Farben mit 1px Versatz nach unten)...

Ich habe die Grafiken nicht <del>intensiv genug</del> angeschaut. Eine Kombination aus border und box-shadow könnte helfen. Möglicherweise auch border-image: linear-gradient (to bottom, red, black) o.ä.

Ein Online-Beispiel würde allen Beteiligten das Leben wirklich einfacher machen.

Matthias