28220 sujets

CSS et mise en forme, CSS3

[Résolu] Problème "margin-left" sous Mozilla (parfait sous I

Bonsoir,

J'ai un problème galère sur un positionnement de flottants dans un Div.
Voici la structure de ma page web :

<div id="entete">Entete</div>
    <div id="contenu">
        <div id="menus">Barre de Menus</div>
        <div id="centre">
            <dl class="gallerie">
                <dt><img src="images/v1.jpg" /></dt>
                <dt>Titre image</dt>
                <dd>Légende</dd>
            </dl>

                [.....]

        </div>
    </div>
<div id="pied">Pied de page</div>


- Sous IE, le premier flottant (LEFT) s'aligne bien sur le DIV parent (margin-left:5px;)
- Sous Mozilla, le premier flottant et plus décalé vers la gauche, ce qui décale forcémment les autres flottants créant ainsi tout un décentrement pas très joli? J'ai l'impression que Mozilla calcule le "margin-left:5px;" à partir du DIV "grand-parent" (Div Contenu).

Vous pouvez constater le décalage en allant à la page http://www.benfica-story.com/pb (avec IE puis Mozilla).

Si qualqu'un a une idée ? Merci.

Voici le code de ma page web :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sobrainho dos Gaios</title>
</head>
<style title="sdg" media="all" type="text/css">
html, body {
margin:0;
padding:0;
height:100%;
background-color:#335577;
text-align:center;
}
#contenu {
width:556px;
background-color:#d3d3d3;
padding:10px;
margin-left:auto;
margin-right:auto;
height:80%;
text-align:left;
}
#entete {
width:556px;
background-color:#d3d3d3;
padding:10px;
margin:auto;
font-family:Arial, Helvetica, sans-serif;
font-size: 20px;
}
#menus {
width:556px;
background-color:#787878;
margin:auto;
padding:0;
}
#centre {
width:556px;
background-color:#FFCC33;
margin-left:auto;
margin-right:auto;
text-align:justify;
padding:0;
height:100%;
}
#pied {
width:556px;
background-color:#d3d3d3;
padding:10px;
margin:auto;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:10px;
}
h1 {text-align:center;}
dl.gallerie {
background-color: #BEBEBE;
text-align:center;
padding:6px;
float:left;
margin-left:5px;
margin-right:5px;
margin-bottom:10px;
}
.gallerie dt {
font-weight:bold;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.gallerie dt img {
width:160px;
height:110px;
}
.gallerie dd {
margin:0;
padding:0;
font-size:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

</style>
<body>
<div id="entete">Sobrainho dos Gaios</div>
<div id="contenu">
<div id="menus">Barre de Menus</div>
<div id="centre">
<dl class="gallerie">
<dt><img src="images/v1.jpg" /></dt>
<dt>Rancho folclorico</dt>
<dd>Cernache Bonjardim</dd>
</dl>
<dl class="gallerie">
<dt><img src="images/v2.jpg" /></dt>
<dt>Rancho folclorico</dt>
<dd>Cernache Bonjardim</dd>
</dl>
<dl class="gallerie">
<dt><img src="images/v3.jpg" /></dt>
<dt>Rancho folclorico</dt>
<dd>Cernache Bonjardim</dd>
</dl>
<dl class="gallerie">
<dt><img src="images/v4.jpg" /></dt>
<dt>Rancho folclorico</dt>
<dd>Cernache Bonjardim</dd>
</dl>
<dl class="gallerie">
<dt><img src="images/v5.jpg" /></dt>
<dt>Rancho folclorico</dt>
<dd>Cernache Bonjardim</dd>
</dl>
<dl class="gallerie">
<dt><img src="images/v6.jpg" /></dt>
<dt>Rancho folclorico</dt>
<dd>Cernache Bonjardim</dd>
</dl>
<dl class="gallerie">
<dt><img src="images/v7.jpg" /></dt>
<dt>Rancho folclorico</dt>
<dd>Cernache Bonjardim</dd>
</dl>
<dl class="gallerie">
<dt><img src="images/v8.jpg" /></dt>
<dt>Rancho folclorico</dt>
<dd>Cernache Bonjardim</dd>
</dl>
<dl class="gallerie">
<dt><img src="images/v9.jpg" /></dt>
<dt>Rancho folclorico</dt>
<dd>Cernache Bonjardim</dd>
</dl>
<dl class="gallerie">
<dt><img src="images/v10.jpg" /></dt>
<dt>Rancho folclorico</dt>
<dd>Cernache Bonjardim</dd>
</dl>
<dl class="gallerie">
<dt><img src="images/v11.jpg" /></dt>
<dt>Rancho folclorico</dt>
<dd>Cernache Bonjardim</dd>
</dl>
<dl class="gallerie">
<dt><img src="images/v12.jpg" /></dt>
<dt>Rancho folclorico</dt>
<dd>Cernache Bonjardim</dd>
</dl>
</div>
</div>
<div id="pied">
 www.sobrainho-dos-gaios.com
 
</div>
</body>
</html>

Modifié par Luis (30 Sep 2005 - 17:07)
Modérateur
bojour,
et ben non, c'est encore IE qui joue des tours, tu met 5px dans ton css et il te les transforme en 10px, essai une marge de 50px, et la ça devient flagrant ! que ça fait + que 50 !
il te faut alors faire tes reglages avec firefox ou autre navigateur respectueux au mieux des normes, et tu ajoute un deuxieme css pour IE, ou tu divise simplement par 2 les valeurs "normales"
exemple en reprenant le [if IE ] ou l'on garde le css que tu as fait, et dans la partie "normale de ton css on change legerement le css.

(sans avoir essayer, tu peut peut-etre simplement mettre un padding left de 10px a ton #centre, et ensuite applique un simple margin-right:10px au a dl.gallerie, ça devrait etre aussi okay, Ie bug en generale que sur le premier element de la ligne ... a ce que j'ai remarquer)


...
dl.gallerie {
	background-color: #BEBEBE;
	text-align:center;
	padding:6px;
	float:left;
	margin-left:10px;
	margin-bottom:10px;
}
</style>
<!--[if IE]>
   <style type="text/css">
   /*<![CDATA[*/ 
dl.gallerie {
	background-color: #BEBEBE;
	text-align:center;
	padding:6px;
	float:left;
	margin-left:5px;
	margin-right:5px;
	margin-bottom:10px;
}
   /*]]>*/
   </style>
<![endif]-->


a plus
Bonjour,

Il est inutile de reproduire intégralement les styles "standards" dans les CSS en commentaires conditionnels corrigeant les bugs d'IE. Les seules propriétés à y mettre sont celles modifiées pour IE (ici, le margin-left pour compenser le bug de double-marge des flottants).
salut as-tu essayé de rajouter un :
display: inline;


ici :

dl.gallerie {
background-color: #BEBEBE;
text-align:center;
padding:6px;
float:left;
margin-left:5px;
margin-right:5px;
margin-bottom:10px;
}


Normalement ca devrait résoudre ton problème, car float: left + magrin-left ne font pas bon ménage sour tous les navigateurs.

a+
Bonjour,

Enfin, cela fonctionne correctement, aussi bien sous Mozilla que sous IE !
Un grand merci à tous ceux qui m'ont aidé.

A bientôt.

Luis
Sujet clos
Aller à