28173 sujets

CSS et mise en forme, CSS3

[Résolu] Site 100% en hauteur, min-height du conteneur marche pas...

Salut,

Bon après avoir fouillé dans le forum, impossible de régler ce problème récurrent à pas mal de monde : mon conteneur ne s'affiche pas en 100% dès que le contenu est plus grand que le viewport... (du moins dans FF et IE7, étrangement IE6 ne pose pas le problème. Mais bon, il en pose d'autres Smiley langue )

Pourtant l'html, et le body sont en 100%, et j'ai appliqué un min-height de 100% à mon conteneur...

Bref, si vous pouvez jeter un coup d'oeil ici

La css est ici
(merci de ne pas faire gaffe aux !important qui trainent, j'étais en train de debugger pour IE6 lorsque je me suis aperçu du problème)

Merci d'avance, là je suis un peu bloqué !
Modifié par ZeB_panam (15 Jul 2010 - 09:11)
jeremw a écrit :
l'arriere plan de ton conteneur ne fait que 600px et il est en no-repeat !

Bah oui... l'image de background n'a pas à être répétée. C'est la couleur de fond (#fff) qui prend le relais et qui devrait s'afficher en 100% (ce qui est le cas quand tu resize la page, mais pas quand y' a un scroll).
quand tu float un element tu le sors du flux. N'espere pas avoir des conteneurs extensibles avec des éléments floatté a l'interieur . ce n'est qu'une piste mais tes 3 div à l'interieur de ton conteneur principal ne necessite aucunement la propriété float
ton conteneur principal pourquoi l'avoir floatté ? quel interet de floatté a toutes les sauces ? tu lui indique une largeur et tu le mets en margin auto pour le centrer horizontalement
hmmm... Je vais fouiller de côté là alors. Le problème c'est que j'étais passé en float par nécessité ! Suite (notamment) à un problème de décalage de marges en haut, et un décalage du bloc d'actualités...

Bref, je vais refaire une mise en page sans float pour voir.
Merci Smiley smile


[EDIT] : non, mon conteneur principal n'est pas en float, et a ses margin en auto :

#conteneur{
	text-align:left;
	margin: 0px auto;
	width:955px;
	min-height:100%;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
	background:#fff url(../images/global/fond.jpg) no-repeat;
}


[EDIT 2] Il est pas un peu en carafe le forum ? J'arrive à y accédez un fois sur 100
oui ça rame,
on va proceder etape par etape et tu verras tu va y arriver
premierement enleve les float sur les div entete,menu et contenu
de plus la propriété min-height ne fonctionne pas. pour avoir un design extensible enleve cette propriété de ton conteneur principal.
ne precise aucune taille pour la hauteur
(@admin : désolé pour le triple post !)

Ok, je suis en train d'essayer une compo sans float, je te tiens au courant.
Merci infiniment de ton aide !
jeremw a écrit :
si tu peux met tes modifs en ligne que je jette un oeil, enfin comme tu le souhaites

Voilà, je viens de mettre ça en ligne :
- Une maquette de test
(l'originale est toujours à la même adresse)
- la nouvelle css

J'ai viré pas mal d'éléments (le menu et le champ de recherche entres-autres) dans la compo, et j'ai aussi enlevé dans la css les éléments qui pouvaient être perturbateurs (padding, margin et tous les float). J'ai aussi rajouté au début un :

div{
	margin:0;
	padding:0;
}

histoire de mettre à plat, puis si un élément à besoin d'un déclaration de marge ou de padding, elle est faite par dessus de toutes manières (si je me trompe pas... c'est bien la dernière déclaration qui compte ?). J'ai aussi remis le centrage des éléments avec un margin:0 auto, et non plus avec une marge à gauche.

Donc, on se retrouve avec d'emblée plusieurs problèmes :
- pourquoi cet espace en haut ?
- pourquoi un espace entre le div menu, et le div contenu ?
Si tu as l'extension WeDevelopper pour FF, fais un outline des éléments, il n'y a pourtant rien entre les deux !
- pourquoi ais-je du enlever height:100% au body{} sous peine d'avoir un scroll vertical ?


NB : je teste sous FF Mac... alors j'espère que c'est le même problème sous PC... (je peux tester FF PC et IE6/7 en lançant virtual PC, mais c'est comme démarrer une Lada diesel Smiley ravi alors j'évite... )


Oh, et forcément le design n'est plus respecté hein... mais c'est pour partir sur des bases saines, plutôt que bidouiller une compo chancelante techniquement... Smiley edit Modifié par ZeB_panam (20 Nov 2007 - 18:11)
y a du mieux
tu pe mettre maintenant un float left sur la div class accueil, un float right sur la div id actualite et la suite de c'est 2 div tu en crée une 3eme
<div style="height:1px;clear:both"></div>
cela te permettra d'avoir un arriere plan sur toute ta page
jeremw a écrit :
y a du mieux
tu pe mettre maintenant un float left sur la div class accueil, un float right sur la div id actualite et la suite de c'est 2 div tu en crée une 3eme
<div style="height:1px;clear:both"></div>
cela te permettra d'avoir un arriere plan sur toute ta page

?? Y'a du mieux ? Non, non la page est nickel maintenant (du moins sur FF )... Et un arrière plan sur toute la page y'en a déjà un : l'ombre. Et pas besoin de clear:both, ni de height à 1px.

À moins que tu voies des erreurs ? J'ai testé sous FF Mac et PC, et j'ai débuggé sous IE6, IE 7, d'ailleurs sur ces deux derniers impossible de mettre le footer (le div "mentions") comme sur FF en float:right avec un clear:both, ça a pour effet de contraindre le div à la taille du bloc d'actualités (alors qu'il en est indépendant). Du coup, j'ai mis les mentions en float:left en attendant, et ça me va (en dépannage) tant que ça reste sous le contenu...
Modifié par ZeB_panam (21 Nov 2007 - 12:56)
Sujet clos
Aller à