bonjour,
je rencontre un petit probleme sur firefox.
j'ai un decallage enorme entre 2 div alors que margin et padding sont à 0.
voici la différence en image :
pour ie :
http://farm3.static.flickr.com/2477/3635092279_d66dfeaac9.jpg
pour ff :
http://farm3.static.flickr.com/2432/3635092067_9123629942.jpg
et voici le code :
Merci par avance de votre aide ....
Modifié par Hotfirenet (18 Jun 2009 - 09:58)
je rencontre un petit probleme sur firefox.
j'ai un decallage enorme entre 2 div alors que margin et padding sont à 0.
voici la différence en image :
pour ie :
http://farm3.static.flickr.com/2477/3635092279_d66dfeaac9.jpg
pour ff :
http://farm3.static.flickr.com/2432/3635092067_9123629942.jpg
et voici le code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PEK</title>
<style type="text/css">
/*Css generale*/
* {
margin:0;
padding:0;
border:0
}
html {
height:100% !important;
}
body {
background: url(images/background.jpg);
font-family: "Trebuchet MS",Arial,sans-serif;
}
#header {
height: 142px;
background: url(images/fondHeader.png) repeat-x;
text-align: center;
}
#container {
margin-top: 20px;
}
#sidebar1 {
float: left;
width: 250px;
height: 498px;
background: url(images/menuGauche.png) no-repeat;
padding: 5px;
margin-right: 20px;
}
#sidebar2 {
float: right;
width: 250px;
min-height: 498px;
margin-left: 20px;
background: #af236e url(images/menuDroite.png) repeat-x;
padding: 0 10px 15px 10px;
}
#mainContent {
margin: 0 17% 0 16%;
padding: 0 10px;
background-color: #fff;
border: 1px solid #000;
}
#footer {
height: 30px;
padding-top: 30px;
}
#footerContent {
height: 100%;
background: #666666 url(images/footer.png) top repeat-x;
}
.clearfloat {
margin: 0;
padding: 0;
clear:both;
font-size: 1px;
}
/* Css propre au theme */
#menu {
width: 100%;
height: 40px;
background-color: #000;
}
#navigation {
margin-left: auto; /* pour centrer le menu */
margin-right: auto; /* pour centrer le menu */
width: 1105px;
}
#navigation ul {
list-style-type:none;
}
#navigation li {
float:left; /*pour IE*/
}
#navigation ul li a {
display:block;
float:left;
width:221px;
line-height:40px; /*hauteur de l'image de fond*/
background:black url(images/onglet.png) no-repeat top left;
color:#000;
text-transform: uppercase;
font-weight: bold;
text-decoration:none;
text-align:center;
}
#navigation ul li a:hover {
background:black url(images/onglet.png) no-repeat top right;
}
#navigation #current a {
background:black url(images/onglet.png) no-repeat top right;
}
#navigationGauche ul {
padding:0;
margin:0;
list-style-type:none;
}
#navigationGauche li {
padding:0;
margin:0;
}
#navigationGauche ul li a {
display:block;
padding-left: 30px;
line-height: 37px; /*hauteur de l'image de fond*/
background: url(images/ongletGauche.png) no-repeat top left;
color:#000;
text-transform: uppercase;
font-weight: bold;
text-decoration:none;
}
#navigationGauche ul li a:hover {
background: url(images/ongletGauche.png) no-repeat bottom left;
}
#navigationGauche #current a {
background: url(images/ongletGauche.png) no-repeat bottom left;
}
#sidebar1 h3 {
margin: 0 0 0 15px;
width: 200px;
height: 111px;
text-indent: -50000px;
background: url(images/logoPEK.png) no-repeat center;
}
#news {
margin: 15px auto;
padding-left: 5px;
padding-right: 5px;
width: 230px;
min-height: 200px;
background-color: #fff;
}
#news h1 {
color:#000;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
text-align:center;
}
#news h2 {
color:#000;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
text-align: left;
}
#news p {
font-size: 10px;
text-align: justify;
}
#video {
margin: 15px auto;
width: 240px;
min-height: 200px;
background-color: #FFFFFF;
}
#navigationDroite {
margin-top: 15px;
margin-left: 5px;
}
#navigationDroite ul {
list-style-type:none;
}
#navigationDroite ul li a {
display:block;
width:240px;
line-height:27px; /*hauteur de l'image de fond*/
background:black url(images/ongletDroite.png) no-repeat top left;
color:#000;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
text-decoration:none;
text-align:center;
}
#navigationDroite ul li a:hover {
background: url(images/ongletDroite.png) no-repeat top right;
}
#navigationDroite #current a {
background: url(images/ongletDroite.png) no-repeat top right;
}
#extra {
width: 100%;
margin-top: 10px;
}
#extra ul {
list-style-type: none;
}
#extra li {
float:left; /*pour IE*/
}
#extra ul li a {
display: block;
float: left;
padding-left: 20px;
line-height: 15px;
color:#000;
text-transform: uppercase;
font-style: italic;
font-size: 10px;
text-align:center;
text-decoration: none;
}
#extra #cubeJaune a {
background: url(images/cubeJaune.png) no-repeat top left;
}
#extra #cubeRose a {
margin-left: 10px;
background: url(images/cubeRose.png) no-repeat top left;
}
#filDeLeau {
margin-top: 10px;
}
#filDeLeau ul {
list-style-type: none;
}
#filDeLeau li {
margin: 0 10px 0 0;
float:left; /*pour IE*/
background: url(images/puce.png) no-repeat center left;
}
#filDeLeau ul li {
display: block;
float: left;
padding-left: 20px;
color:#000;
text-transform: uppercase;
font-style: italic;
font-size: 10px;
text-align:center;
}
#filDeLeau ul li a {
display: block;
float: left;
color:#000;
text-transform: uppercase;
font-style: italic;
font-size: 10px;
text-align:center;
text-decoration: none;
}
#sabre {
margin: 0 auto;
padding-left: 300px;
padding-bottom: 18px;
line-height: 52px;
width: 400px;
background: url(images/sabre.png) no-repeat center left;
text-align: left;
color:#000;
text-transform: uppercase;
font-style: italic;
font-weight: bold;
font-size: 1.3em;
}
</style>
<!--[if IE]>
<style type="text/css">
#mainContent {
margin: 0 16%;
zoom: 1;
}
</style>
<![endif]-->
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.droppy.js"></script>
<script type="text/javascript">
/* $(function() {
$('#nav').droppy();
}); */
</script>
</head>
<body>
<div id="main">
<div id="header">
<img src="images/bando.png" alt="Paris Energie Karaté" />
</div>
<div id="menu">
<div id="navigation">
<ul>
<li><a href="" title="Karaté">Karaté</a></li>
<li id="current"><a href="" title="Karaté Fitness">Karaté Fitness</a><li>
<li><a href="" title="Self-Défense">Self-Défense</a></li>
<li><a href="" title="Pôle Bien-être">Pôle Bien-être</a></li>
<li><a href="" title="Faites une recherche sur le site">Recherche</a></li>
</ul>
</div>
</div>
<div id="container">
<div id="sidebar1">
<div id="navigationGauche">
<ul>
<li><a href="" title="">Présentation</a></li>
<li><a href="" title="">Dojo</a></li>
<li ><a href="" title="">Horaires</a></li>
<li id="current"><a href="" title="">Tarifs</a></li>
<li><a href="" title="">Dossier d'inscription</a></li>
<li><a href="" title="">Recrutement</a></li>
<li><a href="" title="">Presse</a></li>
<li><a href="" title="">Liens</a></li>
<li><a href="" title="">Contact</a></li>
</ul>
</div>
<h3 id="logo">Paris Energie Karaté</h3>
<!-- fin de #sidebar1 --></div>
<div id="sidebar2">
<div id="news">
<h1>Dernières infos</h1>
<h2>News 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus ....</p>
<hr />
<h2>News 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis.</p>
</div>
<div id="video">
</div>
<div id="navigationDroite">
<ul>
<li><a href="" title="">Séjours et stages</a></li>
<li id="current"><a href="" title="">Cours particuliers et stage</a></li>
<li><a href="" title="">Histoire du Karaté</a></li>
</ul>
</div>
<!-- fin de #sidebar2 --></div>
<div id="mainContent">
<div id="extra">
<ul>
<li id="cubeJaune"><a href="" title="Nous écrire">Nous écrire</a></li>
<li id="cubeRose"><a href="" title="Liste de diffusion">Liste de diffusion</a></li>
</ul>
</div>
<br class="clearfloat" />
<div id="filDeLeau">
<ul>
<li><a href="" title="Revenir à l'accueil">Accueil</a></li>
<li>Karaté fitness</li>
</ul>
</div>
<br class="clearfloat" />
<h1 id="sabre">Cours de Karaté Fitness</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
<h2>en-tête de niveau H2 </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- fin de #mainContent --></div>
<br class="clearfloat" />
<!-- fin de container --></div>
<div id="footer">
<div id="footerContent">
</div>
</div>
</body>
</html>
Merci par avance de votre aide ....
Modifié par Hotfirenet (18 Jun 2009 - 09:58)
