[Résolu] Probleme de div extensible

Auteur
Dr_G	# 10 Jan 2009 - 23:29:59
12 Posts	Bonsoir, Je suis en train de créer un site internet qui est bientôt fini mais avant de le passer sous joomla j'aimerais bien réussir à régler ce bug. J'ai un bug avec La div (le bloc noir) qui est censé s'étendre suivant que le texte soit long ou pas. Mais le soucis c'est que je ne sais pas ou je dois mettre exactement car dans la div "container" et/ou "global" ça foire Sous Firefox ca bug et sur IE7 ça passe niquel, pour une fois que ce n'est pas le contraire -_- Lien : www.csca*meleon.com/08/ Merci d'avance de votre aide précieuse Html : Supprimé pour le référencement google Css : Supprimé pour le référencement google Modifié par Dr_G (20 Jan 2009 - 17:05) ('.')
12 Posts
fvsch	# 11 Jan 2009 - 00:36:39
Administrateur 19939 Posts	Bonjour, Nous sommes en 2009 et c'est le moment idéal pour prendre une bonne résolution (que, contrairement à l'usage, on tiendra): JAMAIS DE PAGE SANS DOCTYPE. (Je l'écris en gras et en capitales pour que ça se voie bien. J'ai pensé utiliser du rouge et du texte de trois pieds de haut, mais il faut savoir rester sobre.) En ce beau mois de janvier, on s'empressera donc de lire l'article Les DTD HTML4.01 et XHTML1.0 : comment choisir ? (On remarquera que cet article est dans la section «bases et indispensables», section que l'on connait sur le bout des doigts bien entendu... comment expliquer cet oubli alors, se demandera-t-on? Un moment d'inattention, une absence, un reste de fêtes ou une part de galette mal digérée, sans doute.) Suite à quoi, on s'appliquera à vérifier que la page HTML sur laquelle on travaille est bien valide, grâce à l'outil suivant (que l'on connait déjà sur le bout des doigts): http://validator.w3.org Enfin, une fois cette remise en route effectuée, on se penchera avec bonheur sur le concept de dépassement des flottants. Assurément, 2009 sera une bonne année. Modifié par Florent V. (11 Jan 2009 - 00:37) C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
Administrateur 19939 Posts
Kadus	# 11 Jan 2009 - 00:39:15
47 Posts	Salut, Est ce que t'as essayé d'appliquer le height : auto; dans le selecteur "contenue_milieu_texte" ? car la valeur height est en fonction du menu en ce moment (du moins je le crois). Or il devrait être en fonction du texte. Sinon, je te conseil de mettre le texte dans une balise paragraphe au lieu du div tu n'auras qu'à mettre ça dans ta css : #contenue_milieu p { width:500px; text-align:justify; font-size:12px; line-height:150%; color:#676752; } Au lieu de ça : #contenue_milieu_texte { width:500px; text-align:justify; font-size:12px; line-height:150%; color:#676752; } Je sais que ça ne change pas grand chose, mais c'est plus sémantique. Mais comme je suis nouveau, suis pas sûr de la qualité du conseil Modifié par Kadus (11 Jan 2009 - 01:19)
47 Posts
gcyrillus	# 11 Jan 2009 - 01:29:51
1232 Posts	Bonsoir, pour les contextes de formatage et leur interaction visuelle avec les flottants , voici une page qui testent les valeurs qui peuvent les modifiés , cette page vaut pour un dessin , dessin qui change selon le navigateur : http://yidille.free.fr/plux/valign/?17-modifie-le-contexte-de-formatage Attention les regles jouant sur display (excepté display:inline-block; sont a evité ou a utilisé en connaissance de causes et effets secondaires. géneralement , le couple: overflow:hidden et zoom:1;ou width:xx; font l'affaire. Autres pistes : insérer derriere le dernier éléments flottant un element de type block avec les régles clear:both; ou right ou left; selon le contexte . Si IE n'est pas concerné , alors cette element peut aussi etre genéré en css avec la regle #conteneur:after {content:'';display:block;clear:both};par exemple. comme tout , il ne faudra pas abuser de ces regles dans le cas d'imbrication a multiple niveau , a consommer avec modérations. GC Mes quelques resources sur la mise en forme : http://yidille.free.fr/plux/valign : trés fouillis et en français plus que moyen
1232 Posts
Dr_G	# 11 Jan 2009 - 01:39:35
12 Posts	Bonsoir et merci de vos réponses Florent V. a écrit : JAMAIS DE PAGE SANS DOCTYPE. Effectivement tu me l'avais déjà dit la dernière fois que j'avais ouvert un topic, voilà qui est de suite modifié Kadus a écrit : Salut, Est ce que t'as essayé d'appliquer le height : auto; dans le selecteur "contenue_milieu_texte" ? car la valeur height est en fonction du menu en ce moment (du moins je le crois). Or il devrait être en fonction du texte. Sinon, je te conseil de mettre le texte dans une balise paragraphe au lieu du div tu n'auras qu'à mettre ça dans ta css : #contenue_milieu p { width:500px; text-align:justify; font-size:12px; line-height:150%; color:#676752; } Au lieu de ça : #contenue_milieu_texte { width:500px; text-align:justify; font-size:12px; line-height:150%; color:#676752; } Je sais que ça ne change pas grand chose, mais c'est plus sémantique. Mais comme je suis nouveau, suis pas sûr de la qualité du conseil Oui j'ai déjà testé un height:auto; dans ma div contenu_milieu_texte mais ça ne résoud pas le problème. En mettant une balise paragraphe dans dans la div contenu_milieu_texte et en appliquant le css de cette div dans la div contenu_milieu p ça ne fonctionne pas plus. ('.')
12 Posts
Dr_G	# 11 Jan 2009 - 07:00:24
12 Posts	J'ai encore modifié mon code html & css donc je le remet juste ici en dessous : Html : Supprimé pour le référencement google Css : Supprimé pour le référencement google gcyrillus a écrit : Bonsoir, pour les contextes de formatage et leur interaction visuelle avec les flottants , voici une page qui testent les valeurs qui peuvent les modifiés , cette page vaut pour un dessin , dessin qui change selon le navigateur : http://yidille.free.fr/plux/valign/?17-modifie-le-contexte-de-formatage Attention les regles jouant sur display (excepté display:inline-block; sont a evité ou a utilisé en connaissance de causes et effets secondaires. géneralement , le couple: overflow:hidden et zoom:1;ou width:xx; font l'affaire. Autres pistes : insérer derriere le dernier éléments flottant un element de type block avec les régles clear:both; ou right ou left; selon le contexte . Si IE n'est pas concerné , alors cette element peut aussi etre genéré en css avec la regle #conteneur:after {content:'';display:block;clear:both};par exemple. comme tout , il ne faudra pas abuser de ces regles dans le cas d'imbrication a multiple niveau , a consommer avec modérations. GC - J'ai été voir et lire ton lien sur les positionements mais manifestement ça ne change rien du tout. - Le clear:both; est déjà dans un élement de type block dans code de la page html. - J'ai essayé le #conteneur:after sans succès apparent. - Le overflow:auto sur la div contenu_texte ne change rien. (j'ai été voir ceci aussi via Google : http://blog.alsacreations.com/2004/08/17/54-min-height-sur-internet-explorer mais une fois de plus çan'arrange pas mon problème Modifié par Dr_G (13 Jan 2009 - 21:56) ('.')
12 Posts
fvsch	# 11 Jan 2009 - 13:30:42
Administrateur 19939 Posts	Kadus a écrit : Je sais que ça ne change pas grand chose, mais c'est plus sémantique. Non, ça n'a rien de plus sémantique. Rien de ce que l'on fait en CSS n'est plus ou moins sémantique, vu que la sémantique pour une page web c'est en... HTML. Par ailleurs, mieux vaut donner une largeur à un conteneur (DIV) qu'à des contenus multiples (P). Enfin, son contenu peut comporter des listes, des titres, et autres éléments autres que P, donc appliquer ce style aux paragraphes uniquement peut poser des problèmes de cohérence de la mise en forme. Par contre, petit souci: l'usage de font-size avec des pixels. C'est très largement déconseillé, pour des raisons exposées aussi bien dans la FAQ du forum que dans les tutoriels. Je laisse chercher. a écrit : mais une fois de plus çan'arrange pas mon problème Il serait bon d'identifier le problème plutôt que de tenter des solutions au hasard. Alors diagnostic: 1. #global ne s'étend pas pour contenir tout son contenu. 2. Si on retire le min-height de #global, il devient invisible. Avec un outil tel que Firebug, on peut constater que pour le navigateur ce bloc (#global) a une largeur de 959px et une hauteur de 0px. 3. Partant, on se demande: qu'est-ce qu'il peut bien se passer avec les contenus de #global pour qu'ils dépassent ainsi? Comment sont-ils positionnés? 4. On se rend compte que les trois DIV que contient #global sont toutes flottantes. 5. On relit la réponse de Florent V. ci-dessus, on identifie le concept sur lequel on doit se renseigner, et on s'arme de son moteur de recherche, ou encore de la FAQ du forum, plutôt que d'attendre que quelqu'un poste le lien qui va bien (un peu d'autonomie, que diable). C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
Administrateur 19939 Posts
Kadus	# 11 Jan 2009 - 14:01:00
47 Posts	En faite je parlais plutôt de coté html, mais je ne savais pas qu'appliquer dans cette situation des css au p pouvais poser problème ^^; merci pour le conseil ^^
47 Posts
gcyrillus	# 11 Jan 2009 - 16:09:04
1232 Posts	bonjour , désolé d'enfoncer le clou mais , .... a écrit : - J'ai été voir et lire ton lien sur les positionements mais manifestement ça ne change rien du tout. Ce lien ne te donne pas ta solution , il te montre simplement les effets des régles , effet differents vue d'internet explorer . A toi de voir , comprendre , et choisir celle qui te semble la plus opportune ... a écrit : - Le clear:both; est déjà dans un élément de type block dans code de la page html. se trouve t-il dans le flux derrière tes derniers éléments flottant et avant la fermeture de ton block qui ne s'étire pas ? a écrit : - J'ai essayé le #conteneur:after sans succès apparent. heu ? ... as tu compris son utilité , comment le déclaré , quelle valeurs a appliqué et surtout sur quel élément ? a écrit : - Le overflow:auto sur la div contenu_texte ne change rien. ah ? , c'est pas #global qui refuse de s'étirer ? Prend un peu de recul et essais d'analysez un peu plus clairement , les effets des flottants , puis les differentes pistes possibles (contexte de formatage/haslayout ou degagement a l'aide de clear. Tu as eu tout les éléments de réponses sans avoir vraiment compris ou intervenir . tu y est presque . GC Mes quelques resources sur la mise en forme : http://yidille.free.fr/plux/valign : trés fouillis et en français plus que moyen
1232 Posts
Dr_G	# 13 Jan 2009 - 01:17:56
12 Posts	@gcyrillus > Au final c'est le "clear:both" dans mon code html qui était mal placé, le problème est résolu. Un très grand merci une fois de plus [Résolu] ('.')
12 Posts