28220 sujets

CSS et mise en forme, CSS3

[Resolu] Personne n'a de solution ?? - Décalage IE - Fire

Salut à tous,

Voici mon code :

<head>
<title>Interface membre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
	margin-right: 0;
	margin-left:70px;
}
#b_logo_haut 	{
	margin: 0;
	padding: 0;
	border:solid 2px #336699;
	width:686px;
}
#b_logo_gauche {
	margin: 0;
	padding: 0;
	float:left;
	width:240px;
	height:232px;
}
#b_info_haut {
	margin: 0;
	padding: 0;
	float:left;
	width:446px;
	height:232px;
	border:solid 2px #d8e4f1;
	background:#F1F5FA;
}
#b_principale {
	border:solid 2px #336699;
	margin-bottom:0;
	margin-top:0;
	float:left;
	margin: 0;
	padding: 0;
	width:686px;
	border:solid 2px #d8e4f1;
	background:#F1F5FA;
}
</style>
</head>

<body topmargin=0 leftmargin=0>
<div id=b_logo_haut>
	<p>b_logo_haut</p>
</div>

<div id=b_logo_gauche>
	<p>b_logo_gauche</p>
</div>

<div id=b_info_haut>
	<p>b_info_haut</p>
	<p>b_info_haut</p>
	<p>b_info_haut</p>
	<p>b_info_haut</p>
	<p>b_info_haut</p>
	<p>b_info_haut</p>
	<p>b_info_haut</p>
	<p>b_info_haut</p>
</div>

<div id=b_principale>            
	<p>b_principale</p>
	<p>b_principale</p>
	<p>b_principale</p>
	<p>b_principale</p>
	<p>b_principale</p>
	<p>b_principale</p>
</div>

</body>
</html>


Le rendu :


upload/4154-normal.JPG


J'ai positionné donc 4 conteneurs dans ma page, et j'ai deux problèmes bien embétant :

1) quand je redimensionne manuellement la fenêtre, b_info_haut se décale

upload/4154-decale.JPG


2) quand il y a beaucoup de texte dans b_info_haut, ce même conteneur, s'agrandi bien et décale automatiquement b_principal sous IE.
Mais il n'en est rien sous firefox où b_info_haut reste de la même taille même si le texte devrait l'agrandir.
On voit dans la première image ci-dessus s'afficher 6 lignes "b_info_haut", les deux dernières sont "dessous" b_principal...

c'est des questions de base car je débute dans les CSS...

Merci d'avance pour votre aide

Bye
Modifié par damjal (06 Dec 2005 - 09:14)
Moi aussi, je débute en CSS, mais je te donne mon avis :

Etant donné que tu as spécifié une largeur en pixel pour #b_logo_gauche et pour #b_info_haut, quand il n'y a plus la place pour que la somme de ces 2 largeur tienne dans la largeur de la fenêtre ça se décale forcement (point 1).

J'imagine que #b_logo_gauche doit avoir une largeur fixe en pixel, tu devrait donc supprimer la propriété float dans les conteneur #b_info_haut et #b_principale (pour le point 2), ainsi que leur largeur et hauteur pour qu'il s'adapte à la taille du contenu.

Il y aura peut-être d'autre modif à faire en fonction des contraintes que tu veux pour ta mise en page mais que tu n'as pas exprimé.

Smiley cligne
merci pour ta réponse, j'ai résolu les deux problèmes ainsi :


<head>
<title>Interface membre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
	margin-right: 0;
	margin-left:70px;
}
#b_conteneur{
	margin: 0;
	padding: 0;
	width:690px;
}	
	
#b_logo_haut 	{
	margin: 0;
	padding: 0;
}
#b_logo_gauche {
	margin: 0;
	padding: 0;
	width:240px;
	float:left;	
}
#b_info_haut {
	margin: 0;
	padding: 0;
	border:solid 2px #d8e4f1;
	background:#F1F5FA;
	width:446px;	
	float:right;
}
#b_principale {
	float:left;
	border:solid 2px #336699;
	margin-bottom:0;
	margin-top:0;
	margin: 0;
	padding: 0;
	border:solid 2px #d8e4f1;
	background:#F1F5FA;
	width:690px;
	float:rigth;
}
</style>
</head>

<body topmargin=0 leftmargin=0>
<div id=b_conteneur>

<div id=b_logo_haut>
<img src="pics/800_haut.gif" width="690" height="160">
</div>

<div id=b_logo_gauche>
	<p>b_logo_gauche</p>
	<img src="membre/monimmo/pics/logo_150x60.gif" width=150 height=60>
</div>

<div id=b_info_haut>
	<p>b_info_haut</p>
	<p>b_info_haut</p>
	<p>b_info_haut</p>
	<p>b_info_haut</p>
	<p>b_info_haut</p>
	<p>b_info_haut</p>
	<p>b_info_haut</p>
	<p>b_info_haut</p>
</div>
<div id=b_principale>            
	<p>b_principale</p>
	<p>b_principale</p>
	<p>b_principale</p>
	<p>b_principale</p>
	<p>b_principale</p>
	<p>b_principale</p>
</div>
</div>

</body>
</html>


1) les boites ne se décalent plus après un repositionnement, il suffisait de placer le tout dans un conteneur global.

2) tu avais raison pour le conteneur qui ne s'agrandissait pas, en enlevant le height, plus de problème.
par contre obligé de laissé les float, sinon la boite info_haut ne se positionne pas à droite de logo_gauche, mais en dessous.

Je rencontre un autre soucis que je n'arrive pas à résoudre :
le conteneur b_principale est trop grand de deux pixel sous mozilla, par rapport au conteneur b_info_haut. (tout est bon sous IE)
J'ai pourtant mis à 0 les marges et padding ?
En plus si je réduit info_haut, tout fou le camp !!!
là je suis coincé, une idée ?


upload/4154-decalage.JPG
Sujet clos
Aller à