18043 sujets

Questions générales et questions de débutants

Comment 'clearer' une 'ligne de boîtes' de hauteurs différentes?

Bonjour,

je désire placer une série de 'boîtes' de hauteurs inconnues les unes à la suite des autres à la manière d'un texte (composé de lignes de caractères) pour s'adapter automatiquement à la largeur d'écran.

Si je mets simplement des

div.chaine {
float:left;
width:150px;
}

les unes derrières les autres, Firefox (1.5.0.7/Linux) ne revient pas à gauche de l'écran quand il passe à la ligne.

Dans l'image, on voit que la boîte 'AB4' ne revient pas en début de ligne, mais 'reste accrochée' derrière la boîte la plus haute de la ligne.

Ça doit être trivial, mais j'ai beau chercher, je ne parviens pas à trouver la solution...
upload/9479-boites.png

Merci,

xof
-------------------------
Le but est de faire (à titre d'exercice) une page 'programme-TV' réactive avec mise en évidence, au vol, un type d'émission particulier. Peut-être plutôt cliquer et prévoir des info-bulles quand on passe sur le programme, mais un premier jet se trouve sur progTV-06nov2006.
C'est encore assez primitif et pas très heureux au niveau des couleurs... Smiley confused

Si quelqu'un a d'autres idées de source de programmes TV en XML, c'est aussi bienvenu...
Bonjour,

on peut avoir un bout de code ou mieux un lien ?

<edit> désolé, je suis allé trop vite... le lien est bien là </edit>
Modifié par ghost (14 Nov 2006 - 21:32)
Re,

Pour la peine un début de solution ...

<style type="text/css">
hr { clear:both; }
#conteneur{
	width: 100%;
	white-space:nowrap;
}
div.chaine {
	float:left;
	border-style: solid;
	font-family: arial;
	font-size: small;
	height: 1%;
	margin-left: 1px;
	}
div.Documentaire {
	color: #888;
	background-color: #b1d4aa; 
	padding:0 5px 0 5px;
	
	}
div.Film {
	color: #888;
	background-color: #d9b7b7;
	padding:0 5px 0 5px;	
	}
div.TvFilm {
	color: #888;
	background-color: #d9b7b7;
	padding:0 5px 0 5px;
	}
div.Serie {
	color: #888;
	background-color: #d9b7b7;
	padding:0 5px 0 5px; 
	}
div.Magazine {
	color: #888;
	background-color: #aab0d4;
	padding:0 5px 0 5px;

	}
</style>
<script language="JavaScript">
function highlight(theClass, bgcolor)
	{
	changecss(theClass,'color', '#000');
	changecss(theClass,'backgroundColor', bgcolor);
	changecss(theClass,'fontSize', 'small');
	changecss(theClass,'fontWeight', 'normal');
	}
function lowlight(theClass, bgcolor)
	{
	changecss(theClass,'color', '#888');
	changecss(theClass,'backgroundColor', bgcolor);

	}
function changecss(theClass,element,value) {
	//documentation for this script at  http://www.shawnolson.net/a/503/
 
	 var cssRules;
	 if (document.all) {
	  cssRules = 'rules';
	 }
	 else if (document.getElementById) {
	  cssRules = 'cssRules';
	 }
	 for (var S = 0; S < document.styleSheets.length; S++){
	  for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
	   if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
debug(document.styleSheets[S][cssRules][R].selectorText + " " + 
	element + " " + value);
	    document.styleSheets[S][cssRules][R].style[element] = value;
	   }
	  }
	 }	
	}
var _console = null;
function debug(msg)
	{
	return;
	if ((_console == null) || (_console.closed))
		{
		_console = window.open("", "console", "width=600, height=300, resizable");
		_console.document.open("text/plain");
		}
	_console.focus();
	_console.document.writeln(msg);
	}
</script></head><body style="color: rgb(0, 0, 0); background-color: rgb(255, 204, 153);">
<h1>Programmes TV (14nov2006)</h1>
A partir de <a href="http://www.vinch.be/tv/">http://www.vinch.be/tv/</a>
(<a href="http://www.vinch.be/blog/?2006/06/15/76-programme-tv-de-belgique-en-xml-comment-j-ai-fait">ref</a>)

<br>
<script>debug("starting debug");</script>
<input value="Documentaire" onmouseover="highlight('div.Documentaire', '#00F')"
		onmouseout="lowlight('div.Documentaire', '#aab0d4')" type="button">
<input value="Film" onmouseover="highlight('div.Film', '#F00')"
		onmouseout="lowlight('div.Film', '#d9b7b7')" type="button">
<input value="TvFilm" onmouseover="highlight('div.TvFilm', '#F00')"
		onmouseout="lowlight('div.TvFilm', '#d9b7b7')" type="button">
<input value="Serie" onmouseover="highlight('div.Serie', '#F00')"
		onmouseout="lowlight('div.Serie', '#d9b7b7')" type="button">
<input value="Magazine" onmouseover="highlight('div.Magazine', '#0F0')"
		onmouseout="lowlight('div.Magazine', '#b1d4aa')" type="button">
<hr>
<div id="conteneur">
<div class="chaine">LA UNE
	<div class="TvFilm">
	<strong>21:20</strong> Petits meurtres en famille
	</div>
	<div class="Documentaire">

	<strong>23:00</strong> L' hôtel de mes rêves
	</div>
</div>
<div class="chaine">LA DEUX
	<div class="Film">
	<strong>20:05</strong> Ultime décision
	</div>
	<div class="Magazine">
	<strong>22:50</strong> Noms de Dieux
	</div>

</div>
<div class="chaine">RTL TVI
	<div class="Film">
	<strong>21:25</strong> Zizanie dans le Bronx
	</div>
	<div class="Serie">
	<strong>23:05</strong> Espions d'Etat
	</div>
</div>
<div class="chaine">CLUB RTL
	<div class="Film">

	<strong>20:35</strong> Les Morfalous
	</div>
	<div class="Film">
	<strong>23:00</strong> D'un rêve à l'autre
	</div>
</div>
<div class="chaine">PLUG TV
	<div class="Serie">
	<strong>21:05</strong> John Doe
	</div>

	<div class="Film">
	<strong>22:00</strong> Faux-semblants
	</div>
</div>
<div class="chaine">AB3
	<div class="TvFilm">
	<strong>0:00</strong> Mauvais plan
	</div>
	<div class="Magazine">

	<strong>20:50</strong> Ça se discute
	</div>
</div>
<div class="chaine">AB4
	<div class="Film">
	<strong>20:35</strong> On a volé la cuisse de Jupiter
	</div>
	<div class="Film">
	<strong>23:25</strong> Madame Claude 2
	</div>

</div>
<div class="chaine">TF1
	<div class="Film">
	<strong>20:50</strong> Astérix et Obélix : Mission Cléopâtre
	</div>
	<div class="Magazine">
	<strong>22:45</strong> Vis ma vie
	</div>
</div>
<div class="chaine">FRANCE 2
	<div class="TvFilm">

	<strong>20:50</strong> Petits meurtres en famille
	</div>
	<div class="Film">
	<strong>22:40</strong> Matrix Revolutions
	</div>
</div>
<div class="chaine">FRANCE 3
	<div class="Serie">
	<strong>20:50</strong> The Closer
	</div>

	<div class="Magazine">
	<strong>23:25</strong> Ce soir ou jamais
	</div>
</div>
<div class="chaine">ARTE
	<div class="Documentaire">
	<strong>20:41</strong> La génération flouée
	</div>
	<div class="TvFilm">

	<strong>22:45</strong> Les Pygmées de Carlo
	</div>
</div>
<div class="chaine">TV5
	<div class="Magazine">
	<strong>21:00</strong> Moi, Belgique
	</div>
	<div class="Magazine">
	<strong>22:20</strong> Vie privée, vie publique
	</div>

</div>
<div class="chaine">M6
	<div class="Magazine">
	<strong>20:50</strong> Recherche appartement ou maison
	</div>
	<div class="Magazine">
	<strong>22:50</strong> T'empêches tout le monde de dormir
	</div>
</div>
<hr>
</div>
Un peu de blabla


A plus tard
Merci pour la réponse, mais j'ai dû mal exprimer ma question.

Je ne cherche pas à améliorer le look général pour l'instant (je suis conscient que c'est horrible).

Je suis peut-être déformé par TeX, mais je veux simplement obtenir des 'lignes de boîtes de hauteurs différentes'. Mettre des boîtes les unes derrière les autres sur une ligne et quand il n'y a plus de place, commencer une nouvelle ligne en dessous de toutes les boîtes de la ligne du dessus. Sans le faire explicitement pour une boîte particulière (avec un 'clear:both').

Un petit dessin valant mieux qu'un long discours... J'obtiens le résultat du haut et j'aimerais bien obtenir celui du bas.

upload/9479-LignesDeBoi.png

J'aimerais que la boîte '4' vienne sous la boîte '1' (pour débuter une seconde ligne), mais sans faire un 'clear' explicite.

Je veux obtenir le résultat du bas : la boîte 'D' se trouve bien sur ce que j'appelle la deuxième ligne de boîtes. Mais j'aimerais ne pas devoir mettre un 'clear:both' dans cette boîte particulière pour laisser le choix du nombre de boîtes par ligne au navigateur. NB: je ne comprends pas, non plus, pourquoi il est allé remonter mon 'etc...' sous la boîte 'C'...

Une solution pourrait aussi être que toutes les boîtes d'une ligne prennent la hauteur de la plus grande. La hauteur de la boîte s'adaptant à son contenu, du texte que je ne connais pas a priori.

(Je ne comprends pas non plus pourquoi la hauteur de le 'conteneur' de cet exemple ne s'adapte pas à son contenu; il semble que je doive donner explicitement sa hauteur...(?))

a écrit :

<html>
<head>
<style type="text/css">
#conteneur {
border-style: dotted;
width:500px;
height:300px;
margin:5px;
}
div.box {
float:left;
border-style: solid;
margin:1px;
width:150px;
}
</style>
</head>
<body>
<div id="conteneur">
<div class="box" style="height:150px">1</div>
<div class="box" style="height:100px">2</div>
<div class="box" style="height:50px">3</div>
<div class="box" style="height:120px">4</div>
<div class="box" style="height:30px">5</div>
etc...
</div>
<hr>
<div id="conteneur">
<div class="box" style="height:150px">A</div>
<div class="box" style="height:100px">B</div>
<div class="box" style="height:50px">C</div>
<div class="box" style="height:120px;clear:both">D</div>
<div class="box" style="height:30px">E</div>
etc...
</div>
</body>
</html>


Je suis conscient que c'est probablement une question de débutant et que, quelqu'un d'expérimenté ne se pose pas ce genre de question parce qu'il s'est adapté à l'outil et sent ce qui est possible et ce qui ne rentre pas dans la philosophie des feuilles de style. Ou, c'est peut-être dû à Firefox...?

Merci,

xof
Bonjour xof et bienvenue dans l'univers Alsacréations, Smiley smile

Puisqu'il s'agit d'un exercice, autant le mettre à profit pour partir sur de bonnes bases.

La page que tu nous présentes en ligne n'est pas valide et ne présente pas de doctype.

Or, c'est la première chose à faire avant de commencer : choisir un doctype et contrôler la syntaxe de la page, notamment en cas de problème d'affichage.
Modifié par Vero (15 Nov 2006 - 09:22)
Bonjour,

Il me semble que là on touche aux limites... J'avoue ne pas être capable de te donner une solution à ton problème avec ces paramètres là..
a écrit :

1)J'aimerais que la boîte '4' vienne sous la boîte '1' (pour débuter une seconde ligne), mais sans faire un 'clear' explicite.
2)j'aimerais ne pas devoir mettre un 'clear:both' dans cette boîte particulière pour laisser le choix du nombre de boîtes par ligne au navigateur.


Par contre
a écrit :

(Je ne comprends pas non plus pourquoi la hauteur de le 'conteneur' de cet exemple ne s'adapte pas à son contenu; il semble que je doive donner explicitement sa hauteur...(?))

Là c'est normal..Tes elements dans 'conteneur' son en float donc il faut mettre par exemple un clear:both sur un element apres la dernière de tes boites pour que 'conteneur' prenne la hauteur de ses éléments.

Voilà. Désolé de ne pas pouvoir t'aider plus..
Bonjour

Voilà un problème intéressant qui change un peu des robinets qui fuient dans FF et des baignoires qui se vident sous IE Smiley biggol

Tu cherches à utiliser les standards pour obtenir un résultat qu'ils ne prévoient pas : si le bloc 4 se positionne sous le 3 au lieu de passer à la ligne comme tu le souhaites, c'est simplement parce qu'il y a la place pour le mettre là. Ce que tu cherches à faire c'est à "tromper" la gestion du flux en faisant croire que tous les blocs sont de la hauteur du plus grand. Il existe une solution JS qui consiste à déterminer la hauteur des blocs et à attribuer à tous celle du plus grand, avec deux inconvénients : le premier c'est que sans JS ta solution ne fonctionne pas, le deuxième c'est que toutes les lignes de blocs auront la même hauteur, et donc l'espace entre les lignes sera constant :
upload/897-blocs1.gif

On élimine d'office la solution d'un div par ligne contenant par exemple 3 blocs, parce que je suppose que tu veux qu'il y ait un maximum de blocs par lignes selon les tailles d'écrans/fenêtres :
800px : upload/897-blocs2.gif 1024 px : upload/897-blocs3.gif

Reste la solution JS, assez compliquée, de comparer la largeur de fenêtre à la
largeur des blocs pour déterminer le nombre de blocs par ligne et, toujours par un script, d'écrire le clear au bon endroit (du genre document.write('<hr />') où hr est affecté de la propriété clear. L'inconvénient est qu'en l'absence de JS ça ne marche pas non plus.

Une solution Css pure consisterait peut-être à utiliser des min-height suffisamment élevées pour "chasser" les blocs à la ligne ?
upload/897-blocs4.gif

Cette solution pourrait fonctionner sous réserve d'une gestion correcte du min-height par tous les navigateurs (voir blog) et d'une détermination de valeur assez pointue.

Une ultime piste de recherche serait de s'orienter vers une épaisseur particulière de border-bottom, mais là ça devient assez complexe. Il devrait être possible de générer dynamiquement une feuille de style via PHP où un script écrit à la volée une largeur de bordure spécifique à chaque bloc en fonction d'un certain nombre de critères. Mais là encore il va être difficile d'échapper à JS dans la mesure où il faudra à un moment où à un autre une valeur de hauteur quelconque, sauf si...
C'est là qu'intervient ton contenu : s'il est sous forme de liste il est possible de déterminer le nombre de lignes et la fonction PHP imagefontheight() devrait (sous réserve) être capable de déterminer la hauteur du bloc et, partant, celle de son border-bottom. Du coup, plus de JS...
Mais là tu frôles les limites de l'utilisation rationnelle des langages et standards en les prenant pour des outils de mises en forme... c'est à toi de voir si le résultat vaut le coup.

Bon courage
Salut Xof,
Une bonne solution simple et qui marche sur tout les navigateurs serait la suivante:

.box {float:left;border:1px solid;width:300px;height:200px;overflow:auto}


Tu mets une hauteur fixe avec la propriété : overflow:auto, ça te permet de garder ta hauteur fixe quoi qui l'arrive, et si il y a plus de contenu ça rajoute une scrollbar. En plus si tu 20 lignes sur un bloc, ça te fait pas un immense bloc et plein de petits à côté, autre avantage, c'est plus sympa niveau design, plus "régulier", tu peux même personaliser ta scrollbar.
Modifié par matmat (15 Nov 2006 - 22:51)
Modérateur
bonsoir,

on en revient toujours a ce probleme de boite de hauteurs differentes qui se crochent inevitablement les unes aux autres.

Pour eventuellement ameliorer la lecture , un margin-top:1em ou 2em permettrais de rendre peut-etre plus lisible l'ensemble.

et pour finir , pourquoi ne pas fixer une largeur (100% ou moins) et un nombre de boite definies par ligne (width:18% par exemple) en plaçant la premiere de chaque ligne en clear.

L'ensemble resterait coherent et toujours lisible sans que l'oeil perde la boite ou la ligne qu'il a reperer avant de redimensionner la fenêtre.

En fait je pense que le comportement recherché n'est pas des plus confortable pour l'internaute.

++

<edit> deja en faisant:
div.chaine {
	float:left;
	border-style: solid;
	font-family: arial;
	font-size: small;
	width:20%;
margin:1%;
	}

cela a l'air fluide et plus facile a lire Smiley smile
Modifié par gcyrillus (15 Nov 2006 - 20:48)
Merci pour toutes ces réponses. Smiley smile

Je vais analyser/expérimenter tout ça (et choisir un bon doctype).

C'est vrai que si c'est compliqué et qu'il n'y a pas de solution simple prévue par le standard, le plus simple serait de décider de mettre quatre colonnes et de faire des 'clear:both' explicites pour 'passer à la ligne'.

Ensuite, il faut trouver de 'bonnes couleurs' saturée/non saturée ou trouver un autre moyen de mise en évidence (?surlignage au marqueur fluo?). Ajouter des info-bulles avec des compléments d'information... Et expérimenter tout ça pour le rendre 'naturel' et agréable.

...Faudrait aussi faire du lobying pour que les chaînes de télévision (et de radio) fournissent leurs programmes (au commun des mortels?) dans un format 'machine' standard (avec des méta-informations)... (*)


xof
-----------------------
Dans le même ordre d'idées, ce serait bien d'avoir des serveurs (publics) d'informations 'brutes' à partir, par exemple, du code barres (pour les bouquins, les CDs, les pots de confiture,...).
Je te met un test que j'avais fait avec overflow, sans clear:
http://www.smart-com.com.mx/spip.php?page=table&id_article=45
ça t'eviteras de faire le test, tout le code est dans le code, tu verras c'est pas long...

C'est particuliérement utile si tu publies depuis un systéme (ce qui vat surement être le cas, j'imagine) car dans ce cas tu ne peux pas placer de clear quand tu veux. Par contre si tu peux faire des lignes, dans ton cas je ferais un tableau avec des tailles en pourcentage et un tr pour passer à ligne. c'est asser léger et l'avantage c'est que la hauteur de tes cellules s'adaptent par rapport à celle de la cellule voisines et ça te permet de faire une présentation homogéne.
Modifié par matmat (17 Nov 2006 - 04:34)
Sujet clos
Aller à