[CSS] Itemlist naar rechts uitlijnen met CSS

[TangLeFuzZ]

Met CSS kun je erg mooi een itemlist opmaak aanpassen.

Op deze manier kun je bijvoorbeeld een menu, of een lijst van items op meerdere pagina's, erg makkelijk een mooi uiterlijk geven dat makkelijk te wijzigen is.

Een mooi voorbeeld is op de volgende pagina te vinden:
http://www.maxdesign.com.au/presentation/folder-metaphor/

Ik ben zelf ook bezig om een lijst met items een opmaak te geven met css, maar ik wil eigenlijk net een stapje verder.

Ik wil een itemlist, met subitems, weergeven zoals dat in een tabel gebeurd.

Een voorbeeld van de itemlist zou dit kunnen zijn:

code:

<ul class="itemList">
<li>
    <a href="#">titel hier</a>
    <ul class="itemListSub">
        <li>username hier</li>
        <li>postaantal hier</li>
        <li>datum hier</li>
    </ul>   
</li>
<li>
    <a href="#">titel hier</a>
    <ul class="itemListSub">
        <li>username hier</li>
        <li>postaantal hier</li>
        <li>datum hier</li>
    </ul>   
</li>
</ul>

Een voorbeeld van de itemlist en het gewenste resultaat is hier te vinden:

http://vype.nl/rickw/itemlist.htm

Mijn vraag is dus eigenlijk, of het mogelijk is om een sub itemlist binnen een itemlist, rechts naast het item uit de hoofd itemlist weer te geven, net als in een echte tabel.

[Savantas]

Als ik het goed begrijp wil je data via css weergeven. Maar waarom zou je dit niet gewoon in een tabel willen laten? Voor tabulaire data is een tabel (hence the name) prima, zeker ook volgens de standaarden!
Je kan wel via css weergeven, maar het probleem is dat je de breedte niet kan dwingen, omdat de verschillende subitems geen directe relatie tot elkaar hebben... En Jan is een stuk korter dan Hendrik-Gerard (om even een voorbeeld van verschillende lengtes van usernames te geven)

Op zich kan je wel ergens komen met:

code:

li {
    display: inline; padding: 0 5px; border: 1px solid black; }
ul ul {
    display: inline;
}

...Of op de manier als X-Lars hieronder aangeeft

[ Voor 19% gewijzigd door Savantas op 20-01-2006 15:57 ]

[X-Lars]

Je kunt het wel oplossen door de <ul> en <li> tags een float:left; mee te geven en de <ul> daarnaast een clear:left;. Dat is vast een begin, verder moet je er maar wat mee spelen om jouw resultaat te krijgen.

Maar hier vind ik een table semantisch gezien natuurlijk wel beter op zijn plaats.

[TangLeFuzZ]

Wat dat betreft hebben jullie gelijk, maar een itemlist charmeert me op een of andere manier meer dan een tabel, klinkt raar, maar ja...

Ik zal eens wat met float proberen, maar als het niet lukt met de wijdte zoals Savantas zegt, dan zal het wel niet exact lukken zoals ik van plan was..

[X-Lars]

Als je je <li> een float:left; meegeeft kan je er ook een width: aan hangen.

[Savantas]

Gaat alleen fout als de tekst langer is dan je width (tekst word afgeknipt)

[TangLeFuzZ]

Ok, bedankt voor de tips in ieder geval

Ik bedacht me trouwens net dat wanneer iemand css uit heeft staan (je weet maar nooit?), hij bij een tabel de content wel gewoon ziet zoals hij bedoelt is, maar als ik gebruik maak van een itemlist, zal dat niet het geval zijn... dus in de praktijk zou iid een tabel beter zijn.

[X-Lars]

Dat is dan ook semantiek: iedereen weet (ook/juist zonder CSS) wat voor informatie jij aanbiedt. De bezoeker, de zoekmachine, etc. Het is dan ook vrijwel altijd gewoon het beste om gewoon te zorgen dat je HTML correct is en deze vervolgens te stylen met CSS. Soms heb je dan een span of div nodig om precies te bereiken wat je wilt, maar daar houdt het dan wel mee op.