Scroll horizontal et design fluide [Résolu]

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

Citation:

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.

31/05/2011, 16h26	#3
Watilin Membre Expert Matilin Torre Étudiant Inscription : juin 2010 Messages : 679 Détails du profil Informations personnelles : Nom : Matilin Torre Âge : 23 Localisation : France, Ille et Vilaine (Bretagne) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juin 2010 Messages : 679 Points : 1 202 Points : 1 202	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 ? __________________ Disposition de clavier ergonomique française : Bépo
	00

31/05/2011, 19h24	#5
Watilin Membre Expert Matilin Torre Étudiant Inscription : juin 2010 Messages : 679 Détails du profil Informations personnelles : Nom : Matilin Torre Âge : 23 Localisation : France, Ille et Vilaine (Bretagne) Informations professionnelles : Activité : Étudiant Informations forums : Inscription : juin 2010 Messages : 679 Points : 1 202 Points : 1 202	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. __________________ Disposition de clavier ergonomique française : Bépo
	00

31/05/2011, 19h37	#6
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 939 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 939 Points : 4 767 Points : 4 767	tout à fait, je teste sous IE7.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email