[résolu] Adaptation d'une div sur la hauteur

Bonjour,

je suis en train de m'arracher les cheveux sur une bêtise...
alors je m'en réfère à vous...
Dans le principe :
J'ai une div conteneur, qui contient le reste de mon site, mais celle ci ne "suit" pas son contenu sur la hauteur. Pourtant, tous ses éléments enfants sont en relative, je n'ai aps mis de "height:XXpx;" etc...
(je ne teste que pour FF pour l'instant...)

J'ai essayé avec deux techniques :
1. utiliser des blocs flotants pour les ombres portées du conteneur :
http://nikophil.free.fr/dl/IMGallery/
problèmes :
- quand j'ai des onglets sur firefox, il me rajoute une scrollbar, avec une ligne sans ombres portées..; (ceci est dû au clear:both)
- Le conteneur ne suit pas le contenu malgrè les apparences... pour s'en assurer, on peut cliquer sur le lien "cliquez ici", et réduire la taille du browser, pour voir que rien ne suit

2. ne pas utiliser de flottants pour les ombres portées, les ombres sont directement dans le bg-img de la div conteneur
http://nikophil.free.fr/dl/IMGallery/index2.php
problème :
- le conteneur ne suit pas sont contenu du tout, et ses div enfants semblent être à l'extérieur du coneneur, alors que ce n'est pas le cas...

merci pour vos réponses... dites moi si je ne suis pas clair...
Modifié par NikOo (07 Feb 2008 - 23:27)

Bonjour,

NikOo a écrit :
Pourtant, tous ses éléments enfants sont en relative

???

Pour rappel: la valeur par défaut pour la propriété CSS position est "static".

Pour venir au problème lui-même:

1. Utiliser des blocs séparés pour dessiner les bordures est une erreur. Comment ceux-ci sont-ils censé suivre la hauteur de leur bloc frère? Les seuls éléments qui ont ce comportement sont... les cellules adjacentes d'un tableau. C'est d'ailleurs une des solutions techniques dans ce cas.

2. Tu n'utilises pas de hauteur figée en pixels, mais une hauteur figée à 100%. La valeur de 100% désigne 100% de la hauteur de la zone de visualisation du navigateur. Si le contenu est plus court que la zone de visualisation du navigateur, ça marche. S'il est plus long, ben ça ne marche pas. Il n'y a pas de moyen en CSS pour dire à un élément de prendre toute la hauteur du canevas (la «page»).

3. Tu as un élément div.content2 qui est décalé de 250px vers le bas, grâce au positionnement relatif. Pour les autres éléments de la page, et notamment pour son conteneur, ce bloc est toujours considéré comme étant placé à sa position de départ. Attention à ne pas utiliser position: relative; top: Npx; lorsque tu devrais tout simplement utiliser margin-top: Npx;!

Bref, il y a encore quelques lacunes en positionnement CSS.

a écrit :
ne pas utiliser de flottants pour les ombres portées, les ombres sont directement dans le bg-img de la div conteneur

Voilà qui est déjà mieux. Tous les problèmes que tu rencontres avec cette configuration existaient dans la première, mais ça te fait déjà des problèmes en moins.

Pour savoir comment faire une page sur toute la hauteur (sans bidouiller un truc au jugé ), je te conseille une petite lecture:
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html
(Tu peux zaper la partie sur le pied de page et te contenter de la première étape.)

Hello,

merci pour ta réponse, j'ai noté les conseils.
J'ai suivi le tuto, j'y suis presque...
mais quand je mets un margin-top, plutôt que simplement un top: Npx, mon background est décalé ??
cf : http://nikophil.free.fr/dl/IMGallery/index2.php

pourtant, j'ai bien mis le margin-top sur l'enfant de ma div conteneur (aka class="cadre")

"Florent V." a écrit :


NikOo a écrit :
Pourtant, tous ses éléments enfants sont en relative


???

Pour rappel: la valeur par défaut pour la propriété CSS position est "static".

je voulais dire par là, que j'avais moi meme mis des "position:relative" à tous les enfants direct de mon conteneur

NikOo a écrit :
mais quand je mets un margin-top, plutôt que simplement un top: Npx, mon background est décalé ??

L'explication à ce sujet est dans le tutoriel que je t'ai indiqué... mais à la fin, dans l'étape n°3 («Étape n°3 : deux subtilités à prendre en compte»). C'est lié au phénomène (standard) de fusion des marges:
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

En fait, ce type de design (contenu qui prend toute la hauteur du viewport si le contenu est court ou toute la hauteur du contenu si celui-ci est long...) n'est pas très naturelle en CSS. Les CSS fournissent très peu de moyens pour gérer les éléments dans leur verticalité. Donc les rares solutions à ce type de problème sont assez complexes et les erreurs ne pardonnent pas.

NikOo a écrit :
je voulais dire par là, que j'avais moi meme mis des "position:relative" à tous les enfants direct de mon conteneur

J'ai bien compris, et je voulais dire par là que c'est à la fois une bêtise et une erreur de débutant courante.

http://nikophil.free.fr/dl/IMGallery/index2.php

walaaa ! un petit padding sur ma div cadre, et le problème a disparu

merci beaucoup !

au moins j'aurais appris plein de trucs avec cette erreur !

a+

Le problème du padding en question c'est que tu as maintenant un bloc div.cadre (et pourquoi pas tout simplement div#cadre? ... tu t'y retrouverais peut-être mieux si tu utilisais des identifiants pour les principaux blocs de la page et des classes pour les styles qui se répètent) qui a une hauteur de 100% du viewport plus 2px... soit 2px de trop (ça fait apparaitre une barre de défilement inutile lorsque le contenu est court).

Je te propose ceci:
1. Tu vires tout le code CSS pour div.content et div.authentification;
2. Tu utilises le code CSS suivant (si possible en le comprenant):

.content {
	padding:1px 0pt;
}
.authentification {
	width: 478px;
	margin: 280px auto 0 auto;
}

Il y aurait d'autres choses à dire, par exemple sur la technique utilisée pour centrer div.cadre (il aurait fallu utiliser les marges automatiques comme dans le code ci-dessus plutôt que le positionnement absolu et une marge négative), mais si je continue je vais te refaire toute ton intégration.

Et il faut bien laisser les débutants débuter.
Modifié par Florent V. (07 Feb 2008 - 23:46)

non, non continue pour souligner les autres problèmes !!

(et le pire c'est que je ne suis pas si débutant que ca... j'ai honte... bon, j'ai comme excuse que tout ceci a été fait trèèès vite)

dans le code que tu donne, il y a un point que je comprends pas :

.content{
padding: 1px 0pt;
}

le 0pt représente quoi ?
Modifié par NikOo (07 Feb 2008 - 23:54)

NikOo a écrit :
dans le code que tu donne, il y a un point que je comprends pas :

.content{
padding: 1px 0pt;
}

le 0pt représente quoi ?

C'est un padding: 1px 0; (1px de padding en haut, 1px en bas, et 0px de chaque côté) transformé en padding:1px 0pt; par Firebug quand j'ai fait mon copier-coller.

Pour l'unité, c'est celle du point typographique. 0pt est strictement équivalent à 0em, 0ex, 0cm, 0px, 0pc, et 0 tout court.

aaah ce firebug....

bon, en tous cas, merci pour l'aide !

yep yep yep
Modifié par NikOo (08 Feb 2008 - 00:04)

Florent V. a écrit :
0pt est strictement équivalent à 0em, 0ex, 0cm, 0px, 0pc, et 0 tout court.

… et même 0% !

ha et euh... un dernier ptit truc...

ça ne marche aps des masses sous IE6...

NikOo a écrit :
ça ne marche aps des masses sous IE6...

L'élément que tu affiches sur toute la hauteur de la page est div.cadre.

div.cadre {min-height: 100%;}

Le correctif que tu appliques pour IE6 est copié-collé directement (et sans réfléchir, hum?) du tutoriel. Ce correctif émule une hauteur minimale de 100% grâce à un height: 100%... mais il est appliqué à div#page, un élément qui n'existe pas dans ta page!

Bref, le correctif devrait être appliqué à div.cadre et pas à div#page.