[roll over avec une seule image] Intégration

Bonjour,

Grâce à ce super tutoriel, j'ai bien compris la méthode, qui fonctionne très bien dans ma page menu.php, ne contenant que le menu.

En fait j'ai un soucis d'intégration : en faisant un include "menu.php" dans ma page principale, le menu ne fonctionne plus correctement : Pour firefox, la "zone active" est alors la première ligne de pixels au lieu d'être l'ensemble de la boîte formant le bouton... Et sous IE7, c'est la ligne de pixels du bas qui est active.

Je ne comprends pas...

Voici le CSS du menu :

@charset "utf-8";
/* CSS Document */
	
#navcontainer
{
	padding-top:20px;
	height:50px;
	margin-left:50px;
	background-color:#000000;
	width:500px;
	z-index:1;
}

ul#menu
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
 	font: "Trebuchet MS";
}

ul#menu li
{
	float:left;
}
li a
{
	display: block ;
	width: 100px ;
	height: 50px ;
	text-decoration: none ;
}

/* ENGLISH - ENG */
li#newsblog-eng a
{
	background: url(images/bouton_newsblog_eng.png) no-repeat 0 -50px ;
}
li#newsblog-eng a:hover
{
	background: url(images/bouton_newsblog_eng.png) no-repeat 0 0;
}
li#activities-eng a
{
	background: url(images/bouton_activities_eng.png) no-repeat 0 -50px ;
}
li#activities-eng a:hover
{
	background: url(images/bouton_activities_eng.png) no-repeat 0 0;
}
li#profiles-eng a
{
	background: url(images/bouton_profiles_eng.png) no-repeat 0 -50px ;
}
li#profiles-eng a:hover
{
	background: url(images/bouton_profiles_eng.png) no-repeat 0 0;
}
li#contact-eng a
{
	background: url(images/bouton_contact_eng.png) no-repeat 0 -50px ;
}
li#contact-eng a:hover
{
	background: url(images/bouton_contact_eng.png) no-repeat 0 0;
}

et l'HTML de la page menu.php :

<link href="menu.css" rel="stylesheet" type="text/css" />
<div id="navcontainer">

	<ul id="menu">
	<li id="newsblog-eng"><a href="blog.php"></a></li>
	<li id="activities-eng"><a href="activities.php"></a></li>
	<li id="profiles-eng"><a href="profiles.php"></a></li>
	<li id="contact-eng"><a href="contact.php"></a></li>
	</ul>
	
</div>

Donc, en soi, le code ci-dessus fonctionne.
Mais ça foire dans l'intégration de la page principale

<div id="conteneur">
  	<div id="centre" style="background-image:url(images/neige.jpg)">	
  	</div>
	  
	<div id="pied">
	  	<h3 class="titrerubrique">newsBlog</h3>
		<?php include "menu.php"; ?>
	</div>

</div>

dont le CSS est :

@charset "utf-8";
/* CSS Document */

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	margin: 0;
	padding: 0;
	background-color:#000000;
}

#conteneur {
	position: absolute;
	width: 100%;
	top:50%;
	margin-top:-250px;
	background-color:black;
}
#centre {
background-color:#000000;
background-repeat:no-repeat;
height: 400px;
}


#pied {
height: 50px;
background-color: #000000;
}
h3 {
	font-family: 'Trebuchet MS', verdana, times, sans-serif;
	font-size:1.7em;
	color:white;
}

Il y a sans doute un conflit dans les margin, mais je suis un peu perdu...

Si c'est évident pour vous, merci de m'expliquer
Modifié par yakou32 (31 Jul 2006 - 20:13)