Float+scroll

Bonsoir, je viens de faire un script qui affiche un arbre horizontal me permettant d'afficher le nom des joueurs d'un tournoi de tennis par exemple.

L'arbre peut aller jusqu'à 9 colonnes (256 joueurs).

Pour l'afficher j'ai utiliser des boites dans un conteneur avec la propriété "float left".

L'affichage est parfait tant que les boites sont placées dans le site (5 colonnes max), après les boites qui suivent ont leurs float d'annulés et viennent se positionner en bas de page.

J'ai essayé d'ajouter un overflow dans le conteneur mais ca ne fonctionne pas, existe t'il une solution ?


Merci !

Bonjour et bienvenue,

un float n'est jamais annulé (sauf à faire: float: none; bien entendu) mais l'élément sorti du flux occupe la 1ère place disponible et s'il n'y en a pas à droite des autres éléments alors il se retrouve plus bas ...
Aurais-tu STP un lien vers la page ou au pire un extrait du code? On ne sait pas quelles unités tu as utilisé (%, px, em) pour les colonnes, les éléments, etc et si le conteneur est extensible en largeur ou pas donc c'est difficile de te répondre
Modifié par Felipe (10 May 2008 - 11:19)

Merci,

2 liens d'exemples,

le premier réalisé en tableau : http://modnpds.tuxfamily.org/test1.php
Le deuxième avec un conteneur et des boîtes http://modnpds.tuxfamily.org/test.php

Pour le code, j'espère n'être pas trop brouillon :

/*
La variable '$af' permet d'afficher la bonne image pour l'arbre : 
$af = 'background: url(http://localhost/modules/modules/championnat/images/squelette'.$i.'.gif) bottom right repeat-y;'; ........
La variable '$cs' permet d'ajuster la hauteur des cellules suivant les colonnes (correspondance avec l'image) : 
if ($j == 1){$cs = 'margin-top:30px';} else {$cs = 'margin-top:50px';}.......
*/

/*conteneur*/
echo '<div class="contchamp">'
	/*colonnes*/
	.'<div style="
			'.$af.';
			float: left;
			width: 130px;">'
		/*interieure cellule*/
		.'<div style="
				font-weight: bold;
				border: #97D52C 2px solid;
				width:100px;
				padding-left:3px;
				background-color: #ECE9D8;
				'.$cs.';
				height:26px;
				line-height: 26px;">'
		.'<div style="champscore">10</div>'
		.'Bordeaux'.$j.''
		.'</div>'
	.'</div>'
.'</div>';

Et la css

.contchamp
{

	width: 700px;
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
	border: #ff0000 1px solid;

}

.champscore
{

	float:right;
	font-weight: bold;
	width: 20px;
	height:26px;
	background-color: #DDDACA;
	text-align: center;

}

La css est un peu éparpillée, comme pour certains div j'utilise une variable dans la css, je ne sais pas si c'est bien de mettre un style = et une class = dans un même Div. Dans le doute j'ai fait comme ca.
Modifié par etre (10 May 2008 - 12:17)

J'ai trouvé une solution, je ne sais pas si elle est bonne mais en tout cas elle fonctionne ; j'ai doublé le conteneur.

/*conteneur*/
echo '<div style="width: 850px;margin-left: auto;margin-right: auto;overflow: auto;border: #ff0000 1px solid;">'
.'<div style="width: 1000px">';

C'est la variable définie dans le 2ème Div qui permet d'afficher la scrollbar à condition qu'il soit supérieur à ce que l'on veut afficher, la scrollbar prendra la taille du premier Div.

L'inconvénient est que la scrollbar est toujours présente, il suffit de mettre les width en variable suivant ce qu'on veut afficher.