Enrico: Problem mit Listendarstellung und eingebetteten span-Bereichen

Beitrag lesen

SELF-Forum

Problem mit Listendarstellung und eingebetteten span-Bereichen

Enrico
– Informationen zu den Bewertungsregeln

Hallo,

ich habe folgenden html-Code, der eine Auswahlliste nachbauen soll:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
   <head>  
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
      <link type="text/css" href="___DropDown.css" rel="stylesheet" media="screen">  
   </head>  
   <body>  
      <ul>  
[1]      <li class="UIMitte"><span class="UILinks"></span>Aktuelle Auswahl<span class="UIRechts"></span></li>  
 +---    <li>  
 |          <ul class="ListeMitte">  
 |             <li><span class="ListeLinks"></span>Listenpunkt 1<span class="ListeRechts"></span></li>  
[2]            <li><span class="ListeLinks"></span>Listenpunkt 2<span class="ListeRechts"></span></li>  
 |             <li><span class="ListeLinks"></span>Listenpunkt 3<span class="ListeRechts"></span></li>  
 |          </ul>  
 +---    </li>  
[3]      <li class="ListeAbschlussMitte"><span class="ListeAbschlussLinks"></span><span class="ListeAbschlussRechts"></span></li>  
      </ul>  
   </body>  
</html>

Der zugehörige css-Code:

  
ul  
{  
   margin:  0px;  
   padding: 0px;  
}  
  
li  
{  
   list-style-type: none;  
}  
  
.UIMitte  
{  
   background:  url(DropDownUIMitte.png) repeat-x;  
   cursor:      pointer;  
   height:      34px;  
   line-height: 34px;  
   text-align:  center;  
}  
  
.UILinks  
{  
   background:   url(DropDownUILinks.png);  
   float:        left;  
   height:       34px;  
   margin-right: 14px;  
   width:        10px;  
}  
  
.UIRechts  
{  
   background:  url(DropDownUIRechts.png);  
   float:       right;  
   height:      34px;  
   margin-left: 30px;  
   width:       26px;  
}  
  
.ListeMitte  
{  
   background: url(DropDownListeMitte.png);  
}  
  
.ListeLinks  
{  
   background:   url(DropDownListeLinks.png) repeat-y;  
   float:        left;  
   margin-right: 14px;  
   width:        10px;  
}  
  
.ListeRechts  
{  
   background:  url(DropDownListeRechts.png) repeat-y;  
   float:       right;  
   margin-left: 30px;  
   width:       26px;  
}  
  
.ListeAbschlussMitte  
{  
   background: url(DropDownListeAbschlussMitte.png) repeat-x;  
   height:     13px;  
}  
  
.ListeAbschlussLinks  
{  
   background: url(DropDownListeAbschlussLinks.png);  
   float:      left;  
   height:     13px;  
   width:      10px;  
}  
  
.ListeAbschlussRechts  
{  
   background: url(DropDownListeAbschlussRechts.png);  
   float:      right;  
   height:     13px;  
   width:      26px;  
}

Die mit den Ziffern 1 und 3 gekennzeichneten Zeilen funktionieren einwandfrei und erzeugen folgende schematische Ausgabe im Browser:

UIMitte
    +-----------------------------------------------------+
    |+-------+                                  +--------+|
[1] ||UILinks|                                  |UIRechts||
    |+-------+                                  +--------+|
    +-----------------------------------------------------+

ListeAbschlussMitte
    +-----------------------------------------------------+
    |+-------------------+          +--------------------+|
[3] ||ListeAbschlussLinks|          |ListeAbschlussRechts||
    |+-------------------+          +--------------------+|
    +-----------------------------------------------------+

Bei der mit der Ziffer 2 gekennzeichneten Zeile hingegen habe ich nur die füllende Hintergrundgrafik der Klasse ListeMitte, aber nicht die beiden span-Bereiche, die sich ebenfalls wieder links bzw. rechts ausrichten sollen.

Ein Online-Beispiel kann ich leider nicht anbieten, ledig eine Grafik

Woran liegt es, dass die mit der Ziffer 2 gekennzeichneten Zeilen sich anders verhalten wie die mit 1 und 3 gekennzeichneten?

Alle css-Angaben sind analog aufgebaut bzw. sehe ich mittlerweile keine(n) möglichen Fehler mehr, die Klassennamen stimmen überein, ebenso sind die Grafiken vorhanden (wenn ich deren Namen als Quelle für die Hintergrundgrafik angebe, dann werden mir diese auch angezeigt).

Vielen Dank für eure Hilfe.

Gruß,
Enrico

Beitrag melden
–
Informationen zu den Bewertungsregeln