28220 sujets

CSS et mise en forme, CSS3

[Résolu] Pb de hauteur de div

Bjr,
je ne comprends pas pkoi un la hauteur d'un div contenant d'autre div
ne s'adapate pas a la taille des ses div (qui ne st pas en position absolute).
Sachant que je ne vx pas specifier de haight au div conteneur puisque le contenu sera variable.
herman31 a écrit :
Bjr,
je ne comprends pas pkoi un la hauteur d'un div contenant d'autre div
ne s'adapate pas a la taille des ses div (qui ne st pas en position absolute).


La hauteur d'un div contenant d'autres divs s'adapte à celle de son contenu en flux, ce qui n'est pas le cas:
- effectivement, avec divs en position absolus (totalement retirés du flux)
- mais aussi avec des divs en float (retirés du flux pour ce qui est du calcul de la hauteur du conteneur)
- et encore dans certains navigateurs et dans des cas de structure bien précis, en raison de tel ou tel bug.
Modifié par Laurent Denis (05 Jul 2005 - 06:05)
N'y aurait-il pas un problème de déclaration d'un référant pour tes Div ?
As-tu essayé de mettre un height:100% ds ton body,html {…} ?
Administrateur
Salut,

herman31 a écrit :
Bjr,
je ne comprends pas pkoi un la hauteur d'un div contenant d'autre div
ne s'adapate pas a la taille des ses div (qui ne st pas en position absolute).
Sachant que je ne vx pas specifier de haight au div conteneur puisque le contenu sera variable.


Je te rappelle ce point des Règles que tu as dû lire trop vite :
a écrit :
11- Conventions d'écriture
L'emploi des majuscules est à utiliser avec parcimonie dans les titres de sujet comme dans les messages. En effet, un texte entièrement rédigé en majuscules donne l'impression que la personne crie sur un ton agressif, sur internet. Veuillez donner un titre de sujet évocateur lorsque vous en rédigez un nouveau, et non pas simplement 'Question', 'HELP', 'Problème!' ou 'URGENT!!!!'. Le forum n'étant pas équipé d'un vérificateur d'ortographe, veuillez vous relire afin que votre message soit bien compris par tous et qu'on vous prenne au sérieux. Il est rappelé également que ce forum est... un forum, et non un tchat ou un support SMS. Vous êtes donc priés de respecter un minimum ce langage qu'est le français.


En bref, sans vouloir te vexer : si tu fais des efforts pour te faire comprendre, les membres vont faire des efforts aussi pour t'aider Smiley cligne
Ok Raphael, c'est compris, ça ne se reproduira plus.
J'ai pris quelques mauvaises habitudes...
Merci Laurent pour tes éclaircissements, mes div étaient en Float donc
en effet sorti du Flux.
zzazz je n'ai pas encore essayé les % et c'est peut être
la seule solution si je veux conserver mes div positionnés en Float.
Pas évident tous ça...
Modifié par herman31 (05 Jul 2005 - 12:04)
Pour qu'un div contenant des divs flottant soit "forcé" de s'adapter en hauteur, tu peux y inclure un élément <hr /> (saut de ligne) ou tout autre élément.

Ensuite tu met un clear: both; à cet élément et ensuite tu le rend invisible (visibility: hidden; par exemple).
TriadPtale a écrit :
Pour qu'un div contenant des divs flottant soit "forcé" de s'adapter en hauteur, tu peux y inclure un élément <hr /> (saut de ligne) ou tout autre élément.

Ensuite tu met un clear: both; à cet élément et ensuite tu le rend invisible (visibility: hidden; par exemple).

Cette méthode est-elle documenté dans un tuto quelque part ? Je n'en avais aucune connaissance Smiley sweatdrop
deux solutions au choix pour ton problème de hauteur et de flottants :

1. A l'ancienne :
Si tout ton contenu est flottant, il suffit d'ajouter en fin de conteneur un élément doté de la propriété clear:both (par exemple, un <hr />). L'élément étant en flux, il devrait se placer à côté des flottants. Mais la propriété clear l'en empêche et le force à se placer en dessous des flottant. La div s'allonge donc comme il faut. ( voir http://openweb.eu.org/articles/initiation_float/ , mais il traîne encore un mauvais copié collé d'exemple dans ce tuto qu'il faudrait vraiment corriger. Que fait l'auteur ? C'est scandaleux !)

2. Solution CSS2.1 (mais pas pour IE):
Un simple overflow:auto sur ton conteneur.
Modifié par Laurent Denis (05 Jul 2005 - 12:32)
TriadPtale a écrit :
http://www.astel.be/forums/images/smilies/A.gif


Ton emoticon est superbe, mais petit détail : quand on navigue en désactivant l'animation gif (il y a des gens qui n'aiment pas), on ne voit que la première image Ceci est un forum... Du coup, le sens se perd un peu (Je me demandais pour quoi tu disais ça, et plus en râlant... il m'a fallu un hasard pour comprendre) Smiley cligne

Le gif devrait commencer par "Langage SMS interdit", non ?

Au fait : à quand des vrais textes alt ou un alt="" sur les emoticons, pleaeaease ?
Modifié par Laurent Denis (05 Jul 2005 - 13:19)
Daccord merci Laurent pr ta première méthode (avec le hr)
Ca marche impeccable.

Bye
Modifié par herman31 (05 Jul 2005 - 15:02)
Quelqu'un peut-il me conseiller à propos de la mise en page avec CSS de données dynamiques et donc variables en nombre et en taille...

C'est mon principal problème actuellement.

JE ne sais pas si il existe déjà un article à ce sujet sur le site (en tout cas j'en ai pas trouvé) sinon je vote et je dit qu'il en faudrait un. Smiley smile

J'ai posté dans ce sujet car je trouve que mon problème est directement en rapport: comment mettre en page des données dynamiques et variables tout en bénéficiant de la souplesse permise par le CSS ?
Administrateur
naholyr a écrit :

Cette méthode est-elle documenté dans un tuto quelque part ? Je n'en avais aucune connaissance Smiley sweatdrop

Par exemple dans la FAQ Smiley smile
http://forum.alsacreations.com/faq/#item6

EDIT : grillé par Olivier.

PS : au fait, si le problème est réglé, n'oublie pas le [Résolu] Smiley smile
Modifié par Raphael (05 Jul 2005 - 14:49)
Sujet clos
Aller à