bonsoir
j'ai 1 différence de marge gauche importante sur un titre h1 entre IE7 et Firefox (bizaremment, mon titre est correctement positionné avec IE7).
j'ai une div entete avec image de fond en background. Sur cette image viennent se positionner le titre de la page (mon fameux h1, puis, en dessous, le menu horizontal)
J'ai besoin que mon titre h1 soit décalé vers la droite (d'où marge gauche de 85px) pour se positionner sur la partie blanche de mon image
upload/19965-entetegene.jpg" alt="upload/19965-entetegene.jpg" /> : résultat impeccable sur IE, et problème sur Mozilla.
J'ai essayé plein de chose (changer le margin en padding, positionner différemment dans le flux...)
Je bloque ! donc SOS et merci de votre aide
voilà mon code css :
et le html
j'ai 1 différence de marge gauche importante sur un titre h1 entre IE7 et Firefox (bizaremment, mon titre est correctement positionné avec IE7).
j'ai une div entete avec image de fond en background. Sur cette image viennent se positionner le titre de la page (mon fameux h1, puis, en dessous, le menu horizontal)
J'ai besoin que mon titre h1 soit décalé vers la droite (d'où marge gauche de 85px) pour se positionner sur la partie blanche de mon image
J'ai essayé plein de chose (changer le margin en padding, positionner différemment dans le flux...)
Je bloque ! donc SOS et merci de votre aide
voilà mon code css :
html { font-size: 100%; }
body {
margin: 0;
padding: 1em;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: .8em;
line-height: 1.4;
background-color:#fff;
color: #000;
height:100%;}
body.rougec {background-color:#e91313;}
body.rougef {background-color:#b81b2f;}
body.jaunec {background-color:#fc0;}
body.jaunef {background-color:#f29317;}
body.bleuc {background-color:#8399fb;}
body.bleuf {background-color:#039;}
/* Titres - style général*/
h1, h2, h3, h4, h5, h6 {
margin: 1em 0 .5em 0; /* Rapproche le titre du texte. */
line-height: 1.2;
font-weight: bold; /* Valeur par défaut. */
font-style: normal;}
h1 {font-size: 1.75em;}
h2 { font-size: 1.5em;}
h3 {font-size: 1.25em;}
h4 {font-size: 1em;}
#global {
min-height:100%; /* page occupe toute la hauteur de la fenêtre*/
width: 90%;
max-width: 90em;
min-width: 850px;
margin: 0 auto ; /*centre la page*/
text-align:center; /* pour IE, pour centrer la page*/
}
#global img {border: 0 none;} /* elimine le cadre bleu entourant les images cliquables*/
#global li{list-style-type:none;}
#global a {text-decoration: none;}
/* -------en tête avec menu ---------------------------*/
#entete {
position:relative;
height:200px;
text-align:center;
background:url(../images/entete_generale.jpg) top center no-repeat;
margin: 0 0 10px 0; padding :0;}
ul#menu {
margin:60px auto 0 auto ;
width:750px;
height:auto;
padding: 0 ;
font: bold 100% Verdana, Arial, Helvetica, sans-serif;
list-style-type:none;}
#menu li {float:left; margin:0 10px ; }
h1 {color:#000; font-size:250%; width:490px; margin : 52px 0 0 85px; padding: 1px 0;}
#menu a {color: #fff; text-decoration: none; }
#menu a:hover {color: #999; }et le html
<body class="rougef" >
<div id="global">
<div id="entete">
<h1>Patate chaude (actualité)</h1>
<ul id="menu">
<li><a href="/site axa/index_2.php"><img src="/site axa/images/maison7.gif" alt="pictogramme page d'accueil" title="page d'accueil de La CGT-AXA" /></a></li>
<li><a href="/site axa/actu.php">Patate Chaude</a></li>
<li><a href="/site axa/cadres.php">Le + des cadres</a></li>
<li><a href="/site axa/coordo.php">Nous joindre<br />
Nous rejoindre</a></li>
<li><a href="/site axa/cgt_axa_comm.php">La CGT-AXA<br />
communique</a></li>
<li><a href="/site axa/agenda.php">Agenda</a></li>
<li><a href="/site axa/organigramme.php">Qui est qui ?<br />
Qui fait quoi ?</a></li>
</ul>
</div>
</div>
</body>
