[Résolu] Float et width en pourcent

Hello,

je me retrouve dans une situation qui met suivant apparue mais que j'ai toujours contourné seulement aujourd'hui je n'ai pas trop le choix. désolé déjà de ne pas vous mettre a disposition tout le code relatif mais je fais un boulot de drag-n-drop et je gère beaucoup de de chose en javascript, ce qui n'est pas vraiment le sujet.

En gros je génère des div flottants en javascript dans un div container. Suivant le nombre de div qu'y si trouve, je calcule le pourcentage de largeur de ceux-ci (largeur du container moins l'eventuel padding moins les margin des elements enfants le tout divisé par le nombre de div inclus dans mon container) et me retrouve avec un structure HTML du genre:

http://img84.imageshack.us/img84/2133/htmlyt4.png

le css relatif:

.line_content {
	width: auto;
	min-height: 20px;
	background: pink;
	overflow: hidden;
}

.line_content .widget {
	float: left;
	margin: 2px;
}

le problème c'est que ca fonctionne bien seulement si la fenêtre n'est pas redimentionnée. Plus je l'agrandis, plus les marges s'élargissent et plus je reserre, plus les marges se reduisent et à un moment et bien le dernier div enfant se retrouve à la ligne. des illustrations pour vous montrer ça:

http://img80.imageshack.us/img80/5010/initialzr1.png

http://img87.imageshack.us/img87/6348/agrandissementnw3.png

http://img80.imageshack.us/img80/8529/rappetitissementxh8.png

j ai toujours éviter le pourcentage avec des blocs en flottement par que je trouve ca pas très précis seulement j'ai pas trop le choix la. Si vous avez remarquer ce que je fais ressemble assez à netvibes et si netvibes semble fonctionnement similairement à ce que je fait, ca marche pourtant bien mieux que mon code.

donc y a t'il y moyen de mise en forme pallier ce problème, comment employez-vous le flottement avec des largeurs de blocs expimées en pourcentage?
Modifié par MrHankey (16 Oct 2007 - 15:49)

Bonjour,

Tu as peut-être la possibilité de te simplifier les choses en procédant ainsi:
- soit L la largeur du conteneur;
- soit N le nombre de blocs à aligner dans le conteneur;
- on crée N-1 blocs flottants de largeur L/N;
- on crée un dernier bloc non flottant, avec un contexte de formatage, qui s'adaptera en largeur à la place restante.

Ainsi le dernier bloc n'aura pas pile la même largeur que les autres, mais le rendu sera plus harmonieux, et pas de passage fortuit à la ligne.

j'y avait pas songé, mais ma prochaine étape, c'est de pouvoir modifier manuellement la largeur des elements enfants, d'ou l'idée de concerver totalement l'affichage en pourcentage

merci quand même

Pour information, sur Netvibes les colonnes ont une largeur fixe en pixels, calculée dynamiquement. Les pourcentages ne sont pas utilisés.

MrHankey a écrit :
j'y avait pas songé, mais ma prochaine étape, c'est de pouvoir modifier manuellement la largeur des elements enfants, d'ou l'idée de concerver totalement l'affichage en pourcentage

Certes, mais dans mon idée rien n'impose de se passer des pourcentages. Si on reprend:
- L = 100%;
- N = 5;
- on crée 4 flottants de largeur 20%;
- on crée un dernier bloc non flottant, avec un contexte de formatage, qui s'adaptera en largeur à la place restante.

Sinon, un conseil généraliste: ne pas appliquer les marges, padding et autres border directement aux colonnes. Utiliser des blocs imbriqués:

<div class="colonne-debut">
	<div class="bloc-contenu">Ce bloc peut avoir des marges, du padding, des bordures... mais pas son parent!</div>
<div>
<div class="colonne-debut">
	<div class="bloc-contenu">...</div>
</div>
<div class="colonne-fin">
	<div class="bloc-contenu">...</div>
</div>

Gérer à la fois des largeurs en pourcentages et des marges, bordures ou padding en pixels, c'est se prendre la tête... pour rien, vu qu'on peut éviter.

je rectifie après vérification, alors les colonnes de netvibes ont une largeur en pourcent recalculées dynamiquement au redimentionnement de la fenetre, tu vas me dire pourquoi utiliser les pourcents à ce moment, j en ai pas la moindre idée je viens d'essayer et ca fonctionne pour moi.

edit: oui en fait je pense qu'il l'exprime en pourcent pour une question de mise en page, quand on diminue la taille du browser et que c'est exprimé en pixel, la mise en page sera recalculé qu'après redimentionnement de la fenetre alors qu'en pourcentage, cela diminue en meme temps (meme si la mise en page devient un peu fausse elle sera de toute facon recalculée après) en tout cas sur firefox, sous ie et safari le rafraichissement semble se faire cycliquement durant le redimentionnement... je sais pas si je suis claire

pour le petit conseil, je te remercie mais cela ne s'applique pas a mon cas. je n'ai pas entièrement expliqué ce que je fais, en gros c'est une sorte de netvibes mais en ligne plutot qu'en colonne, je n'ai montré qu'une ligne, cela prettait à confusion. globalement ca représente ca

http://img81.imageshack.us/img81/6379/image2pi3.png

en tout cas merci pour la proposition, cela reste une intéressante solution en terme de mise en page
Modifié par MrHankey (16 Oct 2007 - 15:58)