Discussion :

[Couin]

Couin Couiiiin !

Tout d'abord, bonne année et surtout la santé, et plein de bonnes choses


Voilà, petite broutille que je n'arrive pas à trouver....
Dans un tableau, je liste un changelog, avec des padding-left différents selon qu'il s'agisse de lister la version, de lister le type de changelog (ajout, changement, correction, retrait), ou de description elle même du changelog.

En gros ca fait :

_Version
___Ajouté :
_____La couleur du chat peut être changée par l'utilisateur
___Changé :
_____La longueur des pattes du chat dépendent maintenant de sa couleur
___Corrigé :
_____Le chat sait maintenant faire ses besoins dans le sèche-linge
___Retiré :
_____Possibilité de transformer le chat en ours

(évidement, les underscores, ici colorés dans la même couleur que le fond de bulle de citation, ne sont là que pour représenter les décalages sur le forum, car les espaces ou tabulations sont automatiquement supprimées à l'affichage)

Mais quand le texte d'un changelog est plus long et qu'il ay un renvoi à la ligne automatique, la deuxième ligne (et les suivante' si vraiment plus long) sont au même niveau de marge que la première, alors que j'aimerais qu'il y ait un petit décalage supplémentaire, afin que la deuxième ligne ne soit pas prise pour un autre change log (voir dans Changé et Corrigé):

_Version
___Ajouté :
_____La couleur du chat peut être changée par l'utilisateur
___Changé :
_____La longueur des pattes du chat dépendent maintenant de sa couleur ainsi que sa queue angora que si
_______la longueur des oreilles n'excede pas 42 cm
___Corrigé :
_____Le chat sait maintenant faire ses besoins dans le sèche-linge et en plus il sait lui même faire la
_______mise en fonctionnement par lui-même, hublot fermé
___Retiré :
______Possibilité de transformer le chat en ours

Je ne sais pas si c'est faisable et encore moins comment, mes recherches sont infructueuses

Si quelqu’un a une idée
Merkouiiin

PS : Aucun chat n'a été maltraité durant la composition de ce message

[NoSmoking]

Bonjour,

(évidement, les underscores, ici colorés dans la même couleur que le fond de bulle de citation, ne sont là que pour représenter les décalages sur le forum, car les espaces ou tabulations sont automatiquement supprimées à l'affichage)

tu peux utiliser le balisage [PRE][/PRE] pour cela :

Version
   Ajouté :
     La couleur du chat peut être changée par l'utilisateur
   Changé :
     La longueur des pattes du chat dépendent maintenant de sa couleur

ceci étant :

Dans un tableau, je liste un changelog,

il eut été bon que tu nous présentes la structure HTML qui je l'espère n'est pas une <table> car dans ton cas il me semble qu'une liste de descriptions, <dl> serait plus judicieuse.

↪ <dl> : l'élément de liste de descriptions

...la deuxième ligne (et les suivante' si vraiment plus long) sont au même niveau de marge que la première, alors que j'aimerais qu'il y ait un petit décalage supplémentaire

Il te faut prendre le problème à l'envers, décaler à gauche la première ligne et pour cela il existe la propriété CSS text-indent qui peut prendre des valeurs négatives.

↪ La propriété text-indent

En gros cela pourrait ressembler à :
HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<dl>
  <dt>Changé :</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</dd>
  <dt>Corrigé :</dt>
    <dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</dd>
</dl>

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
dd {
  margin-left: 4em;           /* décalage vers la droite du bloc */
  text-indent: -2em;          /* décalage à gauche du début du texte */
  background-color: #DEF;     /* pour voir la surface occupée */
}

Nota : pour moi c'est un faux problème et la présentation est plus déroutante que routante, un écart entre chaque <dt> lèverait l’ambiguïté.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
dt {
  margin-top: 1em;
}

[Couin]

Coucou NoSmoking !

Merci pour l'astuce [PRE]

Effectivement, il s'agit d'un <table> car je n’avais pas connaissance de la liste de descriptions, qui a l'air top pour ce que je veux faire

Impec l'exemple avec text-indent, c'est ce qui correspond bien au besoin (décaler les renvois à la ligne).

Pour l'écart entre les dt, je regarderais (sachant que le type de changelog , donc "Ajout", "Changé" etc etc, sont distingués par une couleur de texte).

Merkouin

[NoSmoking]

Merci pour l'astuce [PRE]

	Un aperçu de la Liste des balises BB utilisables.

[Couin]

Merkouin