Génération du site web de l'ULB - format xml
sommairesommaireindexindexpage précédentepage précédentepage suivantepage suivanteimprimerimprimerenvoyerenvoyermarquermarquer

Ligne horizontale de séparation: <hr>

Une ligne horizontale de séparation est générée par un élément <hr/>.

Exemple
<p>Ces deux paragraphes sont séparés</p>
<hr/>
<p>par une ligne générée par un élément <code>hr</code></p>

Ce qui donne :

Ces deux paragraphes sont séparés

par une ligne générée par un élément hr

Largeur de la séparation

Si vous ne faites rien, la largeur de la ligne est automatiquement adaptée à la taille de la colonne dans laquelle elle est définie.

Exemple
<zones>
   <zone id="droite">
      <bloc bords="arrondis" style="voile-cadre">
         <p>Cette petite colonne également.</p>
         <hr/>
      </bloc>
   </zone>
   <bloc bords="arrondis" style="voile-cadre">
      <p>Ce paragraphe se termine par une ligne horizontale dont la largeur est automatiquement adaptée à la taille de la colonne.</p>
      <hr/>
   </bloc>      
</zones>

Ce qui donne :

Ce paragraphe se termine par une ligne horizontale dont la largeur est automatiquement adaptée à la taille de la colonne.

Cette petite colonne également.

Vous pouvez modifier cela en utilisant un attribut largeur qui peut contenir une valeur entière (par exemple largeur="100") qui déterminera le nombre de pixels de la ligne, ou un pourcentage (par exemple largeur="80%") qui déterminera la taille de la ligne par rapport à l'endroit où elle est placée. Il est toujours préférable de travailler avec un pourcentage.

Exemple
<hr largeur="200"/>

Ce qui donne:

Avec largeur="400", cela donne:

Avec largeur="50", cela donne:

Exemple
<hr largeur="100%"/>

Ce qui donne:

Avec largeur="20%", cela donne:

Avec largeur="80%", cela donne:

Position dans la page ou la colonne

Si vous définissez une largeur inférieure à celle de la page ou de la colonne, vous pouvez choisir la position de la séparation grâce à un attribut position, qui peut valoir: gauche, centre et droite. La valeur par défaut est position="centre".

position="gauche"

position="centre"

position="droite"

Choix de la ligne de séparation

L'utilisation de l'attribut séparateur dans l'élément <hr séparateur="..."/> permet de choisir la ligne de séparation à utiliser. Vous pouvez choisir parmi une large palette de lignes de séparation prédéfinies

Par défaut, si cet attribut n'est pas présent, la valeur ligne2 est utilisée.

Les exemples à droite ont été obtenus avec le code suivant:

Exemple
<hr séparateur="ligne2"/>

<hr séparateur="colorDots2"/>

<hr séparateur="pointillés3"/>
sommairesommaireindexindexpage précédentepage précédentepage suivantepage suivante
ULB - entreprise écodynamique