foto html - css     . List - Nummering

    Voorbeeld

   
  1. 1.

    Dit is een mooi en strak geheel en gemaakt met een list en met een stylesheet. Zoals je ziet lijnt ie hem zowel links als rechts heel mooi uit en hij is qua vorm mooi strak gemaakt.
    Hier is van alles aan te passen, zowel de kleuren als de breedte en ook de getallen die er voor staan, helemaal op jou wensen. Je zou eerder denken dat dit een table is dan een list, maar dat komt ook doordat er een stylesheet het helemaal mooi maakt.

  2. 2.

    Dit is een mooi en strak geheel en gemaakt met een list en met een stylesheet. Zoals je ziet lijnt ie hem zowel links als rechts heel mooi uit en hij is qua vorm mooi strak gemaakt.
    Hier is van alles aan te passen, zowel de kleuren als de breedte en ook de getallen die er voor staan, helemaal op jou wensen.

  3. 3.

    Dit is een mooi en strak geheel en gemaakt met een list en met een stylesheet. Zoals je ziet lijnt ie hem zowel links als rechts heel mooi uit en hij is qua vorm mooi strak gemaakt.

In de css

div {
width: 500px;
margin: 10px}
ol {
color: #B2B2B2;
list-style-type: none;}
ol li {
position: relative;
font: bold italic 45px/1 Helvetica, Verdana, sans-serif;
text-align:justify;
margin-bottom: 20px;}
li p {
font: 12px/1.5 Helvetica, sans-serif;
padding-left: 60px;
color: #2E2E2E;}
span {
position: absolute;}

Tussen de bodytags

<div>
<ol>
<li><span>1.</span>
<p>tekst </p></li>
<li><span>2.</span>
<p>tekst</p>
</li>
<li><span>3.</span>
<p>tekst</p>
</li>
</ol>
</div>

end
terug
home