PRATIQUE CLIENTS WEB 
CSS : éviter la superposition avec overflow
 
"Comment puis-je insérer de longues chaînes de caractères continues sans qu'elles ne dynamitent ma mise en page CSS ?" (04/10/2005)
  Forum

Réagissez dans les forums de JDN Développeurs

HTML ni les navigateurs ne sont en mesure de savoir quand et où couper une suite de caractères et la reprendre à la ligne suivante. Ils affichent donc ladite suite telle quelle, le plus souvent sur une seule ligne, avec le risque d'un décalage de la mise en page du site, ou d'un affichage de la ligne par-dessus ou par-dessous un autre élément, rendant le tout illisible.

La solution consiste à placer cette suite de caractère entre des balises spécifiques (le plus souvent code, mais il peut s'agir d'un simple div avec un attribut class), et de la transformer en un bloc (pour qu'elle ne se superposent pas à l'élément suivant) avec des barres de défilement (pour garder toute la longueur de la chaîne lisible). Exemple :

code {
  display: block;
  overflow: scroll;
  white-space: pre;
  font-family: monospace;
  border: solid 1px black;
  }


Nous y ajoutons la préservation des espaces blancs, l'utilisation d'une police type Courier, et une bordure noire pour repérer le bloc.


Les meilleures astuces CSS sur le JDN :
- Comment appliquer les CSS d'une page web au contenu d'une iframe ?
- Comment centrer horizontalement une DIV dans une autre en CSS ?
- Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
- Comment définir les cellpadding et cellspacing en CSS ?
- Comment modifier l'image d'un bouton input en CSS ?
- Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?
- Internet Explorer supporte-t-il l'attribut CSS border-radius
 
Xavier Borderie, JDN Développeurs
 
 
Accueil | Haut de page