Scroll horizontal et design fluide

**Watilin** · 31/05/2011, 01h26

Bonsoir à tous !

J'ai un problème que je croyais simple, mais pas moyen de m'en dépêtrer. Je suis en train de réaliser un script de conversion d'images en base64. Ceci génère des chaînes assez longues, sans espaces, que j'affiche dans un <pre>. Comme il n'y a pas de saut de ligne, ça déforme tout et c'est moche.

J'ai tenté une solution intuitive :

Code HTML :

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

1
2
3
<div class="long-code">
    <pre> … </pre>
</div>

Code CSS :

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

1
2
3
4
5
div.long-code
{
    width: 80%;
    overflow: auto;
}

Le résultat que je voudrais obtenir c'est un bloc avec un ascenceur horizontal, exactement comme sur ce site

:

Code :

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

L’encodage_de_ressources_en_base_64_permet_d’utiliser_ces_ressources_avec_le_schéma_url__code_data___code___afin_de_les_décrire_de_manière__em_embarquée__em___et_ainsi…

Le gros problème c'est que mon design est fluide, il doit s'adapte à la largeur de la page. Toutes mes largeurs sont relatives. Du coup c'est comme si les width se propagaient dans le mauvais sens : au lieu que le <body> fixe la largeur minimale, c'est mon <pre> qui impose la largeur maximale…

En fouillant un peu sur le Net, j'ai trouvé des solutions à base de soft hyphen ou d'espaces invisibles. Mais ça me chagrine un peu de ne pas trouver une solution en pur CSS… Alors si vous avez une idée, n'hésitez pas à m'en faire part

Watilin

**NoSmoking** · 31/05/2011, 10h38

Bonjour,
pourquoi ne pas reporter le style au niveau du PRE

Code :

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

1
2
3
4
5
6
.b64 {
  overflow : auto;
  width : 80%;
  min-height : 36px;
  border : 1px solid black;
}

par exemple...

**Watilin** · 31/05/2011, 16h26

Déjà essayé

En refaisant des tests je me rends compte que j'ai oublié un donnée importante dans le problème : il y a un fieldset, et cet abruti fait tout foirer… Je n’ai pas pensé une seconde que ça pouvait venir de là. *facepalm*

Donc je vire mon fieldset (je l'ai gardé juste par cohérence avec le reste de la page – un fieldset avec un file input et un autre avec des options) et j'utilise ton style .b64. Problème résolu par contournement

Juste par curiosité : pourquoi min-height ?

**NoSmoking** · 31/05/2011, 18h27

Juste par curiosité : pourquoi min-height ?

because IE, lorsqu'il n'y a qu'une ligne et le scroll Horizontal actif IE affiche la barre de scroll sur le texte et non en dessous, ceci pour un overflow:auto

**Watilin** · 31/05/2011, 19h24

IE7-8 seulement alors ? Parce qu'il me semble qu'IE6 ne gère pas min-height, et sous IE9 la barre horizontale est à sa place.

**NoSmoking** · 31/05/2011, 19h37

tout à fait, je teste sous IE7.

Scroll horizontal et design fluide

Défilement en CSS

Discussions similaires

Partager

Partager