html liste mit stars / sternchen

[schildi]

hallo,

ich habe eine liste erstellt die so etwas abbilden soll:

*  meine erste fussnote, auch über mehrere zeilen möglich
** meine zweite fussnote, auch über mehrere zeilen möglich
[u.s.w.]

soweit geht das auch, bloß müsste ich bei dieser lösung immer noch für jeden listenlänge eine extra css-definition ablegen. immerhin benötige ich mit dieser lösung nur 1 bild (sieht so aus: * )

die momentane formatierung passt nur auf genau 2 einträge, mit dem ersten listenpunkt * und dem zweiten listenpunkt **.

vielleicht hat jemand eine idee, wie man das ganze auch so umsetzen kann, dass sich die liste automatisch anpasst, je nach dem wie viele sternchen, bzw. listenpunkte man maximal verwendet?

CSS-CODE:

  
#content .footNoteList  
{  
 color: #666666;  
 font-size: 70%;  
}  
  
#content .footNoteList ul  
{  
 padding:0 0 0 3px;  
}  
  
#content .footNoteList ul li  
{  
 background-image: url(../img/list_star_666666.gif);  
 background-repeat: repeat-x;  
 background-position: 0px 0px;  
 padding-left: 15px;  
 margin: 3px 0 3px 0;  
}  
  
#content .footNoteList ul li div.first  
{  
 background-color:#FFFFFF;  
 margin-left:-10px;  
 border-left:7px solid #FFFFFF;  
}  
  
#content .footNoteList ul li div.second  
{  
 background-color:#FFFFFF;  
 margin-left:-5px;  
 border-left:2px solid #FFFFFF;  
}  

HTML-CODE:

  
<div class="footNoteList">  
 <ul>  
  <li>  
   <div class="first">meine erste star-fussnote mit einem sternchen</div>  
  </li><li>  
   <div class="second">meine zweite star-fussnote mit zwei sternchen</div>  
  </li>  
 </ul>  
</div>  

[LX]

Eine vollautomatische Anpassung per CSS ist leider nicht möglich. Du kannst aber dem div.footNoteList eine weitere Klasse mitgeben, welche die Anzahl der Fußnoten enthält und Dich bei der Formatierung der Fußnoten daran orientieren.

Nebenbei mißfällt mir bei Deinem ansonsten angenehm semantischen Code die unnötige Verwendung von div innerhalb von li.

Gruß, LX

[schildi]

Eine vollautomatische Anpassung per CSS ist leider nicht möglich. Du kannst aber dem div.footNoteList eine weitere Klasse mitgeben, welche die Anzahl der Fußnoten enthält und Dich bei der Formatierung der Fußnoten daran orientieren.

ja. dachte ich mir schon. da müsste dann javascript herhalten.
was ich aber außen vorlassen will.

Nebenbei mißfällt mir bei Deinem ansonsten angenehm semantischen Code die unnötige Verwendung von div innerhalb von li.

ich brauch das div doch, um den hg auf weiss zu setzen um die horizontale verfielfältigung der sternchen an geeigneter stelle zu überdecken.

sonst bräuchte ich für jede anzahl ein extra-bild.

aber - danke!

[LX]

Was für ein Unsinn. Du kannst genausogut margin-left und background-position verwenden, um nur einen Teil des Hintergrundbilds mit den Sternen anzuzeigen und trotzdem den optischen Einzug beizubehalten.

Gruß, LX

[Gunnar Bittersmann]

@@schildi:

ich habe eine liste erstellt die so etwas abbilden soll:

*  meine erste fussnote, auch über mehrere zeilen möglich
** meine zweite fussnote, auch über mehrere zeilen möglich
[u.s.w.]

Du bist deiner Zeit weit voraus. [CSS3-LISTS §4.5]

Es stellt sich aber die Frage, ob die Sternchen wirklich durch CSS generiert werden sollten oder ob sie nicht doch zum Inhalt gehören, also in den HTML-Quelltext.

Ihre Gegenstücke (die Sternchen im Text, die auf die Fußnoten verweisen) stehen ja auch im HTML-Quelltext.

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

Oops, falscher Link. Jetzt aber: [CSS3-LISTS §4.5]

Live long and prosper,
Gunnar