Trucsweb.com

Trucsweb.com

HTML

Mise en forme du texte HTML

RDFFav

Retraits et listes numérotées ou non numérotées...

Pour terminer la mise en forme du texte il y a les très pratiques balises de liste et de retrait. Pour mettre un texte en retrait ou pour énumérer des éléments avec des numéros ou bien des points. Ces balises ne peuvent être placées entre d’autres balises à part dans une table.retraits listes numéroter numérotation numérotés ligne numéro point items éléments paragraphe blocknote BLOCKNOTE ul li ol UL OL LIRetraits et listes numérotées ou non numérotées...

  • · Niveau : DÉBUTANT
  • · Compatibilité : Tous les navigateurs

Pour terminer la mise en forme du texte il y a les très pratiques balises de liste et de retrait. Pour mettre un texte en retrait ou pour énumérer des éléments avec ou sans numéros.

Ces balises ne peuvent être placées entre d’autres balises à part dans une table. Mais vous pouvez utiliser des balises à l’intérieur de celle-ci. Exemple, un BLOCKNOTE peut être dans une table mais les polices de caractère ou l’alignement doivent impérativement être placés à l’intérieur du BLOCKNOTE pour affecter son texte. Toute ces balises peuvent être jumelées ensemble comme par exemple faire une énumération dans un texte en BLOCKNOTE.

Voici les différents types de balises. La balise <ol> (ordered lists) permet des énumérations avec une numérotation automatique. Alors que la balise <ul> (Unordered lists) affiche une liste non-nuumérotée. Chaque item ou élément de la liste doit être entouré par la balise <li>élément<<li> (list items).

La balise <blockquote> permet quant à elle de mettre un texte en retrait. N’oubliez pas de refermer la balise sinon votre texte restera jusqu’au bout en retrait. À l’aide des feuilles de style vous pouvez donner du style à vos listes mais ce n’est pas compatible avec Netscape.

Exemples : Le Retrait

<blockquote>
La balise blockquote permet de mettre un texte en retrait. Noubliez pas de refermer
la balise sinon votre texte restera jusqu’au bout en retrait.
</blockquote>

Résultat :

La balise blockquote permet de mettre un texte en retrait. Noubliez pas de refermer la balise sinon votre texte restera jusqu’au bout en retrait.



Exemples : Liste non-numérique

<ul>
  <li>ligne 1</li>
  <li>ligne 2</li>
  <li>ligne 3</li>
</ul>

Résultat :

  • ligne 1
  • ligne 2
  • ligne 3


Exemples :La liste numérique

<ol>
  <li>ligne 1</li>
  <li>ligne 2</li>
  <li>ligne 3</li>
</ol>

Résultat :

  1. ligne 1
  2. ligne 2
  3. ligne 3


Exemples :La liste numérique et sous liste

<ol>
  <li>Item 1
    <ol>
      <li>Item 1, ligne 1</li>
      <li>Item 1, ligne 2</li>
      <li>Item 1, ligne 3</li>
    </ol>
  </li>
  <li>Item 2</li>
  <li>Item 3</li>

</ol>

Résultat :

  1. Item 1
    1. Item 1, ligne 1
    2. Item 1, ligne 2
    3. Item 1, ligne 3
  2. Item 2
  3. Item 3

Plus vous ajoutez de liste dans une liste et plus il y aura de retrait.

Noter qu’à chaque nouvelle liste un paragraphe est créé, pour remédier à ce problème, vous pouvez mettre une liste dans une table alors la table pourra être juste au-dessous du titre. Et un gros problème, vous pouvez changer la police, la couleur et la grandeur du texte mais le numéro restera toujours la police, couleur et grandeur par défaut du document (sauf en CSS et IE).

De plus, vous pouvez ajouter des sauts de ligne pour ajouter des lignes vide entre les énumérations de la liste.

Attributs « start » et « reversed »
<ol start="3">
  <li>ligne 1</li>
  <li>ligne 2</li>
  <li>ligne 3</li>
</ol>

Résultat :

  1. ligne 1
  2. ligne 2
  3. ligne 3
<ol reversed>
  <li>ligne 1</li>
  <li>ligne 2</li>
  <li>ligne 3</li>
</ol>

Résultat :

  1. ligne 1
  2. ligne 2
  3. ligne 3
CSS

La propriété list-style-type définie le type de liste en changeant le type d’identifiant ou de puce :

ul {
 list-style-type: square;
}
  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none

La propriété list-style-position définie la position de la puce : "inside" ou "outside" sans plus. C’est à dire avec la marge de la liste ou non.

ul {
  list-style-position: outside;
}

La propriété list-style-image définie l’image utilisé comme puce. Un URL de l’image ou la valeur "none". Noter que la seule manière de positionner l’image est de jouer avec sa dimension, en ajoutant des marge dans l’image. (NOTE : Pas du tout flexible, cette dernière est peut utilisé au profit de l’image de fond (background-image) plus facile à positionner) :

ul {
  list-style-image: url(images/image.png);
}
Django (Oznog) Blais
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

       Visites : 8389 - Pages vues : 49529
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@