Largeur de la boite ajustable au contenu

Bonsoir,

Sujet déjà peut-être traité :
Mon html

<div id="content">
<div class="coteacote"></div>
<div class="coteacote"></div>
<div class="coteacote"></div>
<div class="coteacote"></div>
<div class="coteacote"></div>
<div class="coteacote"></div>
...

vers l'infini

</div>

#content {width: 100%;}
.coteacote {float: left; width: 450px; height: auto; margin: 0 20px 0  0;}

Le problème c'est que sur un ecran de 1280, seules les deux premières boites sont positionner comme il faut. En fait on se retrouve avec 2 boites par ligne. Or ce que je veux faire c'est les placer cote a cote pour utiliser un scroll horizontal vers l'infini...

Merci d'avane

Bonsoir,


J'ai trouvé une méthode en utilisant les attributs display et white-space. En mettant dans #content white-space à nowrap, il n'y aura plus de retour à la ligne lorsque le contenu de #content arrivera à la fin de la ligne. Mais il faut aussi modifier les blocs .coteacote. En effet, comme div est de type bloc, chaque bloc sera placé sur une nouvelle ligne. La valeur inline-block permet de placer les blocs les uns à la suite des autres sur la même ligne.

D'où

#content {
	white-space: nowrap;
}

.coteacote {
	border: 1px red solid;
	width: 450px;
	height: auto;
	margin: 0 20px 0  0;
	display: inline-block;
}

et

<div id="content">
	<div class="coteacote">&nbsp;</div>
	<div class="coteacote">&nbsp;</div>
	<div class="coteacote">&nbsp;</div>
	<div class="coteacote">&nbsp;</div>
	<div class="coteacote">&nbsp;</div>
	<div class="coteacote">&nbsp;</div>
</div>

Modifié par Linconnudujardin (24 Jun 2008 - 01:12)

Bonjour,

Merci pour votre réponse. On dirait que c'est sur la bonne voie meme si je ne comprends pas tout cette histoire d'espace blanc.

Mais du coup, les paragraphes sont "écrasés, la largeur indiquée pour le paragraphe n'est plus prise en compte.

Vous pouvez le voir ici : http://yvynh.free.fr/

De la documentation sur white-space, pour mieux comprendre .

Si vous rajoutez

#container * {
	white-space: normal;
}

vous rétablirez la façon normale de traiter les espaces (retour à la ligne en fin de ligne) dans toutes les balises (*) contenues par #container.

Vous ne devriez pas fixer la hauteur de vos titres, ça pose problème pour les titres qui sont plus hauts qu'une ligne.

J'avais testé ma solution sous Firefox 3 mais je me rends compte que cela ne fonctionne pas sous I.E. 6. La valeur inline-block de display ne semble pas être bien gérée.

Linconnudujardin a écrit :
J'avais testé ma solution sous Firefox 3 mais je me rends compte que cela ne fonctionne pas sous I.E. 6. La valeur inline-block de display ne semble pas être bien gérée.

Et ça ne fonctionnera pas non plus sur les versions de Firefox inférieures à 3 !

Alors ca change tout, si ce n'est pas compatible avec IE 6.
En tout cas c'est plus complexe que je l'imaginais.
Moi qui croyais qu'à partir du moment ou ma boite conteneur a une largeur en auto ou 100%, les boites floattantes viendraient se mettre cote a cote vers l'infini mais ca ne marche pas comme ca

J'utilise temporairement une solution que je trouve tres moche qui consiste a donner une largeur de 1000% à ma boite conteneur puisque 100% na sert a rien.

Voilà si vous avez d'autres pistes, je suis preneur. Pour ma part j'ai essayé de chercher les mises en page horizontal avec largeur auto en vain jusqu'a présent.

@imagit

Bonjour,
je voulais savoir si tu avais trouvé une solution ? Je voudrais faire exactement la même chose que toi c'est à dire que la largeur de mon conteneur s'adapte à son contenu (ici des images chargées depuis spip).

Sinon je relance la question si quelqu'un à une solution...
Merci d'avance,Mathieu.

A toutes fins utiles je rappelle que d'un point de vue accessibilité ET logique de l'outil, l'accroissement de volume pour accepter des contenus dépassant le viewport/fenêtre se fait verticalement et pas horizontalement. Un certain nombre de dispositifs (molette par ex.) permettent aux différents types d'utilisateurs de consulter les contenus étagés verticalement : les placer horizontalement est aberrant.

Je sais aussi que plus ça va et plus on dirait que tout le monde se tape de l'accessibilité, mais faudrait savoir si vous avez l'intention de créer des émul de jeux vidéos pour techno-geeks à grand coup d'Ajax, ou celle de créer des sites web soucieux des standards, des bonnes pratiques et vous engager dans des démarches de qualité web.

Si le fait que de nombreuses expertises présentes ici font que les gens viennent sur Alsa non pas pour les standards mais parce qu'ils trouveront toujours quelqu'un pour leur trouver gentiment et rapidement une solution à un problème de dév parfois anti-accessible au possible, on se demande où ça va finir.