Un div qui esquive ses fils !

Bonjour,

Je vous amène un petit casse tête familial. Casse-tête pour moi, qui consiste peut-être en une routine pour certains de vous autres

Donc j'ai un div "parent", #display, qui contient d'autres div "fils" .thumbnail :
http://www.exiledesigns.com/tempo/testcss/test.htm

Sur cet exemple, j'ai désigné la "parenté" dans la feuille de style avec #display.thumbnail. Avec ça, mon float:left est totalement ignoré...

Autre test, sans énoncer la "parenté". Je désigne simplement .thumbnail... mais là, le div s'esquive et se réduit, au-dessus des fils (et donc le fond n'apparaît plus (par contre le float:left fonctionne)

Le but serait, évidemment, que le display ne s'esquive pas devant ses fils mais les contienne et que le float fonctionne.

Mille mercis d'avance pour votre aide.
Modifié par Corinne (24 Jun 2006 - 23:29)

Le sélecteur CSS #display.thumbnail vise un élément dont l'attribut id est "display", et l'attribut class porte au moins la classe "thumbnail" (pour rappel, un même élément peut avoir plusieurs classes, écrites class="classe1 classe2 classe3").

Le sélecteur CSS #display .thumbnail (qui utilise l'opérateur "espace"), désigne un élément dont l'attribut class porte au moins la classe "thumbnail", et dont un des ancêtres (parent direct ou ancêtre plus lointains) porte l'identifiant "display".

Je suppose que c'est ce deuxième sélecteur que tu voulais utiliser.

Pour la question du parent qui ne s'étend pas pour contenir les éléments enfants ayant un comportement flottant, la ressource qui va bien :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Bonjour mpop

Merci pour l'aide. En effet c'est la deuxième solution que je visais... je ne savais pas qu'il y avait une différence (avec / sans espace) !

L'article lié est des plus complets, merci !
J'ai choisi un hr avec la propriété clear: both.

Corinne a écrit :
L'article lié est des plus complets, merci !

De rien, je le dirai à l'auteur, ça lui fera plaisir.

Mouarf, en fait non.

Parce que mes éléments "images" sont censés sauter à la ligne (trois éléments par ligne, donc trois div par ligne). J'ai donc ajouté une ligne d'éléments... et la solution hr marche vraiment bien sous FF, par contre sous IE, catastrophe, le div semble ne commencer qu'au début de la 2è ligne d'éléments.

Ce qui est le plus étrange, c'est que dans mon test simplifié, tout marche même sous IE.
http://www.exiledesigns.com/tempo/testcss/test.htm

Mais quand j'intègre ma solution dans ma page totale, ça marche plus
http://www.exiledesigns.com/boutique/wip/index.htm

Une idée du pourquoi du comment ?

/edit
Waouh... en fait tout le bloc disparaît sous Explorer oO
C'est comme de la magie... noire ?
Modifié par Corinne (24 Jun 2006 - 23:49)

Bon alors ça donne ça :

– Le clear: both; est une solution séduisante, mais qui peut poser des problèmes, aussi bien avec IE qu'avec d'autres navigateurs. Je pense en particulier aux problèmes de contexte de formatage bloc. Sauf qu'avec les bugs d'IE, ça peut être amplifié…
Dans le cas qui nous occupe, tu as un clear: both sur ton menu, ce qui ne sert à rien à vrai dire, et semble gêner IE.

– Je propose donc de se passer de hr rajouté avec un clear: both;, pour utiliser quelque chose de plus adapté au problème de dépassement des flottants : l'utilisation de la propriété overflow. Cf la même source que précédemement. Sauf que voilà, IE n'y comprendra rien. Mais heureusement, on peut avoir le même comportement dans IE avec une propriété qui confère le layout au bloc. Ce qui pourra nous donner :

#display {
	overflow: auto; /* pour les navigateurs conformes : fait rentrer les flottants dans le bloc */
	zoom: 1; /* même chose avec IE… si possible, mettre cette propriété dans une feuille de style conditionnelle pour IE */
}

– Virer le hr, et le clear: both sur le menu.

– Dans la foulée, l'utilisation d'une feuille de style conditionnelle permettrait d'appliquer un height: 100%; à #container (pour IE Win uniquement), ce qui serait pas mal pour simuler le min-height: 100%; qu'IE n'applique pas.

Pour les feuilles de style conditionnelles, voir les messages sur ce forum qui parlent des commentaires conditionnels.

Hello et merci encore

mpop a écrit :
l'utilisation de la propriété overflow

C'est la première que j'avais essayé, et j'ai été bluffée, jusqu'à ce que je navigue sur IE, en effet

Bon alors, j'ai essayé ta solution (avec le layout dans la feuille de style réservée à IE) et IE l'aime beaucoup, ça marche tip top !

Seulement le résultat sur FF est quelque peu effrayant, le bloc s'allonge, dépasse mon conteneur (!) bref c'est catastrophique

mpop a écrit :
Dans la foulée, l'utilisation d'une feuille de style conditionnelle permettrait d'appliquer un height: 100%; à #container (pour IE Win uniquement), ce qui serait pas mal pour simuler le min-height: 100%; qu'IE n'applique pas.

Ceci était déjà fait, suite à un autre topic où tu m'avais apporté de l'aide à ce sujet (encore merci) !

/edit
Wahou après quelques bidouilles... en plus y'a un scroll sur mon display oO
Modifié par Corinne (25 Jun 2006 - 12:38)

Corinne a écrit :
/edit
Wahou après quelques bidouilles... en plus y'a un scroll sur mon display oO

Salut,
Tu peux utiliser overflow:hidden; à la place de overflow:auto;
C'est généralement ce que je fais.

Merci beaucoup, ça fonctionne en effet

Me reste à comprendre pourquoi mon #display s'allonge vers le bas sous FF et "casse" ainsi la propriété height:100% de mon conteneur global. Cela ne se passait pas avant, lorsque je n'utilisais pas overflow.

Corinne a écrit :
Me reste à comprendre pourquoi mon #display s'allonge vers le bas sous FF et "casse" ainsi la propriété height:100% de mon conteneur global. Cela ne se passait pas avant, lorsque je n'utilisais pas overflow.

Bizarre, j'avais tout testé en local, et je n'avais pas vu ce genre de problème.

Ah si tiens, c'est juste parce qu'avec mon écran le contenu ne dépassait pas une hauteur d'écran, et le min-height: 100%; suffisait à remplir tout l'espace vertical avec la couleur de fond du bloc conteneur.

#menu {
	float: left;
}
#content {
	position: absolute;
}

Le menu est flottant et donc sort du conteneur (problème déjà examiné dans ce sujet). Le bloc de contenu est en positionnement absolut et donc sort du conteneur. Donc tout sort du conteneur, qui ne s'étend sur la hauteur d'un écran que parce qu'il a un min-height: 100%;. Supprime ce min-height, et tu verras la hauteur du contenu en flux de ton conteneur.

Le truc, c'est qu'il n'est pas possible de faire rentrer un bloc en positionnement absolu dans le flux du bloc parent. C'est d'ailleurs le principe du positionnement absolu…

… positionnement que tu n'as aucune raison particulière d'utiliser, vu que ton menu de gauche est déjà en flottant. Note : pour que le menu flottant se place bien à gauche du bloc de contenu, le code du menu doit être placé AVANT le code du bloc de contenu.
Modifié par mpop (25 Jun 2006 - 15:15)

Pfiou c'est compliqué.

Mais si je place mon #content en position relative, ça fonctionne (relativement) sous FF, exception près de la largeur du bloc qui est totalement fausse (ainsi que les marges qui ont disparu). Sous IE encore une fois, catastrophe, le bloc est au-dessous du #menu.

Si je ne donne aucune indication de position à mon #content, et que je le mets en float:left, il passe au-dessous du menu dans les deux navigateurs.

Si je laisse en absolu (original) et que je supprime min-height:100% dans le #container, alors ça marche dans IE, mais dans FF, le fond disparaît (j'imagine qu'il s'est tassé tout en haut, le vilain div !).

Du coup... comment positionner mon bloc à droite du menu sans recrourir au positionnement absolu, afin que ma hauteur ne soit pas écrasée ?

Le code du #menu est bien placé avant celui du #content donc ceci ne devrait pas gêner.

Corinne a écrit :
Du coup... comment positionner mon bloc à droite du menu sans recrourir au positionnement absolu, afin que ma hauteur ne soit pas écrasée ?

En faisant quelque chose du style :
Page fluide avec trois colonnes
Cet exemple peut très bien s'adapter pour deux colonnes, sur une largeur fixe. Le premier bloc dans le code est en flottant, et le deuxième est en positionnement statique (normal quoi, pas positionné en absolu ou en relatif ou en flottant), avec une marge pour ne pas passer sous le flottant.

Ça n'est pas si compliqué que ça. C'est surtout que tu es partie avec une mauvaise conception de ce que sont les flottants ou le positionnement absolu, je pense. Tu t'attends à un certain comportement, mais ça n'est pas le comportement normal des propriétés que tu utilises.
Rassure-toi, on passe tous par là…

Merci de ton indulgence
Chaque nouveau site que je ponds me fait suer d'une manière Mais je ne décourage pas

Donc si je résume et j'applique à mon cas :

#menu
- code HTML placé au-dessus de mon #content (ok)
- largeur fixe (ok)
- flottement à gauche (ok)

#content
- n'a pas de largeur fixe (ok)
- ne possède aucun indicateur de position (ok)
- marges à gauche et à droite (ok)

Seulement, on dirait que ça tient pas compte de mes marges du tout. Je peux mettre 40px comme 20px à gauche, que le #content restera collé malgré tout au #menu. Pourquoi donc ?

Qui plus est, sous IE encore une fois tout colle (si ce n'est pour cette question de marges...) par contre sous FF de nouveau, en bas, le height est "cassé" et un trou apparaît.

Autre question que je me pose...
Imaginons que j'aie des pages où le contenu soit plus petit... et que par conséquent le #menu dépasse la hauteur du #content... retrouverons-nous la même erreur ? (je suppose que oui)

Bonjour

As tu essayé cette piste ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>thumb</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
*{margin:0; padding:0;}

.clr{clear:both; background-color:#F4EEE7;}

#display {
	width:29.5em;
	background-color: #F4EEE7;
	border: 1px solid #C0AE8F;
	height:auto;
}

#display ul{
	margin:.3em 0 0 0;
}

#display li{
	display:inline;
	float:left;
	margin:0 0 0 .3em;
}
-->
</style>

</head>

<body>

<div  id="display">
  <ul>
    <li><img src="images/thumb.jpg" alt="image 1"></li>
    <li><img src="images/thumb.jpg" alt="image 2"></li>
    <li><img src="images/thumb.jpg" alt="image 3"></li>
    <li><img src="images/thumb.jpg" alt="image 4"></li>
    <li><img src="images/thumb.jpg" alt="image 5"></li>
    <li><img src="images/thumb.jpg" alt="image 6"></li>
  </ul>
<div class="clr"></div>
</div>

</body>
</html>

C'est une façon comme une autre de procéder, chacun son truc.

@+

Corinne a écrit :
Qui plus est, sous IE encore une fois tout colle (si ce n'est pour cette question de marges...) par contre sous FF de nouveau, en bas, le height est "cassé" et un trou apparaît.

Tu as tout simplement supprimé le min-height: 100%; appliqué à ton div#container. Il suffit de le remettre.

Corinne a écrit :
Seulement, on dirait que ça tient pas compte de mes marges du tout.

As-tu vérifié que ces marges n'étaient pas prises en compte, avant de l'affirmer ? Les marges étant invisibles, le meilleur moyen de les visualiser et de donner un bordure à ton bloc, ou – pour éviter de rajouter un paramètre intrusif – un fond coloré.
Rajoutes un petit background: red; sur ton bloc de contenu, et tu verras où se situent les marges.

Au fait, je précisais dans mon précédent message que tu partais sur une conception erronée des flottants. Je te propose cette petite page pour t'en donner une idée plus précise :
Colonnes flottantes et place des éléments dans le flux HTML
(Note : à visionner avec un navigateur supportant la transparence PNG… donc un navigateur moderne).

Les flottants, comme leur nom l'indique, flottent au dessus des blocs. Ils ne repoussent que le texte ou les autres éléments en-ligne (images, par exemple).

De plus, si tu avais étudié l'exemple que je donnais un peu plus haut, tu aurais vu que pour une colonne à gauche de 160 pixels, le bloc central a une marge à gauche de 170 pixels. Le rendu sans la moindre marge est d'ailleurs assez parlant.

Corinne a écrit :
Autre question que je me pose...
Imaginons que j'aie des pages où le contenu soit plus petit... et que par conséquent le #menu dépasse la hauteur du #content... retrouverons-nous la même erreur ? (je suppose que oui)

Oui, ça sera le cas. Si tu penses être confronté à ce genre de cas, il faut également corriger ce problème avec une des méthodes déjà examinées. Je pense que pour un bloc conteneur général, la solution la plus efficace est le spacer (ou pied de page, s'il y en a un) en clear: both.
Modifié par mpop (26 Jun 2006 - 20:27)

Hello, encore une fois désolée pour le délai, me revoilà !

Je n'avais pas vérifié pour les marges, c'était une impression. Effectivement le résultats est surprenant. À la lumière de la page que tu m'as linkée, il semble que j'aie résolu le problème en donnant à mon bloc #content une largeur fixe ainsi qu'une une marge interne plutôt qu'externe.

Seulement, je ne comprends toujours pas pourquoi sous FF, le bloc #content s'allonge encore au-delà de son conteneur... mon #content n'est pas flottant !

a écrit :
Je pense que pour un bloc conteneur général, la solution la plus efficace est le spacer (ou pied de page, s'il y en a un) en clear: both.

Le pied de page devrait être placé à l'intérieur du conteneur général, n'est-ce pas ?
Modifié par Corinne (28 Jun 2006 - 12:30)

Corinne a écrit :
À la lumière de la page que tu m'as linkée, il semble que j'aie résolu le problème en donnant à mon bloc #content une largeur fixe ainsi qu'une une marge interne plutôt qu'externe.

À la lumière de la page que je t'ai linkée, ça n'est pas du tout la solution préconisée. Une simple marge à gauche suffit.

Tu peux, par exemple, remplacer toutes tes propriétés CSS pour le sélecteur #content par ceci :

#content {
	margin: 10px 15px 0 175px;
	background-color: red; /* à supprimer à la fin */
}

C'est bel et bien la solution présentée sur mon exemple[1] (ainsi que sur un des gabarits des tutoriels d'Alsacréations, il me semble).

a écrit :
mon #content n'est pas flottant !

Dans le code tel que vu par moi ce soir ) 22h55, si, ton div#content est en float: left. Je dois d'ailleurs te rappeler qu'il est relativement dangereux de mettre à la fois ton menu et ton bloc de contenu en flottant : si jamais la somme des deux blocs dépassait d'un malheureux pixel la largeur totale disponible, le deuxième flottant passerait à la ligne, sous le menu.

a écrit :
Le pied de page devrait être placé à l'intérieur du conteneur général, n'est-ce pas ?

Oui, c'est ça.

----
[1] cf dans la colonne de droite les propriétés CSS. En particulier celles de div#centre.

Je sais pas pourquoi il m'avait semblé lire que les marges étaient inutiles dans ce cas, et ne réservaient qu'un espace qui ne pouvait pas être occupé par un bloc (mon #content). J'avais mal compris !

Pour le float, tu as juste, je ne sais pas pourquoi il est resté là... Bête oubli, je comprends que rien ne marchait dans ces conditions, persuadée de l'avoir ôté

Et tiens, pourquoi si j'applique une marge au haut de mon #content, cela ne s'applique pas dans FF et dans IE oui ? Est-ce que, encore une fois, ça a quelque chose à voir avec la position ?

Corinne a écrit :
Et tiens, pourquoi si j'applique une marge au haut de mon #content, cela ne s'applique pas dans FF et dans IE oui ? Est-ce que, encore une fois, ça a quelque chose à voir avec la position ?

Si tu appliques une marge haute de 50px, on commence à voir la marge prendre effet. J'ai moins l'habitude de ce phénomène pour le positionnement vertical des blocs, mais il semblerait que le fait que tes éléments au dessus de ton #content soient soit en positionnement absolu, soit en flottant, empêche que ces blocs soient pris en compte. Le texte du #content est par contre bien repoussé par le flottant.