5569 sujets

Sémantique web et HTML

[Résolu]Problème de marge sous IE entre 2 images

Bonjour,

J'essayes de refaire mon nouveau site entièrement en CSS (celui en table > http://www.dbh-oblivion.com )

Par contre, en css, sous IE, il y a une marge, et j'arrive à la supprimer en mettant margin-top à -2px, mais forcement, comme c'est un design qui se suit, ça fait moche.

Voici un screen :

http://www.zimagez.com/avatar/marge.jpg

et le code html/css 



<div id="navigation">
	<img src="design/titre_oblivion.gif" class="logo1" title="oblivion : Database of heroes" alt="oblivion : Database of heroes" width="317" height="85" />
	<img src="design/databaseh.gif" class="logo2" title="oblivion : Database of heroes" alt="oblivion : Database of heroes" width="186" height="29" />
	<div id="banniere_site">
		<img src="design/haut.jpg" title="banniere oblivion : Database of heroes" alt="banniere oblivion : Database of heroes" width="762" height="95" />
	</div>
	<div id="menu_site">
		<div class="menu_boutons">
		<?php require 'menu.php'; ?>
		</div>		
	</div>
</div>




/**********Général***********/
body{
	background-color: #FFFFFF;
	background-image: url(design/fond.gif);
	background-repeat: repeat-x;
	color:#000000;
	margin-top: 40px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	text-align:center;
}
img{
	border: 0px;
}
#navigation{
	width: 762px;
	margin: auto;
	border: 0px;
}
.logo1{
	float: left; /* alignement du logo à gauche */
	margin-top: 4px;
	margin-left: 1px;
	border: 0px;
}
.logo2{
	float: right; /* alignement du logo à droite */
	margin-right: 10px;  
	margin-top: 60px;
	border: 0px;
}
#banniere_site{
	width: 762px;
	margin-bottom: 0;
}
#menu_site{
	color: #FFFFFF;
	background-image: url(design/haut_menu.jpg);
	background-repeat: no-repeat;	
	width: 762px;
	height: 50px;
	margin-top: 0px;
}
.menu_boutons{
	margin: 0px;
	height: 45px;
}


Merci d'avance Smiley cligne
Modifié par fox17 (04 Aug 2006 - 16:59)
Bonjour,

Je te conseille tout d'abord d'ajouter à ta feuille de style

*
{
margin:0;
padding:0;
}

Ca te permet d'avoir toutes tes marges nulles quelque soit le navigateur (qui ont des valeurs par défaut différentes celon les blocs/éléments)

Ensuite, rajoute un 

display:inline;

à ton bloc de menu
ou 

float:left; 
display:inline;


dans ce cas le display:inline ne sert à rien (c'est le float qui compte) mais ça permet souvent de régler des problèmes de marge d'IE.

Bon courage.
Modifié par fxoxo (04 Aug 2006 - 15:45)
Salut,

Merci de ta réponse.

Par contre, j'ai essayé tes deux methodes, et c'est toujours pareil, exactement le meme espace ... Smiley sweatdrop
Oui biensur, voila :

http://dbh-oblivion.com/test/

D'ailleurs, la j'ai fait une ptite modif,

j'ai rajouté 

#banniere_site img{
  display: block;
}


POur que l'image dans mon div de la banniere où il ya un espace, colmate le trou. ça fonctionne sous IE, mais maintenat c'est sous firefox où rien ne va pls Smiley bawling
Bonjour,

Par défaut, les images inline s'affiche sur la ligne de base des caractères (qu'il y ait du texte ou non), en laissant en dessous les quelques pixels correspondant à la hauteur des jambages inférieures des lettres.

Pour le corriger, il suffit d'ajouter un :

#banniere_site img {
vertical-align: middle;
}


<edit>En supprimant le display:block précédent, bien-sûr</>
Modifié par Laurent Denis (04 Aug 2006 - 16:39)
laurent denis merci !

C'est bon ça fonctionne !

Par contre, autre question, j'ai en dessous, 3 div composé comme cela :

- Image haut
- fond milieu
- Image bas

Tout ce passe bien, juste que sous IE, tout est au milieu hors sous firefox, c'est a gauche.

Comment forcer le centrage d'un div sur la gauche par exemple ?
Quelques précisions à propos des suggestions de fxoxo:

fxoxo a écrit :

Je te conseille tout d'abord d'ajouter à ta feuille de style

*
{
margin:0;
padding:0;
}



Cette solution "bulldozer" est à éviter d'une manière générale, à moins de vouloir redéfinir les marges et padding par défaut de toute la feuille de style du navigateur, c'est à dire une bonne douzaine d'éléments. Mieux vaut annuler marges et padding uniquement au cas par cas.

fxoxo a écrit :

Ensuite, rajoute un 

display:inline;

à ton bloc de menu
ou 

float:left; 
display:inline;



display:inline est une astuce pour annuler le bug de double-marge horizontale des flottants dans IE (float:left + margin-left = marge gauche doublée). Elle ne joue pas sur les marges verticales.
fox17 a écrit :
le centrage d'un div sur la gauche



Smiley fouille Smiley confuse uh ?

J'ai peur de ne pas saisir, là Smiley cligne
Modifié par Laurent Denis (04 Aug 2006 - 16:45)
Oui, regardes sur mon site test : http://dbh-oblivion.com/test/

Sous IE Tout le "tableau" est centré, alors que sous fiefox c'est à gauche.



#news{
	
	width:400px;	
	background-image: url(design/fenetre_centrale/milieu_news.gif);
	background-repeat: repeat-y;
	padding-left: 0px;
	
	
}
.haut_news{
	width: 400px;
	margin: 0;
	padding: 0;
	left: 0;
}
.bas_news{
	width: 400px;
	margin: 0;
	paddingt: 0;
	left: 0;
}




	<div class="haut_news"><img src="design/fenetre_centrale/haut_news.gif" width="400" height="8" alt="haut tableau presentation" /></div>
	<div id="news">		
		
	</div>
	<div class="bas_news"><img src="design/fenetre_centrale/bas_news.gif" width="400" height="16" alt="bas tableau presentation" /></div>
Ton bloc de news est centré car il suit la rêgle text-align:center de ton body (sous IE uniquement)

Met le dans un div avec text-align:left et ça sera bon

nb: pour l'instant il est également compris dans ton bloc de navigation, il serait plus logiques que tu l'en sorte :

<div id="navigation">
...
</div>
<div id="contenu">
   <div class="haut_news">
    ...
    </div>
</div>

et text-align:left pour le bloc "contenu"

PS Pour Laurent Denis :
OpenWeb est fermé ? ça fais plusieurs jours que je n'arrive plus à m'y connecter ?
<Très brève parenthèse>

fxoxo a écrit :

PS Pour Laurent Denis :
OpenWeb est fermé ? ça fais plusieurs jours que je n'arrive plus à m'y connecter ?


Nous avons un problème de DNS lié au nom de domaine et à des difficultés précédentes d'un serveur de l'APINC. C'est assez inextricable pour l'instant. OPW est accessible à certains utilisateurs mais pas à d'autre, apparemment en fonction de la propagation des DNS (par exemple, j'y accède sans difficulté en ce moment).

</>
<Très brève parenthèse>
Ok, merci pour l'info, j'avais peur qu'ils soit fermé ...
</Très brève parenthèse>
Sujet clos
Aller à