• Séparation

    Vous avez peut-être remarqué, sur certaines de mes pages, des lignes horizontales, de séparation entre deux sujets.

    Le code html en est simple: <hr> et en voici l'illustration juste au dessus.

    C'est volontairement discret mais on peut lui appliquer différents styles, en code source ou html.

    <hr style="border: 1px solid black;" />

    <hr id="s1" />
    <style><!--
    #s1{height:3px; border:2px solid green;}
    --></style>
    On lui donne une identification en html (id="s1") et on applique le style désiré en CSS

    <hr id="s2" /><hr id="s3" />
    <style><!--
    #s2{border:2px dotted blue;}
    #s3{border:2px dashed red;}
    --></style>

    Avec l'oiseau ou toute autre image:
    <hr id="s4" />
    <style><!--
    #s4{height:30px; border:0; background:url('http://ekladata.com/UgOKfCafaTTkMD4thhgB5KCrXtc/vogel-klein.gif'); repeat-x 0 0;}
    --></style>

    Vous pouvez limiter la largeur et fixer le positionnement.
    <hr id="s5" />
    <style><!--
    #s5 { width:60%; height:32px; margin:10px auto; background:url('http://ekladata.com/AZVdPIuWrgYI0_Doz0JC1VQiX98/canard-005.gif'); repeat-x 0 0;}
    --></style>
    etc, etc...

    <hr style="border: 3px double grey;" />

     

    On peut utiliser ce code de séparation pour faire des traits verticaux ou des motifs de séparation verticaux.
    Les tirets verticaux orange sont un exemple de trait et les oiseaux animés, un exemple de motif.

    <hr id="s6" />
    <hr id="s7" />
    <p id="p1">On peut utiliser ce code de s&eacute;paration pour faire des traits verticaux ou des motifs de s&eacute;paration verticaux.<br />Les tirets verticaux orange sont un exemple de trait et les oiseaux anim&eacute;s, un exemple de motif.</p>
    <hr id="s8" />

    <style><!--
    #s6{height:100px; border:2px dashed coral; float:left; margin:0 20px 0 0;}
    #s7{ width:30px; height:100px; float:left; background:url('http://ekladata.com/NxyRi2dUJO8BtzZ_SXncVlh9s0Y/vogel-stehend.gif'); repeat-y;}
    #p1{float:left; width:800px; border:1px solid black; text-align:center; font-size:12pt; margin:30px 20px 0 20px; background-color:pink;}
    #s8{ width:30px; height:100px; float:left; background:url('http://ekladata.com/NxyRi2dUJO8BtzZ_SXncVlh9s0Y/vogel-stehend.gif'); repeat-y;}
    --></style>