[CSS] Verschillende LI's

[Verwijderd]

Hoi,

Ik heb deze html code

<UL>
<LI> ROOT </LI>
<UL>
<LI>Sub Item</LI>
<LI>Sub Item</LI>
</UL>
</UL>

Ik heb het even buiten de CODE tags gezet omdat dat allemaal rare &gtl; dingen geeft

en gebruik deze css code:

code:

UL {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 45px;
}
LI {
    font-family: arial;
    font-size: 10pt;
    list-style-image: url(fileadmin/template/main/images/line.gif);
}

Nu krijg ik dus voor elke <LI> een image (line.gif).

Ik wil alleen dat hij de eerste laag pakt .. dus <UL><LI></LI></UL>

Dus dat alleen ROOT een image er voor heeft en dat ik voor de lagere lagen een aparte classe kan gebruiken.

Ik wil dit graag zonder dit bij <LI class=""> oid te hoeven definen.

Is dit uberhaupt mogelijk? Zo ja, hoe pak ik dit aan?

Tx

[ Voor 29% gewijzigd door Verwijderd op 31-10-2003 10:00 ]

[Woudloper]

Hmm, dit doet mij een beetje denken aan de Listamatic, wellicht dat je daar eens kan kijken voor meer informatie.

Verder is dit comment met voorbeeld van clay erg leerzaam.

/Edit:

De code moet overigens zo zijn:

HTML:

<ul>
 <li>Item 1
  <ul>
   <li>Subitem 1</li>
   <li>Subitem 2</li>
   <li>Subitem 3</li>
   </ul>
 </li>
 <li>Item 2</li>
 <li>Item 2</li>
</ul>

[ Voor 28% gewijzigd door Woudloper op 31-10-2003 10:05 ]

[coubertin119]

Volgens mij is dit nog niet mogelijk met de huidige CSS2 selectors, ik kan mis zitten maar ik betwijfel het.

Je kan wachten op CSS3, alhoewel ik daar nog niet over weet welke selectors daar bij gaan komen.

Met classes werken lijkt mij de enige oplossing.

[Verwijderd]

jammer, maar bedankt..

Woudloper schreef op 31 oktober 2003 @ 10:02:
Hmm, dit doet mij een beetje denken aan de Listamatic, wellicht dat je daar eens kan kijken voor meer informatie.

Verder is dit comment met voorbeeld van clay erg leerzaam.

/Edit:

De code moet overigens zo zijn:

HTML:

<ul>
 <li>Item 1
  <ul>
   <li>Subitem 1</li>
   <li>Subitem 2</li>
   <li>Subitem 3</li>
   </ul>
 </li>
 <li>Item 2</li>
 <li>Item 2</li>
</ul>

Lekkere bug he

[coubertin119]

Opeens een fantastisch idee .

Je geeft alle <li>'s standaard dat afbeeldinkje, maar je doet een stijlopgave voor ul > li > ul > li, dus, alle <li>'s die child zijn van een unordered list, die op zijn beurt weer een child moet zijn van een list-item in nog een unordered-list.

Snap je het nog?

Maar geen idee of het gaat werken, met meerdere >'s.


crisp:: Pff, IE6 interesseert me sowieso al niet .

[ Voor 29% gewijzigd door coubertin119 op 31-10-2003 10:30 ]

[crisp]

die ascendant selectors zijn leuk ja, jammer dat IE ze nog niet ondersteund

[Clay]

Niets vanaan trekken met vrij kale css toon je iets bruikbaars in IE, met mooie selectors maak je het beter in alle andere browsers. 1 laag kan je nog wel voor elkaar krijgen trouwens, de geneste li's kan je er zonder class anders uit laten zien met:

code:

li li {
   /* dan sla je iig de buitenste li's over */
}

IE loopt achter, en de komende 3 jaar ofzo wordt dat waarschijnlijk alleen nog maar storerender Ik zou dus gewoon lekker nu al beginnen met css toepassen die IE niet snapt, dan stimuleer je tenminste het gebruik van andere browsers. Nou kan je dat natuurlijk niet altijd maken (werk), maar vaak ook wel. doei doei IE

[Verwijderd]

Clay schreef op 31 oktober 2003 @ 10:36:
Niets vanaan trekken met vrij kale css toon je iets bruikbaars in IE, met mooie selectors maak je het beter in alle andere browsers. 1 laag kan je nog wel voor elkaar krijgen trouwens, de geneste li's kan je er zonder class anders uit laten zien met:

code:

li li {
   /* dan sla je iig de buitenste li's over */
}

IE loopt achter, en de komende 3 jaar ofzo wordt dat waarschijnlijk alleen nog maar storerender Ik zou dus gewoon lekker nu al beginnen met css toepassen die IE niet snapt, dan stimuleer je tenminste het gebruik van andere browsers. Nou kan je dat natuurlijk niet altijd maken (werk), maar vaak ook wel. doei doei IE

Idd.. zo heb ik het ook opgelost..

Bedankt

Voor de liefhebbers:

code:

UL {
    margin-top: 0px;
    margin-bottom: 2px;
    margin-left: 45px;
}
LI {
    font-family: arial;
    font-size: 10pt;
    margin-top: 4px;
    margin-bottom: 4px;
    list-style-image: url(fileadmin/template/main/images/line.gif);
}
LI LI {
    font-family: arial;
    font-size: 10pt;
    color: 666667;
    margin-left: -15px;
    margin-top: 4px;
    margin-bottom: 4px;
    list-style-image: none;
    list-style-type: square;
}

[disjfa]

ik zou nog een dingetje veranderen als ik jou was.... niet de tags en css namen in uppercase zetten. staat mooier en is stiekum een beetje verplicht in xhtml

[Verwijderd]

list-style-image is zo goed als onbruikbaar wegens de onmogelijkheid om de bullet-positie te beinvloeden. Ik gebruik altijd background-images hiervoor.

[Verwijderd]

Verwijderd schreef op 31 oktober 2003 @ 12:23:
list-style-image is zo goed als onbruikbaar wegens de onmogelijkheid om de bullet-positie te beinvloeden. Ik gebruik altijd background-images hiervoor.

Hoe bedoel je ... Bij mij werkt het zoals ik wil hoor ?