Springen naar inhoud


- - - - -
Solved

Multi-Leven Oplijsten (1, 1.1, 1.1.1, Etc)



  • Log in a.u.b. om te beantwoorden
Er zijn 6 reacties in dit onderwerp

#1 guest_BESLO_*

guest_BESLO_*
  • Gasten
    Laatst bezocht

Geplaatst op 09 september 2013 - 13:30

In Word kan je een hiërarchische oplijsting maken waardoor je een lijst krijgt met bvb
1 hfst1
  1.1 paragraaf 1
  1.2 paragraaf 2
1.2.1 subitem 1
1.2.2 subitem 2
2 hfst 2

Standaard kan dit niet met html (de <ol>-tag laat slechts 1 niveau toe)

Heeft er iemand enig idee of en zo ja hoe je dit wel kan doen met html (of bvb javascript)?

#2 pascalbianca

pascalbianca

    Webmaster/Admin

  • Webmaster
  • 4382 berichten
    Laatst bezocht 27 sep 2018 16:55
  • LocatieSusteren, Nederland, Midden Limburg.
Inzender

Geplaatst op 09 september 2013 - 20:29

je bedoeld dus Lijsten binnen lijsten: nestelen?

Ik weet niet in welk opzichte je diet wilt gaan doen maar als ik een voorbeeld zou kunnen geven.:
Ik heb voor express onderstaand voorbeeld niet in de taqs geplaatst want dan voert hij mijn code uit.

<ul>  
<li>Niveau 1, nummer 1
<ol>   
<li>Niveau 2, nummer 1   
<li>Niveau 2, nummer 2
<ol>
<li>Niveau 2, nummer 3
<ol>   
<li>Niveau 3, nummer 1
</ol>
  <li>Niveau 2, nummer 3  
  </ol>  
<li>Niveau 1, nummer 2
</ul>

uitgevoerd is het dit.:
Bijlage  listing.png   9,47K   1 downloads

#3 guest_BESLO_*

guest_BESLO_*
  • Gasten
    Laatst bezocht

Geplaatst op 11 september 2013 - 16:38

Bericht bekijkenpascalbianca, op 09 september 2013 - 20:29, zei:

je bedoeld dus Lijsten binnen lijsten: nestelen?

Neen niet nestelen, zoals je inderdaad kan.
Wat ik wil is een "outline"
1 Hoofdstuk 1

1.1 Paragraaf 1

1.2 Paragraaf 2

1.2.1 Alinea 1

1.2.2 Alinea 2

1.3 Paragraaf 3

2 Hoofdstuk2

2.1 Paragraaf 2


Helemaal zoals de hoofdstuknummering in o.a. MS-Word (de "koppen" van de opmaak in het lint)
Wanneer ik lijst maak binnen een <li> tag (met <ol>) dan wil ik dat deze verder gaat met het nummer van de tag waar ie in zit en er een niveau aan plakt (1 => 1.1, 1.2, ...).

#4 pascalbianca

pascalbianca

    Webmaster/Admin

  • Webmaster
  • 4382 berichten
    Laatst bezocht 27 sep 2018 16:55
  • LocatieSusteren, Nederland, Midden Limburg.
Inzender

Geplaatst op 11 september 2013 - 18:22

Heb je hier iets aan?
http://webdesign.abo...ss-and-html.htm

#5 guest_BESLO_*

guest_BESLO_*
  • Gasten
    Laatst bezocht

Geplaatst op 13 september 2013 - 08:06

Bericht bekijkenpascalbianca, op 11 september 2013 - 18:22, zei:


Spijtig genoeg niet. Had al iets dergelijks gevonden.
Maar de out-line nummers (achteraan elk list-item in dit voorbeeld) worden manueel ingegeven terwijl de nummers vooraan wel automatisch zijn maar niet weergeven wat ik wil.

Wal eens denken over het gebruik van javascript of php (hoewel ik voor dit laatste dan ook nog moet uitzoeken hoe onze CMS duidelijk gemaakt kan worden dat die code eerst geparsed moet worden).

#6 guest_BESLO_*

guest_BESLO_*
  • Gasten
    Laatst bezocht

Geplaatst op 14 september 2013 - 15:47

GEVONDEN!!!

Op deze link https://developer.mo...ug=CSS/Counters Kan je de oplossing vinden voor wat ik wou.

CSS toepassen en gebruikmaken van CSS-counters. Werkt perfect!

Code:
<style>
.Outline {
	 counter-reset: section;			 /* Creates a new instance of the
											 section counter with each ol
											 element */
	 list-style-type: none;
}
.Outline li:before {
	 counter-increment: section;		 /* Increments only this instance
											 of the section counter */
	 content: counters(section, ".") " "; /* Adds the value of all instances
											 of the section counter separated
											 by a ".". */
}
</style> <ol class="Outline">
	 <li>item</li>		 <!-- 1	 -->
	 <li>item			 <!-- 2	 -->
	 <ol class="Outline">
		 <li>item</li>	 <!-- 2.1 -->
		 <li>item</li>	 <!-- 2.2 -->
		 <li>item		 <!-- 2.3 -->
		 <ol class="Outline">
			 <li>item</li> <!-- 2.3.1 -->
			 <li>item</li> <!-- 2.3.2 -->
		 </ol>
		 <ol class="Outline">
			 <li>item</li> <!-- 2.3.1 -->
			 <li>item</li> <!-- 2.3.2 -->
			 <li>item</li> <!-- 2.3.3 -->
		 </ol>
		 </li>
		 <li>item</li>	 <!-- 2.4 -->
	 </ol>
	 </li>
	 <li>item</li>		 <!-- 3	 -->
	 <li>item</li>		 <!-- 4	 -->
</ol>
<ol start="1">
	 <li>item</li>		 <!-- 1	 -->
	 <li>item</li>		 <!-- 2	 -->
</ol>
En een gewone list
<ol start="1">
<li>Lijn 1</li>
<li>Lijn 2
<ol>
<li>Lijn 2.1</li>
</ol>
</li>
<li>Lijn 3</li>
</ol>



#7 pascalbianca

pascalbianca

    Webmaster/Admin

  • Webmaster
  • 4382 berichten
    Laatst bezocht 27 sep 2018 16:55
  • LocatieSusteren, Nederland, Midden Limburg.
Inzender

Geplaatst op 15 september 2013 - 00:37

Fijn te horen en thx voor de link, hebben anderen er ook eventueel iets aan.





Ook met taq Solved voorzien

0 gebruiker(s) lezen dit onderwerp

0 lid(leden), 0 bezoeker(s), 0 anonieme gebruikers

Inloggen


[Solved] Untitled 1

Met dank aan Jürgen voor de jarenlange inzet van visualbasic.be (anno dec 2000)
Met dank aan Mike en Ronneke voor de jarenlange inzet van vbib.be (anno dec 2010)
Met dank aan PascalBianca voor de jarenlange inzet van vbib.be (anno dec 2016)