[Résolu] Éléments larges, conteneur et scrollbar horizontale

Bonjour,

Je vais d'abord vous montrer le problème que je rencontre. Ce sera plus simple que d'y aller d'explications :

Démo

Vous remarquerez que le texte sort complètement du div, alors que j'aimerais que ce dernier s'ajuste à son contenu. Le comportement est le même avec une image de trop grande taille.

C'est qu'au final, j'aimerais insérer de grandes images et que le conteneur s'ajuste correctement pour les petites résolutions d'écran. C'est techniquement possible que le div s'étire complètement?
Modifié par Tony Monast (27 Oct 2008 - 14:05)

Bonsoir,

Pour l'exemple du texte, il n'est pas "pertinent" : voir ce sujet.

En ce qui concerne l'exemple de l'image, le fait de ne pas spécifier la largeur (du conteneur) ne résoudrait pas le problème ?
Modifié par yodaswii (24 Oct 2008 - 22:15)

yodaswii a écrit :
Pour l'exemple du texte, il n'est pas "pertinent" : voir ce sujet.

Oui, je sais, j'avais déjà lu ce sujet. J'ai utilisé le texte pour l'exemple car cela se comporte de la même façon avec une image. Je voulais gagner du temps.

yodaswii a écrit :

En ce qui concerne l'exemple de l'image, le fait de ne pas spécifier la largeur (du conteneur) ne résoudrait pas le problème ?

Apparemment, non. Voir le démo avec l'image.

Je ne vois pas vraiment de solution, sinon d'utiliser du Javascript.

Modifié par Tony Monast (24 Oct 2008 - 22:37)

Tony Monast a écrit :
Apparemment, non.

Après post, je me suis rendu compte que la pseudo solution que je t'ai fournis ne solutionnait pas le problème (de plus, si cela avait été le cas elle aurait été efficace pour les deux cas : texte et image).

A mon avis : aucune solution.

Il va falloir peut être essayé de contourner la chose (proposer une miniature, passer par des scrollbars via overflow).

<edit>Pour le script ... pourquoi pas mais ne trouves-tu pas ça un peu lourd pour "si peu".</edit>
Modifié par yodaswii (24 Oct 2008 - 22:38)

Ouais, c'est ce que je me disais. Le code que j'ai mis est simple. Il n'y a rien de farfelue, et les navigateurs se comportent tous de la même façon. Je n'ai pas espoir de trouver une solution en CSS, mais je posais tout de même la question, des fois que...

Puis pour le Javascript, je ne crois pas que j'irai jusque là. C'est superficiel comme problème mais je m'informais simplement si une solution simple existait.

Merci tout de même de ton temps.
Modifié par Tony Monast (24 Oct 2008 - 22:41)

bonsoir,

Dans IE6 , pas de soucis a priori , ça s'etale tout seul , ailleurs on retrouvera ce comportement qu'avec un tableau .

En css , on peut forcer cet élément a se comporter comme un tableau .

display:table;

Dans IE 7 , il faudrait faire basculer cet element block en element inline ; puis activer le layout pour qu'il englobe et s'adapte à tout ses contenus .

Definir une largeur minimale ?
Il n'y a guere que IE7 qui en aura besoin , ailleurs (IE6 ou display:table) width:100%; équivaudra a min-width .

test ? :
http://gcyrillus.free.fr/essai/Barre_horizontale.html (version texte , pas besoin de chargé une image .

Le css IE 6 et les autres :

div#cadre {
width:100%;
background-color:#FFF;
color:red;
padding:1em;
border:3px solid red;
display:table;
}

et IE7 en CC :

<!--[if  IE 7 ]>
<style type="text/css">
div#cadre {
width:auto;
min-width:100%;
display:inline;
zoom:1;
}
</style>
<![endif]-->

Le min-width sert a conserver ce div 'affiché en tableau', a au moins sa largeur en affichage normal si vide ou petite image ou grand ecran , ... .

GC

<edit>de cette façon , la surface d'affichage en largeur ne se trouve plus limiter au viewport , on peut appliquer ça a toute une page a partir d'un conteneur global ... Cependant ce genre de configuration n'est pas toujours des plus agréables pour le visiteur </>
Modifié par gcyrillus (25 Oct 2008 - 00:17)

gcyrillus a écrit :
En CSS, on peut forcer cet élément à se comporter comme un tableau.

Je n'y avais pas penser ... c'est en effet la solution.

Juste une remarque par rapport à la page d'exemple : il faudra "doubler" le conteneur afin de ne pas se retrouver avec une scrollbar horizontale inutile (border + padding + width: 100%) dans un cas plus traditionnel.

Je complète la très bonne solution de gcyrillus: display: inline-block marchera également.

Bonjour gcyrillus,

Un grand merci pour ta solution. Je vais sans doute la mettre en production aujourd'hui!

Passe une excellente journée!