Sujet Précédent Sujet Suivant

Css, en galére avec ie qui me met des espaces

Résolu/Fermé
vhellers Messages postés 19 Date d'inscription lundi 8 janvier 2007 Statut Membre Dernière intervention 11 août 2016 - 8 janv. 2007 à 21:49
 sikko - 3 juil. 2008 à 10:07
Salut,

Je viens de me faire une interface en utilisant les div et ccs, mais je rencontre un vilain problème d'affichage sur ie (j'ai un autre pb sur firefox mais moins important).

Voici les captures, on comprend tout de suite que le problème ce sont ces fichus espacements (le bloc en rouge c'est pour mieux voir les pb, je changerai la couleur plus tard) :

FIREFOX :

http://virgile06.free.fr/divers/div_firefox.gif

IE avec les espacements de malheurs:

http://virgile06.free.fr/divers/div_ie.gif

CSS : 

html, body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}

.conteneurgauche {
	background-image: url(images/espace_menu.jpg);
	background-repeat: repeat-y;
	float: left;
	width: 227px;
	background-color: #00FF00;
	height: 100%;
}

.conteneurdroit {
	background-color: #FF0000;
	width: auto;
	margin-left: 227px;
	height: 100%;
}
.sousconteneurgauche {
	background-image:url(images/voute.jpg);
	margin-top: 0px;
	background-repeat: no-repeat;
	height: 100%;
}
.bandeau {
	background-image: url(images/fond_r_chez_nine.jpg);
	float: left;
	width: 531px;
	height: 113px;
}

.suitebandeau {
	margin-left: 531px;
	background-image: url(images/fond_bandeau.jpg);
	width: auto;
	height: 113px;

}
.menu {
	margin-top: 150px;
	position:absolute;
}
.menuhorizontal {
	background-image: url(images/fond_menu_hor.jpg);
	width: auto;
	height: 29px;

}
p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	padding: 10px;

}


HTML 

<body>

	<div class="conteneurgauche">
      <div class="sousconteneurgauche">
  		<div class="menu">...ici mon menu vertical</div>
	  </div>
	</div>
	
	<div class="conteneurdroit">
	  <div class="bandeau"></div>	  
	  <div class="suitebandeau"></div>
	 <div class="menuhorizontal"><center>...ici mon menu horizontal</center></div>
	</div>

</body>
</html>

D'avance merci pour votre aide et bonne année!

6 réponses

Réponse 1 / 6
zutalors Messages postés 6 Date d'inscription mercredi 2 février 2005 Statut Membre Dernière intervention 10 janvier 2007
9 janv. 2007 à 09:56
merci, bonne année à toi aussi ;)

ce qu'il faudrait que tu fasses, c'est placer ta div : 
<div class="conteneurgauche">

à l'intérieur de ta div : 
<div class="conteneurdroit">

dans le html
soit : 
<div class="conteneurdroit">
	<div class="conteneurgauche">
		<div class="sousconteneurgauche">
			<div class="menu">...ici mon menu vertical</div>
		</div>
	</div>
	<div class="bandeau"></div>	  
	<div class="suitebandeau"></div>
	<div class="menuhorizontal"><center>...ici mon menu horizontal</center></div>
</div>

et enlever : 
margin-left: 227px;

dans le css de : 
.conteneurdroit

j'ai testé, ça devrait marcher :)
0
Réponse 2 / 6
vhellers Messages postés 19 Date d'inscription lundi 8 janvier 2007 Statut Membre Dernière intervention 11 août 2016 21
9 janv. 2007 à 11:07
Salut,

Merci beaucoup pour ton aide, j'ai l'impression que ça marche...presque :

j'ai fait ce que tu m'as conseillé : 
	<div class="conteneurdroit">
		<div class="conteneurgauche">
      		<div class="sousconteneurgauche">
  				<div class="menu"></div>
			  </div>
		</div>
		<div class="suitebandeau">
			<div class="bandeau"></div>
		</div>
		<div class="menuhorizontal">
		</div>
		<div class="contenu"></div>	
	</div>

Comme tu peux le voir j'ai également supprimé l'espace dans le bandeau avec la même idée.

Toutefois, il me reste un espace qui semble être d'un autre ordre désormais puisque le conteneur droit est bien coller au gauche maintenant, mais son contenu, les bandeaux, eux laisse un espace sur ie :

http://virgile06.free.fr/divers/div_ie2.gif

firefox :

http://virgile06.free.fr/divers/div_firefox2.gif

Là non plus je trouve pas comment supprimer ce malheureux espace.

Ma Css nouvelle version : 

html, body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}

.conteneurgauche {
	background-image: url(images/espace_menu.jpg);
	background-repeat: repeat-y;
	float: left;
	width: 227px;
	background-color: #00FF00;
	height: 100%;
}

.conteneurdroit {
	width: auto;
	height: 100%;
	background-color: #FF0000;
}
.sousconteneurgauche {
	background-image:url(images/voute.jpg);
	margin-top: 0px;
	background-repeat: no-repeat;
	height: 100%;
}
.bandeau {
	background-image: url(images/fond_r_chez_nine.jpg);
	float: left;
	width: 531px;
	height: 113px;
}

.suitebandeau {
	background-image: url(images/fond_bandeau.jpg);
	width: auto;
	height: 113px;

}
.menu {
	margin-top: 150px;
	position:absolute;
}
.menuhorizontal {
	background-image: url(images/fond_menu_hor.jpg);
	width: auto;
	height: 29px;

}
.contenu {
	width: auto;
	height: 100%;
	background-color: #0000FF;
}

p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	margin: 0px;
	padding: 10px;

}



C'est un véritable complot ces différences de réactions des deux navigateurs !

D'avance merci pour votre aide.
0
Réponse 3 / 6
zutalors Messages postés 6 Date d'inscription mercredi 2 février 2005 Statut Membre Dernière intervention 10 janvier 2007
9 janv. 2007 à 13:20
lol :D

as-tu mis ton travail en ligne que je puisse me rendre compte avec les images stp ?
0
Réponse 4 / 6
vhellers Messages postés 19 Date d'inscription lundi 8 janvier 2007 Statut Membre Dernière intervention 11 août 2016 21
9 janv. 2007 à 14:42
Salut,

J'ai tout repris du départ en construisant en ligne sans utiliser les 100% de la hauteur.

http://virgile06.free.fr/divers/chezNous/test.html

Cette fois ça passe bien sous les deux navigateurs.

Seul bémol, le fond du conteneur général qui se répète en y sous le menu ne se répète pas dans Firefox >alors non il se répéte mais seulement sur la taille de l'écran visible au départ.

Merci de ton aide.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
zutalors Messages postés 6 Date d'inscription mercredi 2 février 2005 Statut Membre Dernière intervention 10 janvier 2007
10 janv. 2007 à 12:39
ok, ça faisait longtemps que je n'avais pas fait de css, donc, j'ai mis un moment à trouver, mais voilà la solution :

tu enlèves : 
	height: 100%;
	width: auto;

dans le css de : 
.page

et dans le html, tu places : 
<div class="page">

devant : 
<div class="centre_contenu">

et ça devrait aller sur les 2 navigateurs ;)
0
Réponse 6 / 6
sikko
3 juil. 2008 à 10:07
merci zutalors
0

Discussions similaires

Prélèvement Google Ireland Limited
jaffa1961 -
gill34051 -

32 réponses
Facture de google 380€ !
Misternet -
okapi -

61 réponses
Arnaque frauduleuse Ireland ltd
Mymy -
celine -

3 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Prélèvement "CB Google" inconnu. Arnaque ?
sandrinepommelet -
Roanisel -

29 réponses