[CSS]List-items verbinden mbv een lijn.

[van.der.schulting]

In plaats van de 'list-style-type' wil ik alle items met elkaar verbinden via een lijn, zodat een soort boomstructuur ontstaat. Is dit mogelijk mbv CSS? Zo ja, hoe kan ik dit creeeren mbv CSS?

[TweakBoy]

is behoorlijk simple

li:before {
content:url(jeplaatje-boomnode.jpg);
}

ul:before {
content: url(jeplaatje-boomvertakking.jpg);
}

[van.der.schulting]

TweakBoy schreef op zaterdag 02 mei 2009 @ 02:27:
is behoorlijk simple

li:before {
content:url(jeplaatje-boomnode.jpg);
}

ul:before {
content: url(jeplaatje-boomvertakking.jpg);
}

Dit gaat volgens mij niet goed als er meerdere sub-items onder 1 item hangen, maar ik ga wel ff proberen.

[teh_twisted]

idd zoals TweakBoy zegt, url: http://odyniec.net/articles/turning-lists-into-trees/
gevonden via !google css li tree (first hit)

[_Thanatos_]

@TweakBoy: alleen die truuk werkt niet met IE6 en IE7, vziw
@teh_twisted: goed artikel, maar 2 problemen: het werkt alleen met een effen en bovenal door de tree bekende achtergrondkleur, en je hebt extra classes nodig en dus extra serverside-rommel of javascript.

Ik zou het zelf ook met javascript doen hoor, daar niet van. Maar dan als javascript uit staat, gewoon een standaard <ul> laten renderen.

[ Voor 78% gewijzigd door _Thanatos_ op 03-05-2009 17:25 ]

[Fuzzillogic]

Alles is prima met CSS(3)-only op te lossen. En voor die paar incapabele browsers die dat niet snappen kun je terugvallen op javascript. En dat kun je dan heel eenvoudig met jQuery doen, want in de praktijk is het toch enkel maar IE die naar goed gebruik daar de mist op ingaan.

Alleen zou ik daar zeker geen jpeg voor gebruiken voor de afbeeldingen, en elke webdevver weet wel waarom.

[ Voor 4% gewijzigd door Fuzzillogic op 03-05-2009 17:33 ]

[armageddon_2k1]

Kan je me misschien vertellen waarom ik geen jpeg zou kunnen gebruiken?

[Sebazzz]

Fuzzillogic schreef op zondag 03 mei 2009 @ 17:31:
Alleen zou ik daar zeker geen jpeg voor gebruiken voor de afbeeldingen, en elke webdevver weet wel waarom.

Artifacts, slechter compressieniveau bij duidelijke lijnen en vlakken.

[_Thanatos_]

armageddon_2k1 schreef op zondag 03 mei 2009 @ 19:38:
Kan je me misschien vertellen waarom ik geen jpeg zou kunnen gebruiken?

Ga ook maar na waar die P voor staat