28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Pb de hauteur

Bonjour à tous et bonne année !

je me permet ce petit message car j'ai un "léger" soucis qui me torture depuis quelques jours maintenant.
Je m'explique :

Une page principale 


/*PAGE MERE>>>>>>>*/
html, body { 
	margin : 0;
	padding : 0;
	height : 100%;
} 
body { 
	margin : 0;
	padding : 0;
	font-family : verdana, helvetica, sans-serif;
	font-size : 0.8em;
	text-align : center;
	color : #000;
	background-color : #000;
	background-image : url(image/interface/bandeauhaut.jpg);
	background-repeat : no-repeat;
	background-position : center 0;
} 
P {MARGIN: 0px; }

.conteneur { 
	width : 760px;
	height:100%;
	margin-top : 10px;
	margin-left : auto;
	margin-right : auto;
	text-align : left;
	
	}
html>body .conteneur {height : auto; min-height : 100%;  }
 
.page { 
	width : 760px;
	background-image : url(image/interface/background.jpg);
	background-repeat : repeat-y;
	background-position : center ;
	margin-top : 5px;

}



.bas2 { 
	width : 760px;
	height : 19px;
	background-image : url(image/interface/basdepage.jpg);
	background-repeat : no-repeat;
	background-position : top ;
} 

.haut { 
	width : 760px;
	height : 150px;
	text-align : left;
	margin-top : auto;
	margin-left : 0;
} 
html > body .haut { 
	width : 760px;
} 
 
.haut_intro { 
	float : left;
	margin-top : 20px;
	text-align : left;
	width : 300px;
	height : 50px;
} 

.Style2 {
	font-size: 9px;
	color:#FFFFFF;
	text-align:center;
}


dans laquelle (via ceci : http://css.alsacreations.com/Tutoriels-PHP/Inclure-un-fichier-dans-un-autre-grace-a-CSS-et-PHP ), dans le bloc "page" est inclus une page accueil :



.accueil_gauche {

	width : 283px;
	float:left;
	height : auto;
	margin-left : 35px;
	margin-top:5px;
	min-height:145px;
	}

.accueil_menugauche { 
	width : 283px;
	height : auto;
	background-image:url(image/accueil/menugauche_line.jpg);
	background-repeat : repeat-y;
	background-position : center ;
	color:#FFFFFF;
	}
.accueil_menugauche_info {
	padding:13px;
	margin-right:12px;
	font-size:11px;
	}


.accueil_menugauche_cal { 
	width : 190px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	height : auto;
	color:#000000;
	background-color:#ffffff;
	margin-left : 40px;
	margin-top:0px;	
	}
	
.accueil_menugauche_haut { 
	width : 283px;
	height : 267px;
	background-image:url(image/accueil/menugauche_haut.jpg);
	background-repeat : no-repeat;
	background-position : center ;
	}

.accueil_menugauche_bas { 
	width : 283px;
	height : 87px;
	background-image:url(image/accueil/menugauche_bas.jpg);
	background-repeat : no-repeat;
	background-position : center ;
	}
	
.accueil_menu_droit {

	width:420px;
	height:auto;
	float:right;	
	margin-right:17px;
	margin-top:12px;
}
.accueil_premieracte_droit{

	width:350px;
	float:left;
	margin-left:12px;
	text-align:justify;
	}


Mon soucis est que sous IE (je sais c'est pas une référence mais bon pas mal de gens l'utilisent encore...) le bloc page s'adapte parfaitement en hauteur au contenu de ma page accueil, mais sous FF, rien à faire le bloc "refuse" de se mettre à la bonne hauteur...

Je cherche désespérément ou j'ai fait une gaffe, mais je ne trouve pas...

D'avance merci pour votre aide,
Modifié par Farfadam (04 Jan 2007 - 17:24)
Commence par valider ta page parce que c'est un peu le souk au niveau des balises.

Sinon, tu dois sans doute ajouter un "clear:both" a un élément à la fin pour étirer ce bloc.
C'est bon j'ai fais du nettoyage dans le code et tout semble à présent correct (This Page Is Valid XHTML 1.0 Strict!).

J'ai essayé d'ajouter un "clear:both" mais toujours sans succès...
Reste encore trois erreur Smiley cligne
> http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.tamdem.asso.fr%2Fv2%2F
Les balises pour lier la feuille de style se placent dans le head.

Et si tu inclus ta balise div qui a la class bas2 dans la balise div qui a la classe page et que tu applique un clear: both à la classe bas2 ?

Sincèrement, je pense que tu ferais mieux de reprendre une heure pour te faire une structure claire par ce que tu dois utiliser environs 70% de div de trop. Smiley langue
Ok merci bien,
je débute dans la mise en page avec les div (avant je faisais tout avec des tableaux mais je me suis vite aperçu de mon erreur) donc pour le moment j'essaye plus ou moins de m'aider de ce que je trouve sur le web (et notamment chez alsacréation)...

En tout cas merci bcp pour ces renseignements Smiley cligne 
.page { 
	width : 760px;
}

Les enfants du bloc div.page sont flottants, et fort logiquement ils sortent du flux du bloc parent. C'est un comportement parfaitement standard, détaillé ici (avec les solutions pour le contourner).

Dans le cas d'Internet Explorer, son comportement est non standard : les flottants devraient sortir du flux, mais ils ne le font pas lorsque le bloc conteneur a une hauteur ou surtout une largeur déterminée (comme c'est le cas ici avec un width: 760px). Pour la petite histoire, il s'agit d'un comportement non standard dû au HasLayout. Je laisse les curieux se pencher sur cette question.

Dans le cas présent, tu peux essayer :
.page { 
	width : 760px;
	overflow: auto;
}

Je pense que le résultat devrait être assez probant.

Pour plus d'informations ou des solutions alternatives, cf. le lien donné ci-dessus.
Sujet clos
Aller à