[Résolu] Probleme de div extensible

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)

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)

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)

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

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.

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)

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).

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 ^^

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

@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]