bonjour,
je suis un débutant en css et actuellement je suis en train de développer un site web d'informations et de procédures qui sera accessible uniquement via intranet pour une entreprise en HTML/CSS combiné à du PHP.

le site en question possède un menu horizontal ayant un niveau . le problème est que lorsque je survol l'élément du menu qui possède le niveau,il provoque le déplacement du paragraphe qui se situe au niveau de la balise <body> qui lui et un paragraphe.
j'ai essayé a maintes reprises de remédier a ce problème mais en vain.
voilà, j'aimerais bien avoir une solution s'il vous plaît et merci d'avance.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>DANONE INTRANET</title>	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" media="screen" type="text/css" href="monstyle.css" />
    <style type="text/css">
<!--
.style4 {color: #000000}
.style6 {color: #333333}
-->
    </style>
</head>
<body>

<div class="banniere">
  <p><img src="../../Documents/mon site 1/Danone.jpg" alt="Logo groupe d'ANONE" title="Logo DANONE" width="206" height="93" /></a> DANONE INTRANET <img src="../../Documents/mon site 1/dan.jpg" alt="Bienvenue sur mon site" title="Bienvenue sur mon site" width="229" height="123" /></p>
</div>

<ul id="menuDeroulant">
	 <li>
  		<a href="#">Accueil</a>	</li>
    <li>
    	<a href="#">Espaces RH</a></li>
  <li><a href="#">Départements</a>
  	<ul class="sousMenu">
   		<li><a href="#">Energies</a></li>
  		 <li><a href="#">Finances</a></li>
  			 <li><a href="#">Ressources Humaines</a></li>
 			  <li><a href="#">Travaux Neufs</a></li>
 				  <li><a href="#">Maintenance</a></li>
  </ul>
  </li>
   <li>
    	<a href="#">Procedures</a></li>
    <li>
    	<a href="#">IT Pratiques</a>    </li>
</ul>

<div class="corps"> 
  <p>&nbsp;</p>
  <p>Bonjour,    </p>
  <p>Ce site web est un espace réservé à l'entreprise DANONE. ( ou bien aux users)</p>
  <p> Il met en avant les différentes structures et Département se trouvant au sein de la firme. </p>
  <p>Une rubrique baptisée IT Pratiques, regorge d'informations et astuces en informatiques accessiblement aisées et qui vous simplifieront les pratiques quotidiennes. ( Archivages des données, Lecture des fichiers PDF , etc.)   </p>
  <p>Quant à la rubrique Procedures, elle donne un canevas d'ordre informationnel qui systématise l’organisation et la politique de DANONE dans le but d’atteindre certains objectifs.</p>
</div><div class="pied_de_page">  
  <p>	<span class="style4"><a href="index.html">Accueil</a> <span class="style6">I</span> <a href="index.html">Espaces RH</a> <span class="style6">I</span> <a href="index.html">Structures et Départements</a> <span class="style6">I</span> <a href="index.html">Procedures</a> <span class="style6">I</span> <a href="index.html">IT Pratiques</a></span></p>
  <p>	Copyright &#169; DANONE ALGERIE  2010.</p>
</div>

</body>
</html>

------------------------------------------------------------------------------------------------------


html {
font-size:100%;
background:#72746b;
margin:0;
padding:0
}

body {
font-family:Arial, Helvetica, sans-serif;
background-color:#fff;
width:800px;
height:auto;
margin:auto;
padding:0
}

.banniere img {
	border:none;
	margin:0;
	position:relative;
	top: 10px;
	overflow: auto;
}

.banniere {
	Color:#0033FF;
	font-size:2em;
	background-color: #FFFFFF;
}

/* Espace réserver au menu horrizontal */
.topmenu {
	font-size:.8em;
	background-image:url(test.png);
	width:800px;
	height:50px;
	margin:0;
	padding:10;
}

.topmenu ul{
	list-style:none;
	text-align:center;
	margin:0;
	padding-top: 20px;
	padding-right: 5px;
	padding-bottom: 10px;
	padding-left: 0px;
}

.topmenu li{
display:inline;
padding:px 10px
}
.message
{
	text-align:center;
}

.topmenu a {
color:#000000;
text-decoration:none;
padding:0px 10px
}

.topmenu a:hover {
color:#FFFFFF;
/*text-decoration:underline;*//*penser a modifier le soulignement des liens lors du survol*/
/*background-color:#000;*/
}
.corps {
	font-size:.8em;
	text-align:justify;
	min-height:550px;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 10px;
}

.pied_de_page a:hover
{
color:#FFFFFF;
text-decoration:none;
}
.pied_de_page {
	font-size:small;
	color:#000000;
	text-align:center;
	background-color:#3399FF;
	background-image:url(piedpage.png);
	padding:10px 0
}
.pied_de_page a
{
color:#000000;
text-decoration:none;
margin:10px;
}
#menuDeroulant
{
 width: 644px;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant .sousMenu
{
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 background-image:url(test.png);
}
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant li
{
	float: left;
	width: 120px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: 25px;
	color: #FFF;
	background: #3B4E77;
	margin: 0;
	border-right: 1px solid #fff;
	text-decoration: none;
	padding-top: 4px;
	padding-right: 8px;
	padding-bottom: 4px;
	padding-left: 8px;
}
#menuDeroulant li a:hover {
	background-image: url(topmenu.png);
}
#menuDeroulant li a:active {
	background-color: #FFFFFF;
}

#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
 display: block;
 color: #FFF;
 margin: 0;
 border: 0;
 text-decoration: none;
 background: transparent url("fondTR.png") repeat;
}
#menuDeroulant .sousMenu li a:hover
{
 background-image: none;
 background-color:#F2462E;
}
#menuDeroulant .sousMenu li
{
 float: none;
 margin: 0;
 padding: 0;
 border: 0;
 width: 120px;
 border-top: 1px solid transparent;
 border-right: 1px solid transparent;
}
#menuDeroulant .sousMenu
{
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
}
#menuDeroulant li:hover > .sousMenu { display: block; }

Modifié par brainsplit (09 Sep 2010 - 12:32)

Borak

5 Sep 2010 à 09:27

Bonjour,

Bon, pas trop le courage de regarder tout le code, alors je résume :

Si tu veux que ton menu déroulant ("sousMenu") ne décale pas le reste du document, il faut le sortir du flux.

Donc, il faut que tu le positionne en Absolu (Par contre pour bien le positionner, il te faudra peut-être positionner un niveau supérieur en Relatif, a voir dans ton cas).
Modifié par Borak (05 Sep 2010 - 09:28)

brainsplit

5 Sep 2010 à 10:11

ça y est ça marche. J'ai fait comme vous me l'avez indiquez.
dans .sousmenu j'ai ajouté la propriété position:absolute;
Je vous remercie.
Modifié par brainsplit (05 Sep 2010 - 10:55)

Mikachu

5 Sep 2010 à 11:27

Salut et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Et pense à éditer ton message initial (bouton "éditer" en haut à droite de celui-ci) pour modifier le titre et ajouter que ce sujet est résolu. Smiley cligne

Bonne continuation Smiley smile

Modifié par Mikachu (05 Sep 2010 - 11:28)

brainsplit

9 Sep 2010 à 12:38

bonjour a tous.
j'ai un autre problème au niveau du menu et cette fois-ci le "sous-menu" ne s'affiche pas sous internet explorer, je l'ai testé sous firefox et safari et ça marche. je travaille sous mac.
je ne sais pas comment faire pour l'afficher. voilà j'aimerais bien avoir votre aide svp.
merci.

keyraw

9 Sep 2010 à 14:09

C'est quelle version d'IE ?

brainsplit

17 Sep 2010 à 15:41

bonjour, la version d'IE est 6. merci

Sujet clos

CSS et mise en forme, CSS3

Menu