28220 sujets

CSS et mise en forme, CSS3

Chevauchement de div sous FireFox

Bonjour,

Je suis développeur en informatique mais débutante et je débute aussi en css et Xhtml.
voici ce que je veux : un menu sur la gauche avec à coté une barre de séparation (image).
J'ai donc créé un div menu avec un float : left et un div hr (barre de séparation) avec un float left également pour qu'il se positionne à côté.
Ca fonctionne bien sous IE mais sous Firefox, mon image barre de séparation se trouve sur le div menu ! étrange non ? Smiley confus

plus simple en image :

FireFox :
http://mysuperform.free.fr/test/vueFF.jpg

Internet Explorer :
http://mysuperform.free.fr/test/vueIE.jpg

Source : 


<div id="container">
     <!-- début Menu-->
	<div id="menu">
               <ul>
                 <li><a href="#" >Accueil</a></li>
                 <li><a href="bacterie.html">La bactérie</a> </li>
                 <li><a href="risques.html">Les risques</a></li> 
                 <li><a href="legislation.html">La législation </a></li>
                 <li><a href="solution.html">Notre solution</a></li>
                 <li><a href="contacte.php">Nous contacter</a></li>
                 <li><a href="#">Liens connexes</a></li>
              </ul> 
	<img id="img" src="images/img_menu.jpg" alt="eau"    width="230" height="153" />
      </div>
      <!-- Fin Menu --> 
     <!-- barre de séparation -->
    <div id="hr"><img src="images/hr.jpg" alt="séparation"/> </div>
</div>


style CSS : 

#container {
             background-color:#FFFFFF;
	width: 955px;
	height:auto;
	padding:0px;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;[#black]
	margin-bottom:0px;
	text-align:left;
	left:50%;
	top:50%;
	text-align:center;
            }
#menu {
       width:200px;
       float: left;
       margin : 40px 8px 0px -15px;
       
      }

#menu ul {
          text-align:left;
           margin-top : 20px;
          width:205px;
          border-right: 0 px dashed #000033;
          line-height: 25px; /* taille cellule */
	 }

#menu li {
	border-bottom: 1px dashed #757678;
	padding-top: 10px;
	list-style: none;
	color: #EAAE40;
           }

#menu a{
	display: block;
	text-decoration:none;
	color: #EAAE40;
	padding-left: 0px;
	width:205px;
	font-family:"Century Gothic",arial;
	font-size:14px;	
}

#hr {
	margin-left:0px;
	display:inline;
	float : left;
	margin-top:70px;
}


Si quelqu'un voit d'où vient le problème, car là je suis totalement perdue...
Smiley eek

merci d'avance
ok...

J'ai mis 
width = auto;
dans mon id menu, et ça fonctionne, mais est ce qu'il fallait faire où bien c'est du bidouillage ?

Merci.
Heuu, désolé, j'ai répondu un peut rapidement.
En fait, comme tu a du le comprendre, "width" désigne selon le modèle standard la zone du contenu lui même, mais selon le modèle Microsoft, désigne la zone du contenu + la zone de "remplissage" (padding) + la largeur de la bordure.

On voit donc qu'avec les padding et les bordures à 0, on retombe sur nos pieds et le problème ne se pose pas.

Il semble que ce ne soit pas ici ton problème.

Il vaut mieux définir la largeur d'un élément flottant, sans quoi le comportement est indéterminé.

Deux choses m'intriguent. Ca : 
left:50%;
top:50%;
Est ce que ca sert ? ton #container occupe il un quart de la page ?
margin : 40px 8px 0px [b]-15px[/b];

pourquoi une margé négative ici ?


Quelque chose qui, il me semble, devrait fonctionner :
#menu {
width:200px;
float: left;
}
#hr {
float : left;
width: 10px; /* largeur de l'image */
}
1.
a écrit :
Deux choses m'intriguent. Ca :
left:50%;
top:50%;


C'était pour le centrer, mais c'est vrai que ça ne sert à rien, puisque j'utilise les margin-left et margin-right : auto;

2.
a écrit :
margin : 40px 8px 0px -15px;
pourquoi une margé négative ici ?


Parce que le menu se trouvait trop sur la droite, je voulais donc le ramener sur la gauche pour l'aligner sur la gauche...

3. Merci de ton aide, mais le résultat reste le même...il chevauche toujours le div menu ... ce qui fonctionne c'est de mettre menu en width:auto; Smiley ohwell
Sujet clos
Aller à