Verschachtelte Liste vertikal gestalten

[UrsB]

Hallo ihr alle,
ich bin gerade (mal wieder) am verzweifeln.
Ich habe eine Liste mit folgendem HTML

<ul>  
  <li class="archive-year"> <a href="#">2010</a>  
    <ul>  
      <li class="archive-month"><a href="#">April </a></li>  
      <li class="archive-month"><a href="#">März </a></li>  
    </ul>  
  </li>  
  <li class="archive-year"> <a href="#">2009</a>  
    <ul>  
      <li class="archive-month"><a href="#">Juli </a></li>  
      <li class="archive-month"><a href="#">April </a></li>  
      <li class="archive-month"><a href="#">März </a></li>  
      <li class="archive-month"><a href="#">Februar </a></li>  
      <li class="archive-month"><a href="#">Januar </a></li>  
    </ul>  
  </li>  
</ul>

Ich möchte das es in etwa so aussieht:
2010  April März
2009  Juli April März Februar Januar

Hab schon viel versucht und auch die SuFu genutzt aber leider nichts gefunden. Danke schon mal für eure Hilfe.

[zaphod1984]

du musst dein css so anlegen dass die inneren listen floaten (mit display:inline oder float:left auf die li's) und die äußeren listen ihr standardverhalten haben.

dann noch margin, padding und list-style auf none setzen.

damit solltest du prinzipiell erreichen was du willst.

[UrsB]

du musst dein css so anlegen dass die inneren listen floaten (mit display:inline oder float:left auf die li's) und die äußeren listen ihr standardverhalten haben.

Ich habe das so verstanden:

* {  
	margin:0;  
	padding:0;  
}  
li li{  
	list-style: none;  
	display:inline;  
}

allerdings komme ich damit zu diesem Ergebnis:

2010
April März
2009
Juli April März Februar Januar

die margin/padding/list Optionen sind weniger mein Problem. es hackt nur am display bzw float

Danke für deine erste hilfe.

[sbk]

nicht li li
sondern #archive-year li

[UrsB]

nicht li li
sondern #archive-year li

mit .archive-year li ändert sich leider bzw. logischerweise an der Gestaltung nichts.

[Længlich]

Ciao!

nicht li li
sondern #archive-year li

mit .archive-year li ändert sich leider bzw. logischerweise an der Gestaltung nichts.

Das liegt daran, daß die innere ul noch ein Blockelement ist und dadurch den Umbruch verursacht. Die braucht auch noch display:inline.

Viele Grüße vom Længlich

[UrsB]

Ciao!

nicht li li
sondern #archive-year li

mit .archive-year li ändert sich leider bzw. logischerweise an der Gestaltung nichts.

Das liegt daran, daß die innere ul noch ein Blockelement ist und dadurch den Umbruch verursacht. Die braucht auch noch display:inline.

So jetzt klappts.

* {  
        margin:0;  
        padding:0;  
}  
.archive-year li{  
        list-style: none;  
        display:inline;  
}  
.archive-year ul{  
	display:inline;  
}

Vielen Dank für eure Hilfe.

[zaphod1984]

So jetzt klappts.

• {

margin:0;
        padding:0;
}
.archive-year li{
        list-style: none;
        display:inline;
}
.archive-year ul{
display:inline;
}

  
hmm, list-style ist eine eigenschaft von ul, nicht von li, ansonsten könntest du das margin:0 padding:0 noch auf .archive-year ul legen, sonst manipulierst du alle elemente auf der seite, ist evtl nicht gewünscht....  

-- 
for your security, this text has been encrypted by ROT13 twice.

[EKKi]

Mahlzeit UrsB,

Ich möchte das es in etwa so aussieht:
2010  April März
2009  Juli April März Februar Januar

Du möchtest also die <li> der "http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=inneren" Listen (bzw. diejenigen, die die Klasse "archive-month" besitzen) "http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=inline-block" (bzw. bei unfähigen Browsern "inline") darstellen?

MfG,
EKKi