List in CSS
- Onderwerp starter DennisM
- Startdatum
- Status
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Dat kan in Opera, Safari, Google Chrome, Firefox en Internet Explorer 8 met behulp van alleen css en html. Is nogal ingewikkeld. Voor ik ga antwoorden wacht ik eerst wel even af waar je vraag beantwoordt gaat worden, want hij staat dubbel, en ik heb geen zin 't op de verkeerde plaats te beantwoorden.
Post het antwoord op deze topic. Alvast bedankt
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
ol {list-style-type: none; counter-reset: teller-een; margin: 0; padding: 0;}
ol li {counter-increment: teller-een;}
ol li span:before {content: counter(teller-een) " ";}
ol li span:after {content: " " counter(teller-een);}
ol ol {counter-reset: teller-twee;}
ol ol li {counter-increment: teller-twee;}
ol ol li span:after {content: " " counter(teller-twee);}
ol ol li span:before {content: counter(teller-een) "." counter(teller-twee) " "; padding-left: 10px;}
</style>
<!--[if (IE 6) | (IE 7)]>
<style type="text/css">
ol {list-style-type: decimal; padding-left: 25px;}
</style>
<![endif]-->
</head>
<body>
<ol>
<li><span>Hoofdstuk</span>
<ol>
<li><span>Sectie</span></li>
<li><span>Sectie</span></li>
</ol>
</li>
<li><span>Hoofdstuk</span>
<ol>
<li><span>Sectie</span></li>
<li><span>Sectie</span></li>
</ol>
</li>
</ol>
</body>
</html>Dit is 'n vrij exacte imitatie van wat jij vroeg. In Internet Explorer 6 en 7 werkt dit niet, want die kennen content, :after, :before en counter niet, dus die negeren dat gewoon. Omdat de teller is uitgeschakeld met list-style-type none, moet je dat voor die fossielen weer aanzetten. De padding-left is omdat anders de lijsten over de getallen komen te staan. Als dat beter uitkomt kun je ook 'n margin-left gebruiken, dat werkt ook.
Basis-idee: de eerste teller heet teller-een, de tweede teller-twee.
Je maakt die tellers aan met behulp van counter-reset. teller-twee hoort dus bij de geneste lijsten. Je kunt ook 'n begingetal opgeven, als je dat niet doet beginnen ze gewoon met 0.
Met counter-increment geef je aan waar de teller verhoogd moet worden (dat mag ook met meer dan 1 zijn, of negatief).
Met :before en :after kun je aangeven welke 'content' er neergezet moet worden.
Je geeft de tellers op die er moeten staan. Alles wat je tussen aanhalingstekens zet wordt er letterlijk voor, tussen of achter gezet. Zoals hier punten en spaties, maar als je 'sinterklaas' opgeeft, verschijnt 'sinterklaas' op je scherm.
Je kunt ook 1 of meer tellers laten weergeven als letters of Romeinse getallen.
Bij :before en :after kun je aan 't einde eigenschappen opgeven als color, margin, padding, enz. Dus anders dan bij de standaardteller van 'n <ol> kun je de tellers 'n eigen opmaak geven. Hier heb ik alleen padding-left opgegeven bij de tellers voor de sectie, maar je kunt 'n andere lettersoort, noem maar op opgeven.
Desgewenst kun je ook 97 tellers achter elkaar zetten, of 33, of...
Laatst bewerkt:
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Wat er allemaal niet kan! 
... en voor de oude IE's wellicht ook nog even wat linker-margin en linker-padding teruggeven, opdat daar de cijfertjes niet helemaal verdwijnen:
... en voor de oude IE's wellicht ook nog even wat linker-margin en linker-padding teruggeven, opdat daar de cijfertjes niet helemaal verdwijnen:
HTML:
<!--[if (IE 6) | (IE 7)]>
<style type="text/css">
ol {list-style-type: decimal; margin-left: 10px; padding-left: 20px;}
</style>
<![endif]-->Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Bedankt voor de aanvulling, dat was ik vergeten in het vuur van de strijd 
Nou IE 8 eindelijk ook css 2.1 redelijk ondersteunt, worden dit soort dingen eindelijk bruikbaar. Als IE nou ook nog 'ns css 3 en html5 zou gaan ondersteunen voor 't jaar 2017...
Nou IE 8 eindelijk ook css 2.1 redelijk ondersteunt, worden dit soort dingen eindelijk bruikbaar. Als IE nou ook nog 'ns css 3 en html5 zou gaan ondersteunen voor 't jaar 2017...
Bij me werkt het niet. Werk het bij je wel?
Ik heb het toegepast, maar het werk niet. Vervolgens heb ik de code letterlijk overgenomen en heb " none" vervangen met decimal. Maar het werk gewoon niet.
----------
Mijn code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hallo</title>
<style type="text/css">
OL {list-style-type: none; counter-reset: teller-een; margin: 0; padding: 0;}
OL LI {counter-increment: teller-een;}
OL LI span:before {content: counter(teller-een) " ";}
OL LI span:after {content: " " counter(teller-een);}
OL OL {counter-reset: teller-twee;}
OL OL LI {counter-increment: teller-twee;}
OL OL LI span:after {content: " " counter(teller-twee);}
OL OL LI span:before {content: counter(teller-een) "." counter(teller-twee) " "; padding-left: 10px;}
</style>
<!--[if (IE 6) | (IE 7)]>
<style type="text/css">
ol {list-style-type: decimal;}
</style>
<![endif]-->
</head>
<body>
<content tag="bodyContent">
<div style="text-align:center"> <h2> $!project.Naam </h2></div>
<OL>
#foreach($hoofdonderdeel in $project.Hoofdonderdelen)
<LI><span>$!hoofdonderdeel.Naam</span>
<OL>
#foreach($requirement in $hoofdonderdeel.Requirements)
<LI>$!requirement.Naam</span>
$!requirement.Beschrijving
</LI>
#end
</OL>
</LI>
#end
</OL>
</content>
</body>
</html>
Ik heb het toegepast, maar het werk niet. Vervolgens heb ik de code letterlijk overgenomen en heb " none" vervangen met decimal. Maar het werk gewoon niet.
----------
Mijn code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hallo</title>
<style type="text/css">
OL {list-style-type: none; counter-reset: teller-een; margin: 0; padding: 0;}
OL LI {counter-increment: teller-een;}
OL LI span:before {content: counter(teller-een) " ";}
OL LI span:after {content: " " counter(teller-een);}
OL OL {counter-reset: teller-twee;}
OL OL LI {counter-increment: teller-twee;}
OL OL LI span:after {content: " " counter(teller-twee);}
OL OL LI span:before {content: counter(teller-een) "." counter(teller-twee) " "; padding-left: 10px;}
</style>
<!--[if (IE 6) | (IE 7)]>
<style type="text/css">
ol {list-style-type: decimal;}
</style>
<![endif]-->
</head>
<body>
<content tag="bodyContent">
<div style="text-align:center"> <h2> $!project.Naam </h2></div>
<OL>
#foreach($hoofdonderdeel in $project.Hoofdonderdelen)
<LI><span>$!hoofdonderdeel.Naam</span>
<OL>
#foreach($requirement in $hoofdonderdeel.Requirements)
<LI>$!requirement.Naam</span>
$!requirement.Beschrijving
</LI>
#end
</OL>
</LI>
#end
</OL>
</content>
</body>
</html>
Laatst bewerkt:
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Eh, het lijkt mij toch niet helemaal dezelfde code 
Ik heb het alleen in html en css gemaakt, zoals je vroeg. Als je er andere talen bij gaat gebruiken, heb ik geen flauw idee hoe je dat zou moeten doen. Mogelijk weet iemand anders dat.
Ik zie wel gelijk 'n ander groot verschil: je gebruikt geen geldig doctype. Dat betekent dat Internet Explorer in quirks mode schiet, en ik denk niet dat het in Internet Explorer 8 dan goed werkt, hoewel ik dat niet heb uitgeprobeerd.
'n Geldig, volledig doctype is absolute noodzaak zodra je met dingen als marge en padding gaat werken, omdat IE 't anders (volledig) anders weergeeft als alle ander browsers. Dat zou 'n oorzaak kunnen zijn.
En ja, ik heb 't uitgeprobeerd. Als je de code van mij letterlijk kopieert, zonder wijzigingen, zou hij moeten werken in IE 8, Firefox 3 en 3.5, Opera, Safari 4 en Google Chrome.
Ik heb het alleen in html en css gemaakt, zoals je vroeg. Als je er andere talen bij gaat gebruiken, heb ik geen flauw idee hoe je dat zou moeten doen. Mogelijk weet iemand anders dat.
Ik zie wel gelijk 'n ander groot verschil: je gebruikt geen geldig doctype. Dat betekent dat Internet Explorer in quirks mode schiet, en ik denk niet dat het in Internet Explorer 8 dan goed werkt, hoewel ik dat niet heb uitgeprobeerd.
'n Geldig, volledig doctype is absolute noodzaak zodra je met dingen als marge en padding gaat werken, omdat IE 't anders (volledig) anders weergeeft als alle ander browsers. Dat zou 'n oorzaak kunnen zijn.
En ja, ik heb 't uitgeprobeerd. Als je de code van mij letterlijk kopieert, zonder wijzigingen, zou hij moeten werken in IE 8, Firefox 3 en 3.5, Opera, Safari 4 en Google Chrome.
Eh, het lijkt mij toch niet helemaal dezelfde code
Ik heb het alleen in html en css gemaakt, zoals je vroeg. Als je er andere talen bij gaat gebruiken, heb ik geen flauw idee hoe je dat zou moeten doen. Mogelijk weet iemand anders dat.
Ik zie wel gelijk 'n ander groot verschil: je gebruikt geen geldig doctype. Dat betekent dat Internet Explorer in quirks mode schiet, en ik denk niet dat het in Internet Explorer 8 dan goed werkt, hoewel ik dat niet heb uitgeprobeerd.
'n Geldig, volledig doctype is absolute noodzaak zodra je met dingen als marge en padding gaat werken, omdat IE 't anders (volledig) anders weergeeft als alle ander browsers. Dat zou 'n oorzaak kunnen zijn.
En ja, ik heb 't uitgeprobeerd. Als je de code van mij letterlijk kopieert, zonder wijzigingen, zou hij moeten werken in IE 8, Firefox 3 en 3.5, Opera, Safari 4 en Google Chrome.
Bedankt voor je reactie.
Bij mij thuis werk het wel, ook zonder doctype.
Je hebt mij geholpen en het is nu mijn taak op te achterhalen wat ik fout doe.
groetjes.
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
En als je de oplossing hebt gevonden, zou 't leuk zijn die hier ook te zien.
Ik heb nog wel even lopen denken en zo. Ik ben absoluut geen expert in scripttalen, Ik neem aan dat je ergens vandaan de inhoud van variabelen invoegt.
Die counter in de css moet ook op een of andere manier met variabelen werken. Mogelijk bijten die elkaar?
In ieder geval, als je nog vragen hebt over de precieze werking van de css/html dan hoor ik 't wel.
Ik heb nog wel even lopen denken en zo. Ik ben absoluut geen expert in scripttalen, Ik neem aan dat je ergens vandaan de inhoud van variabelen invoegt.
Die counter in de css moet ook op een of andere manier met variabelen werken. Mogelijk bijten die elkaar?
In ieder geval, als je nog vragen hebt over de precieze werking van de css/html dan hoor ik 't wel.
Het is opgelost en het probleem had niets met HTML of CSS te maken, maar met decorator.
De OL en LI hierboven zijn CSS classes en we kunnen ze ook Klaas en Jan noemen toch?
Zo ja,
1. dan hoeven wij ze niet af te sluiten met </ol> en </li>!
2. Kunnen we ze gebruiken zoals hieronder:
<tr class="ol">
<td class="li"> Hoofdstuk
<span> sectie</span>
</td>
</tr>
De OL en LI hierboven zijn CSS classes en we kunnen ze ook Klaas en Jan noemen toch?
Zo ja,
1. dan hoeven wij ze niet af te sluiten met </ol> en </li>!
2. Kunnen we ze gebruiken zoals hieronder:
<tr class="ol">
<td class="li"> Hoofdstuk
<span> sectie</span>
</td>
</tr>
Laatst bewerkt:
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
't Is mooi dat 't werkt, maar ik begrijp er niets van.
ol en li zijn geen classes, dat zijn gewoon html-elementen. De <li> hoef je in html niet te sluiten (iets wat ik trouwens geen goed idee vind, want browsers gaan dan soms de mist in bij het zelf plaatsen van de bijbehorende </li>). In xhtml moet ook de li worden afgesloten.
De ol moet altijd worden afgesloten.
Wat jij nu hebt gedaan, voorzover ik kan zien, is dat je gewoon 'n <tr> de class-naam 'ol' hebt gegeven. Maar dat heeft niets meer te maken met het element ol.
(Overigens is het gebruik van 'n tag als naam voor 'n class of id niet zo'n goed idee, want oudere browsers kunnen zich daar in verslikken. Ik weet niet hoe oud, en misschien speelt 't niet meer, maar zelf doe ik het voor de zekerheid nooit.)
Kortom: ik weet niet wat je hebt gedaan, maar als 't werkt, is 't mooi. Misschien nog 'ns de hele code hier neerzetten? En heb je 't wel in 'n aantal browsers getest?
ol en li zijn geen classes, dat zijn gewoon html-elementen. De <li> hoef je in html niet te sluiten (iets wat ik trouwens geen goed idee vind, want browsers gaan dan soms de mist in bij het zelf plaatsen van de bijbehorende </li>). In xhtml moet ook de li worden afgesloten.
De ol moet altijd worden afgesloten.
Wat jij nu hebt gedaan, voorzover ik kan zien, is dat je gewoon 'n <tr> de class-naam 'ol' hebt gegeven. Maar dat heeft niets meer te maken met het element ol.
(Overigens is het gebruik van 'n tag als naam voor 'n class of id niet zo'n goed idee, want oudere browsers kunnen zich daar in verslikken. Ik weet niet hoe oud, en misschien speelt 't niet meer, maar zelf doe ik het voor de zekerheid nooit.)
Kortom: ik weet niet wat je hebt gedaan, maar als 't werkt, is 't mooi. Misschien nog 'ns de hele code hier neerzetten? En heb je 't wel in 'n aantal browsers getest?
Ik heb het opgelost zoals in je voorbeeld staat hoor.
Ik vroeg alleen of het mogelijk is om <tr class="ol"> ... te gebruiken ..
Is het mogelijk om die nummers ook in de Data Base op te slaan? Volgens mij niet. toch?
Ik wil in de DB de naam en de nummers van hoofdstukken en secties opslaan.
Bijvoorbeeld:
tabel project
naamsectie ................ nummer
sectieNaamEen ............ 1.1
sectieNaamTwee ............... 2.3
sectieNaamDrie ............. 4..2
Laatst bewerkt:
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Ah, dan begreep ik je verkeerd.
Ja, dat is dus mogelijk, maar ik weet niet of het probleem nog bestaat dat sommige browsers daar problemen mee hebben (met class="ol" en zo dus).
Die nummers worden gemaakt door de client, in de browser van de client. Dus die kun je niet simpel opslaan. Mogelijk kun je ze wel uitlezen op een of andere manier en dan opslaan. Alleen: dan is het voordeel van 'n automatische nummering weg, lijkt mij.
Ja, dat is dus mogelijk, maar ik weet niet of het probleem nog bestaat dat sommige browsers daar problemen mee hebben (met class="ol" en zo dus).
Die nummers worden gemaakt door de client, in de browser van de client. Dus die kun je niet simpel opslaan. Mogelijk kun je ze wel uitlezen op een of andere manier en dan opslaan. Alleen: dan is het voordeel van 'n automatische nummering weg, lijkt mij.
het werkt nog niet helemaal
hi, bedankt voor je tip om naar deze topic te kijken.
Ik ben al een aardig end op weg doch het werkt nog niet helemaal zoals ik het graag zou zien.
Je geeft onderaan deze codering een hele duidelijk uitleg nl dat IE dit niet ondersteund en dat heb ik dus gemerkt. Ik zou de list-style-type moeten aanpassen doch met decimal te plaatsen ipv none veranderd er nog steeds niets.
En nu???
ik wacht het nog even af.
gr Rietje
hi, bedankt voor je tip om naar deze topic te kijken.
Ik ben al een aardig end op weg doch het werkt nog niet helemaal zoals ik het graag zou zien.
Je geeft onderaan deze codering een hele duidelijk uitleg nl dat IE dit niet ondersteund en dat heb ik dus gemerkt. Ik zou de list-style-type moeten aanpassen doch met decimal te plaatsen ipv none veranderd er nog steeds niets.
En nu???
ik wacht het nog even af.
gr Rietje
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Klopt. Of eigenlijk klopt het natuurlijk niet.
Er zat 'n foutje in de oorspronkelijke code hier, dat heb ik gelijk verbeterd nu. csshunter heeft 't opgemerkt en verbeterd.
Bij de css voor ie6/7 mist nog 'n padding-left. Dat wordt dus:
Ik moet 't nog even wat preciezer uitproberen, was 't alweer vergeten eerlijk gezegd.
csshunter heeft 'n padding-left van 20px, misschien is dat ook genoeg.
En volgens mij is 'n marge niet nodig, dat staat er bij csshunter wel bij.
Dus dat moet je nog even iets grondiger uitproberen dan ik nu heb gedaan.
Edit: ik heb 't even getest, en ik blijf me verbazen over deze browsers. padding-left en margin-left werken allebei. Pardon? Tja. Dus je kan kiezen wat 't beste uitkomt. Bij mij moet de breedte 23 px zijn, anders valt bij 'n diepere nesting het eerste getal van de buitenste lijst 'n beetje weg. Dus ik houd het voor de zekerheid op 25 px.
Er zat 'n foutje in de oorspronkelijke code hier, dat heb ik gelijk verbeterd nu. csshunter heeft 't opgemerkt en verbeterd.
Bij de css voor ie6/7 mist nog 'n padding-left. Dat wordt dus:
Code:
ol {list-style-type: decimal; padding-left: 25px;}csshunter heeft 'n padding-left van 20px, misschien is dat ook genoeg.
En volgens mij is 'n marge niet nodig, dat staat er bij csshunter wel bij.
Dus dat moet je nog even iets grondiger uitproberen dan ik nu heb gedaan.
Edit: ik heb 't even getest, en ik blijf me verbazen over deze browsers. padding-left en margin-left werken allebei. Pardon? Tja. Dus je kan kiezen wat 't beste uitkomt. Bij mij moet de breedte 23 px zijn, anders valt bij 'n diepere nesting het eerste getal van de buitenste lijst 'n beetje weg. Dus ik houd het voor de zekerheid op 25 px.
Laatst bewerkt:
csshunter
Meubilair
- Lid geworden
- 4 aug 2009
- Berichten
- 6.465
Ja, dit klopt allemaal helemaal (niet)!
Ook nog even getest, en:
Ook nog even getest, en:
- als je voor IE6/7 een padding-left van 20px aanhoudt, moet er een margin-left van 5px à 10px bij om de eerste kolom cijfers niet af te snijden.
- maar inderdaad, een wat grotere padding-left van 25px doet precies hetzelfde. Dan kan de margin-left gewoon weggelaten worden.
- nooit aan gedacht dat bij IE margin en padding ook wel eens op hetzelfde zouden uitkomen: ik had even buiten de waard (MS-opvattingen over margin en padding) gerekend toen ik m'n margin/padding combinatie maakte. Moet je ook niet doen!
Goeroeboeroe
Terugkerende gebruiker
- Lid geworden
- 3 mei 2007
- Berichten
- 1.408
Eh, csshunter, volgens mij moet je gewoon je verstand uitschakelen bij IE 7 en vooral 6, net als de makers kennelijk hebben gedaan. Padding en margin zijn toch twee totaal verschillende dingen, dus je verwacht toch niet dat die hetzelfde effect hebben?
- Status
