Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

XHTML 1.0 strict en <hr />

Bill Gates
8 antwoorden
  • Ik ben momenteel mijn eerste schreden in de wondere wereld van XHTML (1.0 strict) aan het zetten en dat lukt vrij aardig. Echter heb ik één probleem: de W3C validator klaagt over mijn <hr /> tags en ik heb snap mijn eigen oplossing niet ;)

    De validator vindt dit goed:
    [code:1:6b8c756da4]<body>
    </hr>
    <p><span met een heleboel inhoud> … </span></p>
    </body>[/code:1:6b8c756da4]
    Maar dit niet:

    [code:1:6b8c756da4]<body>
    <p><span met een heleboel inhoud en ergens een hr> … <hr /> … </span></p>
    </body>[/code:1:6b8c756da4]
    Ik krijg dan een error waar ik niet uitkom:[quote:6b8c756da4="W3C validator"] document type does not allow element "hr" here; missing one of "object", "ins", "del", "map", "button" start-tag[/quote:6b8c756da4]
    Als ik vervolgens een <object> tag om die <hr /> heenzet werkt het, en nu zou ik willen weten waarom dat moet en wat het percies betekend…

    Edit: ik zie dat Internet Explorer die oplossing met <object> niet erg leuk vindt :-?
  • [quote:434fa26293="Bill Gates"]De validator vindt dit goed:
    [code:1:434fa26293]<body>
    </hr>
    <p><span met een heleboel inhoud> … </span></p>
    </body>[/code:1:434fa26293]
    [/quote:434fa26293]
    Vreemd, je hebt hier namelijk geen start-tag voor de hr. Dus eigenlijk heb je, uh.., niks ;) Ik snap deze dus ook niet helemaal.

    [quote:434fa26293="Bill Gates"]Maar dit niet:
    [code:1:434fa26293]<body>
    <p><span met een heleboel inhoud en ergens een hr> … <hr /> … </span></p>
    </body>[/code:1:434fa26293]
    [/quote:434fa26293]
    Volgens mij is het probleem dat je hier een block-level element (hr) in een inline element (span) probeert te proppen en dat mag dus niet.
    Probeer de hr eens in de <p> te zetten of maak deze inline met css (display:inline).

    Overigens heeft de <hr/> tag nog wat beperkingen met lijn-diktes of background-colors, afaik (waar hangt die klepel ook weer? :oops: ). Voor lijntjes gebruik ik zelf i.i.g. altijd gewoon css-borders van het container-element.
  • Ook [i:21cf08cedd]p[/i:21cf08cedd] mag alleen maar inline elementen bevatten, [i:21cf08cedd]hr[/i:21cf08cedd] is zoals gezegd een block level element en moet dus buiten de paragrafen geplaatst worden…

    - Bas
  • <object> is van het type %misc; als ik me niet vergis. Deze zijn zowel inline als block en kunnen zowel inline als block bevatten. Het is dus een _hack_ om deze hiervoor te gebruiken, want je gebruikt het als inline element, maar je geeft het block-level content, kan niet echt he ;-)
  • [quote:ff139e82db="termin8or"]<object> is van het type %misc; als ik me niet vergis. Deze zijn zowel inline als block en kunnen zowel inline als block bevatten. Het is dus een _hack_ om deze hiervoor te gebruiken, want je gebruikt het als inline element, maar je geeft het block-level content, kan niet echt he ;-)[/quote:ff139e82db]
    Het is wel een beetje een indirect gevolg van die rare foutmelding van die validator.

    Ipv:
    [quote:ff139e82db]
    document type does not allow element "hr" here; missing one of "object", "ins", "del", "map", "button" start-tag
    [/quote:ff139e82db]
    lijkt me zoiets duidelijker:
    [quote:ff139e82db]
    document type does not allow element "hr" directly inside element "span";
    [/quote:ff139e82db]
    en dan niet komen met van die rare suggesties om er "object", "ins", "del", "map" of "button" tags omheen te zetten.
  • De CSS-variant:
    [code:1:02457b1dc6]
    p.LINE
    { border-top: solid;
    border-top-width: 1px;
    width: 100%;
    color: #336699;
    }

    <p class="LINE">[/code:1:02457b1dc6]
  • Ja, maar daar misbruik je de p-tag voor een lijntje.
    Dat is nogal een doodzonde in de ogen van markup-puristen.
    Maar ja, als die hr-tag zo slecht te stylen is…
    Het liefst zou ik ook denk ik border-properties van naastliggende, of omliggende elementen gebruiken.
  • <hr/> geeft alleen problemen met 'background-image' en relevante properties in IE, maar daar ging het hier toch niet om?

    Die zogenaamde CSS-variant is inderdaad niet de beste…

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.