Nummering doorlopen. - Softwareontwikkeling

vrijdag 18 februari 2005 17:35

Acties:

Topicstarter

Zelf heeft een maat van me problemen met het goed krijgen van zijn opsommingen. Hij wil immers het volgende doen. Jullie zien de "li's", deze wil hij volledig laten doorlopen. Zoals het hier staat werkt het MAAR zijn validatie moet in strict gebeuren. Hoe is dit op te lossen?

code:

<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Stijn Vansevenant" />
    <meta name="description" content="Testje" />
    <link rel="stylesheet" type="text/css" href="test.css" />
    <title>Testje</title>
</head>
<body>
<div>
    <ul>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
            <p>Hier komt een paragraaf</p>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
            <p>Hier komt nog een paragraaf</p>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
    </ul>
</div>
</body>
</html>

[ Voor 26% gewijzigd door nvidia op 18-02-2005 17:35 ]

Partners: AV-Solutio | Mutrox | B&W | Trinnov

vrijdag 18 februari 2005 17:38

Acties:

Bonno

<li value="30">

En natuurlijk een Ordered List gebruiken (<ol> ipv <ul>)

zie ook: http://www.w3.org/TR/html4/struct/lists.html#edef-LI

Tenminste ik neem aan dat je een genummerde lijst bedoeld, want anders snap ik niet wat je bedoeld met door laten lopen

[ Voor 54% gewijzigd door Bonno op 18-02-2005 17:42 ]

vrijdag 18 februari 2005 17:47

Acties:

nvidia

Topicstarter

Ok maar het probleem zit hem bij het valideren. Wanneer hij dan valideert krijgt hij problemen met zn paragrafen in zijn ol's. "tag is not alowed in ol". Hoe is dit op te lossen. Div's gaan niet!

Partners: AV-Solutio | Mutrox | B&W | Trinnov

vrijdag 18 februari 2005 17:49

Acties:

crisp

Devver

Pixelated

eerst je ol afsluiten, dan je paragraaf en dan weer een nieuwe ol beginnen?

Intentionally left blank

vrijdag 18 februari 2005 17:49

Acties:

nvidia

Topicstarter

lukt ook niet. Dan begint hij opnieuw te tellen van 1!

Partners: AV-Solutio | Mutrox | B&W | Trinnov

vrijdag 18 februari 2005 17:52

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

code:

<ol>
   <li>
   <li> ..etc
</ol>
<p> bla </p>
<ol>
   <li value="30">
   <li>  ..ect
</ol>

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

vrijdag 18 februari 2005 17:54

Acties:

Bonno

en als je dan een indent op je paragraaf zet lijkt het alsof je paragraaf toch nog bij dat list-item hoort

code:

    <ol>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
    </ol>
    <p style="text-indent: 40px;">Hier komt een paragraaf</p>
    <ol>
        <li value="6">tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
    </ol>
        <p style="text-indent: 40px;">Hier komt nog een paragraaf</p>
    <ol>
        <li value="11">tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
    </ol>

vrijdag 18 februari 2005 18:09

Acties:

crisp

Devver

Pixelated

Helaas is het value-attribuut voor de li ook niet geldig in XHTML strict. De enige echte oplossing is generated content in CSS:

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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Stijn Vansevenant" />
    <meta name="description" content="Testje" />
    <style type="text/css">

      ol.first { counter-reset: item; }
      ol li { list-style-type: none; }
      ol li:before { content: counter(item) ". "; counter-increment: item; }

    </style>
    <title>Testje</title>
</head>
<body>
<div>
    <ol class="first">
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
    </ol>
            <p>Hier komt een paragraaf</p>
    <ol>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
    </ol>
            <p>Hier komt nog een paragraaf</p>
    <ol>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
    </ol>
</div>
</body>
</html>

Jammer genoeg werkt dit niet in o.a Moz/FF of IE...

Intentionally left blank

vrijdag 18 februari 2005 18:31

Acties:

nvidia

Topicstarter

Er is een andere oplossing en deze werkt effectief:

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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Stijn Vansevenant" />
    <meta name="description" content="Testje" />
    <link rel="stylesheet" type="text/css" href="test.css" />
    <title>Testje</title>
</head>
<body>
<div>
    <ol>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
    </ol>
            <p>Hier komt een paragraaf</p>
    <ol start="6">
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
    </ol>
        <p>Hier komt een paragraaf</p>
    <ol start="11">
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
        <li>tekst</li>
    </ol>
</div>
</body>
</html>

Cascading Stylesheet:

1
2
3

li {
    list-style-type: decimal;
}

Test zelf even het resultaat!!

Partners: AV-Solutio | Mutrox | B&W | Trinnov

vrijdag 18 februari 2005 18:33

Acties:

Bonno

crisp schreef op vrijdag 18 februari 2005 @ 18:09:
Helaas is het value-attribuut voor de li ook niet geldig in XHTML strict.

Ow, dit wist ik niet en had ik niet getest

. Hmm dan wordt het inderdaad wel erg lastig.

Maar de TS heeft op zich geen uitsluitsel gegeven of het nu een genummerde lijst moest zijn...
Misschien moesten de paragraafjes wel gewoon inspringen met de list-items ofzo? Dan is het wel weer makkelijker

edit:
@nvidia:
Line 20, column 14: there is no attribute "start"
<ol start="6">

[ Voor 9% gewijzigd door Bonno op 18-02-2005 18:37 ]

vrijdag 18 februari 2005 18:38

Acties:

T-MOB

nvidia schreef op vrijdag 18 februari 2005 @ 18:31:
Er is een andere oplossing en deze werkt effectief:
HTML:
1
...
Test zelf even het resultaat!!

Helaas is ook het start attribuut deprecated in HTML 4 en worden ze niet ondersteund in XHTML.

Regeren is vooruitschuiven

vrijdag 18 februari 2005 19:03

Acties:

zeekoe

HTML:

<ol>
  <li>blaat</li>
  <li>blaat</li>
</ol>
  <p>blaat</p>
<ol>
  <li style="visibility: hidden;">blaat</li>
  <li style="visibility: hidden;">blaat</li>
  <li style="margin-top: -40px;">blaat</li>
  <li>blaat</li>
</ol>

1. valideert vast wel als xhtml 1.x strict
2. doet wat jij wilt
3. rendert hetzelfde in opera, mozilla, ie (wonderbaarlijk!)
4. is een ontzettend lompe oplossing

edit: zullen ze hier bij w3c nou echt niets op bedacht hebben...

[ Voor 28% gewijzigd door zeekoe op 18-02-2005 19:04 ]

Nieuw huis, nieuwe (verduurzamings)kansen...

vrijdag 18 februari 2005 19:15

Acties:

JHS

Splitting the thaum.

zeekoe schreef op vrijdag 18 februari 2005 @ 19:03:
edit: zullen ze hier bij w3c nou echt niets op bedacht hebben...

Generated content dmv CSS

.

Overigens vind ik het wel raar eerlijkgezegd, dat het niet in de HTML hoort, het lijkt me toch in redelijke mate onderdeel van je content en niet van de presentatie. Het is voor de content (soms) van groot belang waar de list nummertjes starten. Dus waarom dat nu in css moet..

.

DM!