Menu

Problème menu déroulant horizontal [Résolu/Fermé]

Messages postés
51
Date d'inscription
samedi 1 septembre 2007
Statut
Membre
Dernière intervention
11 mars 2013
- - Dernière réponse : RAD ZONE
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
- 8 janv. 2012 à 00:14
Bonjour,

Pour mes études, je dois réaliser un site web contenant un menu déroulant horizontal mais le problème est que les sous-menu ne s'affichent pas, ils sont "bloqués" par le contenu de la page.

Le problème ne vient pas du menu mais du fait qu'il ne l'affiche pas au dessus du contenu de la page. D'ailleurs lorsque j'insère un margin-bottom, on voit que le menu fonctionne.

Quelqu'un aurait une solution? Merci

Code CSS:
		

body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: small;
background-image: url("../images/background_tile.png");
background-repeat: repeat;	
}

#HorizontalMenu {
background: gray;
clear: both;
float: left;
width: 100%;
}
#HorizontalMenu ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#HorizontalMenu li {
float: left;
position: relative;
}
#HorizontalMenu a {
background:gray;
color: white;
display: block;
line-height: 30px;
padding: 0 10px;
text-decoration: none;
width:120px;
}

#HorizontalMenu ul ul {
display: none;
float: left;
position: absolute;
top: 30px;
left: 0;
width: 188px;			
}
#HorizontalMenu ul ul a {
background: gray;
color: white;
display: block;
line-height: 30px;
padding: 0 10px;
text-decoration: none;
line-height: 30px;
padding: 0 10px;
width: 168px;
border-top : 1px solid #fff;
}
#HorizontalMenu li:hover a,
#HorizontalMenu ul ul :hover a {
background: white;
color: gray;
}
#HorizontalMenu li:hover a {
background: gray; 
color: white;
}
#HorizontalMenu ul li:hover ul {
display: block;
					}

	<div id="HorizontalMenu">
	
		<ul class="horizontal">
			<li><a href="index.html">Accueil</a></li>
			<li><a href="histoire/index.html">Histoire</a></li>
			<li><a href="modeles/index.html">Modèles</a>
			<ul>
			<li><a href="serie1/index.html">Série 1</a></li>
			<li><a href="serie3/index.html">Série 3</a></li>
			<li><a href="serie5/index.html">Série 5</a></li>
			<li><a href="serie6/index.html">Série 6</a></li>
			<li><a href="serie7/index.html">Série 7</a></li>
			<li><a href="serie8/index.html">Série 8</a></li>
			<li><a href="seriex/index.html">Série X</a></li>
			<li><a href="seriem/index.html">Série M</a></li>
			<li><a href="seriez/index.html">Série Z</a></li>
			</ul>
			</li>
			<li><a href="galerie/index.html">Galerie photo</a></li>
			<li><a href="contact/index.html">Contact</a></li>
			<li><a href="liens/index.html">Liens</a></li>
		</ul>
		
	</div>




Afficher la suite 

10 réponses

Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1282
0
Merci
Salut
Le problème ne vient pas du menu mais du fait qu'il ne l'affiche pas au dessus du contenu de la page

c est pour cela que tu nous met que le menu :-)))))))))

? comme ca , sans voir le reste de la page ??

peut etre un probleme de z-index ?

si tu met par exemple
#HorizontalMenu {
z-index :100;
background: gray;
clear: both;
float: left;
width: 100%;
}


passe t il au dessus ?

ou alors il faut voir le reste des css !
Messages postés
51
Date d'inscription
samedi 1 septembre 2007
Statut
Membre
Dernière intervention
11 mars 2013
0
Merci
Non, ca ne marche pas :/
Messages postés
51
Date d'inscription
samedi 1 septembre 2007
Statut
Membre
Dernière intervention
11 mars 2013
0
Merci
@import url("layout.css");
body {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: small;
	background-image: url("../images/background_tile.png");
	background-repeat: repeat;
	
}
#contener {
width:1000px;
}
/** Menu Horizontal **/
#HorizontalMenu {
z-index :100;
background: gray;
clear: both;
float: left;
width: 100%;
}
		#HorizontalMenu ul {
			list-style: none;
			margin: 0;
			padding-left: 0;
			
		}
		#HorizontalMenu li {
			float: left;
			position: relative;
		
			

		}
		#HorizontalMenu a {
			background:gray;
			color: white;
			display: block;
			line-height: 30px;
			padding: 0 10px;
			text-decoration: none;
			width:120px;
		}

		#HorizontalMenu ul ul {
			display: none;
			float: left;
			position: absolute;
			top: 30px;
			left: 0;
			width: 188px;
			
		}

		#HorizontalMenu ul ul a {
			background: gray;
			color: white;
			display: block;
			line-height: 30px;
			padding: 0 10px;
			text-decoration: none;
			line-height: 30px;
			padding: 0 10px;
			width: 168px;
			border-top : 1px solid #fff;
		}

		#HorizontalMenu li:hover a{
	background: gray;
	color: white;
}
		#HorizontalMenu ul ul :hover a {
			background: gray;
			color: white;
		}

		#HorizontalMenu li:hover a {
			background: white; 
			color: gray;
		}

		#HorizontalMenu ul li:hover ul {
			display: block;
					}

#content {
width:990px;
}
#container {
	border-right: 2px solid #595959;
	border-bottom: 2px solid #595959;
	border-left: 2px solid #595959;
	background-color: #fff;
	width: 1000px;
	
}
#masthead {
	text-align: left;
	background-color: #fff;
	background-image: url("../images/masthead_image.jpg");
	background-repeat: no-repeat;
	height: 292px;
	width: 1000px;

}
#navigation {
	border-top: 1px solid #808080;
	border-bottom: 1px solid #808080;
	background-color: #dbf;
}
html>body #navigation {
	overflow: hidden;
}
#column_l {
	width: 367px;
	padding: 15px;
	background-color: #fff;
}
html>body #column_l {
	width: 370px;
	padding: 0 15px;
	background-color: #fff;
}
#column_r {
	width: 217px;
	padding: 15px 10px;
	background-color: #fff;
}
html>body #column_r {
	width: 220px;
	padding: 15px 10px;
	background-color: #fff;
}
#content {
	background-color: #fff;
}
#footer {
	text-align: center;
	padding-bottom: 10px;
}
html>body #footer {
	text-align: center;
	padding-bottom: 0;
}
/* Titre */
#masthead h1 {
	font-weight: bold;
	font-style: italic;
	color: #fff;
	margin-bottom: 0;
	margin-left: 0.5em;
}
#masthead h3 {
	font-weight: bold;
	font-style: italic;
	color: #fff;
	margin-top: 0;
	margin-left: 1em;
}
/* Navigation */
#navigation ul {
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
#navigation li {
	float: left;
}
#navigation a {
	font-weight: bold;
	text-decoration: none;
	color: #000;
	display: block;
	padding: 5px;
	border: 1px solid #dbf;
}
#navigation a:hover {
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	border: 1px solid #b9d;
	background-color: #b9d;
}
/* Colonne de droite */
#column_r img {
	border: 1px solid #808080;
}
/* Typographie du site */
h1 {
	font-size: xx-large;
	color: #000;
}
h2 {
	font-size: x-large;
	font-style: italic;
	color: #000;
}
h3 {
	font-size: large;
	font-style: italic;
	color: #000;
}
h4 {
	font-size: medium;
	font-style: italic;
	color: #000;
}
h5 {
	font-size: x-small;
	font-style: italic;
	color: #000;
}
h6 {
	font-size: xx-small;
	font-style: italic;
	color: #000;
}
/* Pied de page */
#footer p {
	font-size: x-small;
	color: #000;
}
/* Liens */
a {
	color: #a27;
	text-decoration: underline;
}
a:hover {
	color: #f72;
	text-decoration: none;
}
.style_bold {
	font-weight: bold;
}
.style_italic {
	font-style: italic;
}

Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1282
0
Merci
enleve le #navigation sur le CSS et dis moi !

html>body #navigation {
	overflow: hidden;
}


donc
html>body  {
	overflow: hidden;
}


a+
Messages postés
51
Date d'inscription
samedi 1 septembre 2007
Statut
Membre
Dernière intervention
11 mars 2013
0
Merci
Nan, ca ne fonctionne toujours pas :/
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1282
0
Merci
tu n as pas une page en ligne , parce que moi si le menu est insere dans la div navigation et que tu enleve le hidden ca passe !?
mais bon je ne suis pas sur de ton arborescence dans les div !;-)
voila ce que j ai fais , la ca passe , mais decommente juste le #navigation et ca passe plus !
<!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="en" lang="en">
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
/*<![CDATA[*/
    body {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: small;
    background-image: url("../images/background_tile.png");
    background-repeat: repeat;
    }

    #contener {
    width: 1000px;
    }
    /** Menu Horizontal **/

    #HorizontalMenu {
    background: #808080;
    clear: both;
    float: left;
    width: 100%;
    }

    #HorizontalMenu ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    }

    #HorizontalMenu li {
    float: left;
    position: relative;
    }

    #HorizontalMenu a {
    background: #808080;
    color: #FFF;
    display: block;
    line-height: 30px;
    padding: 0 10px;
    text-decoration: none;
    width: 120px;
    }

    #HorizontalMenu ul ul {
    display: none;
    float: left;
    position: absolute;
    top: 30px;
    left: 0;
    width: 188px;
    }

    #HorizontalMenu ul ul a {
    background: #808080;
    color: #FFF;
    display: block;
    line-height: 30px;
    padding: 0 10px;
    text-decoration: none;
    line-height: 30px;
    padding: 0 10px;
    width: 168px;
    border-top: 1px solid #fff;
    }

    #HorizontalMenu li:hover a{
    background: #808080;
    color: #FFF;
    }

    #HorizontalMenu ul ul:hover a {
    background: #808080;
    color: #FFF;
    }

    #HorizontalMenu li:hover a {
    background: #FFF;
    color: #808080;
    }

    #HorizontalMenu ul li:hover ul {
    display: block;
    }

    #content {
    width: 990px;
    }

    #container {
    border-right: 2px solid #595959;
    border-bottom: 2px solid #595959;
    border-left: 2px solid #595959;
    background-color: #fff;
    width: 1000px;
    }

    #masthead {
    text-align: left;
    background-color: #fff;
    background-image: url("../images/masthead_image.jpg");
    background-repeat: no-repeat;
    height: 292px;
    width: 1000px;
    }

    #navigation {
    border-top: 1px solid #808080;
    border-bottom: 1px solid #808080;
    background-color: #dbf;
    }

    html > body/* #navigation */{       /** ICI DECOMMENTE  **/
    overflow: hidden;
    }

    #column_l {
    width: 367px;
    padding: 15px;
    background-color: #fff;
    }

    html > body #column_l {
    width: 370px;
    padding: 0 15px;
    background-color: #fff;
    }

    #column_r {
    width: 217px;
    padding: 15px 10px;
    background-color: #fff;
    }

    html > body #column_r {
    width: 220px;
    padding: 15px 10px;
    background-color: #fff;
    }

    #content {
    background-color: #fff;
    }

    #footer {
    text-align: center;
    padding-bottom: 10px;
    }

    html > body #footer {
    text-align: center;
    padding-bottom: 0;
    }
    /* Titre */

    #masthead h1 {
    font-weight: bold;
    font-style: italic;
    color: #fff;
    margin-bottom: 0;
    margin-left: 0.5em;
    }

    #masthead h3 {
    font-weight: bold;
    font-style: italic;
    color: #fff;
    margin-top: 0;
    margin-left: 1em;
    }
    /* Navigation */

    #navigation ul {
    list-style-type: none;
    width: 100%;
    margin: 0;
    padding: 0;
    }

    #navigation li {
    float: left;
    }

    #navigation a {
    font-weight: bold;
    text-decoration: none;
    color: #000;
    display: block;
    padding: 5px;
    border: 1px solid #dbf;
    }

    #navigation a:hover {
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    border: 1px solid #b9d;
    background-color: #b9d;
    }
    /* Colonne de droite */

    #column_r img {
    border: 1px solid #808080;
    }
    /* Typographie du site */

    h1 {
    font-size: xx-large;
    color: #000;
    }

    h2 {
    font-size: x-large;
    font-style: italic;
    color: #000;
    }

    h3 {
    font-size: large;
    font-style: italic;
    color: #000;
    }

    h4 {
    font-size: medium;
    font-style: italic;
    color: #000;
    }

    h5 {
    font-size: x-small;
    font-style: italic;
    color: #000;
    }

    h6 {
    font-size: xx-small;
    font-style: italic;
    color: #000;
    }
    /* Pied de page */

    #footer p {
    font-size: x-small;
    color: #000;
    }
    /* Liens */

    a {
    color: #a27;
    text-decoration: underline;
    }

    a:hover {
    color: #f72;
    text-decoration: none;
    }

    .style_bold {
    font-weight: bold;
    }

    .style_italic {
    font-style: italic;
    }
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="masthead"></div>
    <div id="container">
      <div id="navigation">
        <div id="HorizontalMenu">
          <ul class="horizontal">
            <li>
              <a href="index.html">Accueil</a>
            </li>
            <li>
              <a href="histoire/index.html">Histoire</a>
            </li>
            <li>
              <a href="modeles/index.html">Modèles</a>
              <ul>
                <li>
                  <a href="serie1/index.html">Série 1</a>
                </li>
                <li>
                  <a href="serie3/index.html">Série 3</a>
                </li>
                <li>
                  <a href="serie5/index.html">Série 5</a>
                </li>
                <li>
                  <a href="serie6/index.html">Série 6</a>
                </li>
                <li>
                  <a href="serie7/index.html">Série 7</a>
                </li>
                <li>
                  <a href="serie8/index.html">Série 8</a>
                </li>
                <li>
                  <a href="seriex/index.html">Série X</a>
                </li>
                <li>
                  <a href="seriem/index.html">Série M</a>
                </li>
                <li>
                  <a href="seriez/index.html">Série Z</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="galerie/index.html">Galerie photo</a>
            </li>
            <li>
              <a href="contact/index.html">Contact</a>
            </li>
            <li>
              <a href="liens/index.html">Liens</a>
            </li>
          </ul>
        </div>
      </div>
      <div id="content">
        <div id="column_l"></div>
        <div id="column_r"></div>
      </div>
      <div id="footer"></div>
    </div>
  </body>
</html>



Messages postés
51
Date d'inscription
samedi 1 septembre 2007
Statut
Membre
Dernière intervention
11 mars 2013
0
Merci
Ca fonctionne mais qu'est ce que tu as modifié d'autre dans le CSS?
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1282
0
Merci
rien ! ;-)) j ai juste enleve le overflow: hidden; sur la #navigation

♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
Messages postés
51
Date d'inscription
samedi 1 septembre 2007
Statut
Membre
Dernière intervention
11 mars 2013
0
Merci
Le problème est qu'avec ce nouveau code, mon site est aligné à gauche et mes zones de textes so tn'importe comment :/
noctua
Messages postés
51
Date d'inscription
samedi 1 septembre 2007
Statut
Membre
Dernière intervention
11 mars 2013
-
Voila mon html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> 

<!-- #BeginTemplate "master.dwt" --> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<!-- #BeginEditable "doctitle" --> 
<title>Bienvenue sur le site de BMW</title> 
<!-- #EndEditable --> 
<link href="styles/style2.css" media="screen" rel="stylesheet" title="CSS" type="text/css" /> 
</head> 

<body> 

<!-- Begin Container --> 
<div id="container"> 
<div id="contener"> 
 <!-- Begin Masthead --> 
 <div id="masthead"> 
  <h1>BMW</h1> 
  <h3>Bayerische Motoren Werke</h3> 
 </div> 
 <!-- End Masthead --> 
 <!-- Begin iMenu --> 
 <div id="HorizontalMenu"> 
  
  <ul class="horizontal"> 
   <li><a href="index.html">Accueil</a></li> 
   <li><a href="histoire/index.html">Histoire</a></li> 
   <li><a href="modeles/index.html">Modèles</a> 
   <ul> 
   <li><a href="serie1/index.html">Série 1</a></li> 
   <li><a href="serie3/index.html">Série 3</a></li> 
   <li><a href="serie5/index.html">Série 5</a></li> 
   <li><a href="serie6/index.html">Série 6</a></li> 
   <li><a href="serie7/index.html">Série 7</a></li> 
   <li><a href="serie8/index.html">Série 8</a></li> 
   <li><a href="seriex/index.html">Série X</a></li> 
   <li><a href="seriem/index.html">Série M</a></li> 
   <li><a href="seriez/index.html">Série Z</a></li> 
   </ul> 
   </li> 
   <li><a href="galerie/index.html">Galerie photo</a></li> 
   <li><a href="contact/index.html">Contact</a></li> 
   <li><a href="liens/index.html">Liens</a></li> 
  </ul> 
   
 </div> 
 <!-- End iMenu --> 
 <!-- Begin Left Column --> 
 <div id="column_l" style="left: 0px; top: 0px; width: 613px"> 
  <!-- #BeginEditable "content" --> 
  <h2>La nouvelle Série 1 est sortie!</h2> 
  <p>Après une première génération couronnée de succès, pas question pour BMW de chambouler trop en profondeur les traits de sa Série 1. Pourtant, sans en avoir l'air, cette seconde génération change tout pour espérer gravir les mêmes marches de la réussite que sa devancière. 
  
La première génération de la «petite» BMW s'est ainsi écoulée à plus d'un million d'exemplaires, toutes carrosseries confondues (3 et 5 portes, coupé, cabriolet et M). Un chiffre qui devrait continuer à grimper encore au cours des prochains 24 mois au cours desquels les trois dernières variantes continueront leur carrière. 
 Parmi les acheteurs, quelque 70% étaient des nouveaux clients. C'est dire l'importance du modèle. 
</p> 
<p> 
La nouvelle Série 1 inspire donc son style de la désormais ancienne génération, avec un long capot à l'avant et un porte à faux réduit à l'arrière qui lui procurent une allure très dynamique. Les face avant et arrière sont en revanche totalement nouvelles. Et si cette dernière conserve encore un semblant de parenté avec la première Série 1 (bien que certains lui trouvent un faux air de Polo sous cet angle...), l'avant est lui tout à fait inédit, avec des naseaux agrandis et des feux plus originaux. 
  
Mais l'originalité de cette nouvelle mouture, c'est surtout de proposer deux lignées différentes une fois passée la finition de base. La gent féminine et les plus branchés des acheteurs pourront ainsi acquérir la finition Urban, qui propose un large panel d'attributs et accessoires originaux (en témoignent les jantes, rétroviseurs et inserts blancs de notre voiture d'essai), tandis que les plus sportifs s'attacheront les services de la finition Sport, qui devrait séduire pas mal de jeunes mâles par son côté viril. Et si cela n'était pas encore suffisant, il sera possible d'ici quelques mois d'opter pour une M Package virilisant encore plus les traits de la compacte. Au total, pas moins de 6.500 combinaisons seraient envisageables ! 

</p> 
<center> 
<img "alt="" height="366" src="images/nouvelleserie2.jpg" width="550" /></center> 
  <!-- #EndEditable --></div> 
 <!-- End Left Column --> 
 <!-- Begin Right Column --> 
 <div id="column_r"> 
  <!-- #BeginEditable "sidebar" --> 
  <img alt="" height="199" src="images/nouvelleserie1.jpg" width="300" /> 
  <object width="300" height="182"><param name="movie" value="http://www.youtube.com/v/qgH7zLg4aaI?version=3&hl=fr_FR&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qgH7zLg4aaI?version=3&hl=fr_FR&rel=0" type="application/x-shockwave-flash" width="300" height="182" allowscriptaccess="always" allowfullscreen="true"></embed></object> 
  <h4><u>Performances :</u></h4> 
  <p><u>Moteur:</u></p> 
  <p><u>Essence:</u></p> 
4 cyl. 1.6 L<br/> 
4 cyl. 2.0 L<br/> 
6 cyl. 3.0 L<br/> 
6 cyl. 3.0 L Biturbo<br/> 
<p><u>Diesel :</u></p> 
4 cyl. 2.0d L<br/> 
4 cyl 2.0d L Biturbo<br/> 
<p><u>Puissance maximale</u></p> 
115 à 306 ch (85 à 225 kW)<br/> 
<p><u>Couple maximal</u></p> 
160 à 400 Nm<br/> 
<p><u>Transmission</u></p> 
Propulsion<br/> 
<p><u>Boîte de vitesses</u></p> 
BVM à 5-6 vitesses<br/> 
BVA à 6 rapports ou Steptronic<br/> 

  <!-- #EndEditable --></div> 
 <!-- End Right Column --> 
 <!-- Begin Footer --> 
 <div id="footer"> 
  <p> 

 <p>COPYRIGHT **********</p> 
  </object>         
  </p> 
 </div> 
 <!-- End Footer --></div></div> 
<!-- End Container --> 

</body> 

<!-- #EndTemplate --> 

</html> 
RAD ZONE
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1282 -
alors ca vient de l import du layout CSS !!

regarde j ai pris ton html ( je n ai rien touche dedans ) !!
et j ai remis TON CSS avec overflow:hidden

et ca fonctionne , donc ca vient bien de l import CSS !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> 

<!-- #BeginTemplate "master.dwt" --> 

<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<!-- #BeginEditable "doctitle" --> 
<title>Bienvenue sur le site de BMW</title> 
<!-- #EndEditable --> 
<style type="text/css"> 
/*<![CDATA[*/ 
  body { 
    font-family: Georgia, "Times New Roman", Times, serif; 
    font-size: small; 
    background-image: url("../images/background_tile.png"); 
    background-repeat: repeat; 
    } 

    #contener { 
    width: 1000px; 
    } 
    /** Menu Horizontal **/ 

    #HorizontalMenu { 
    background: #808080; 
    clear: both; 
    float: left; 
    width: 100%; 
    } 

    #HorizontalMenu ul { 
    list-style: none; 
    margin: 0; 
    padding-left: 0; 
    } 

    #HorizontalMenu li { 
    float: left; 
    position: relative; 
    } 

    #HorizontalMenu a { 
    background: #808080; 
    color: #FFF; 
    display: block; 
    line-height: 30px; 
    padding: 0 10px; 
    text-decoration: none; 
    width: 120px; 
    } 

    #HorizontalMenu ul ul { 
    display: none; 
    float: left; 
    position: absolute; 
    top: 30px; 
    left: 0; 
    width: 188px; 
    } 

    #HorizontalMenu ul ul a { 
    background: #808080; 
    color: #FFF; 
    display: block; 
    line-height: 30px; 
    padding: 0 10px; 
    text-decoration: none; 
    line-height: 30px; 
    padding: 0 10px; 
    width: 168px; 
    border-top: 1px solid #fff; 
    } 

    #HorizontalMenu li:hover a{ 
    background: #808080; 
    color: #FFF; 
    } 

    #HorizontalMenu ul ul:hover a { 
    background: #808080; 
    color: #FFF; 
    } 

    #HorizontalMenu li:hover a { 
    background: #FFF; 
    color: #808080; 
    } 

    #HorizontalMenu ul li:hover ul { 
    display: block; 
    } 

    #content { 
    width: 990px; 
    } 

    #container { 
    border-right: 2px solid #595959; 
    border-bottom: 2px solid #595959; 
    border-left: 2px solid #595959; 
    background-color: #fff; 
    width: 1000px; 
    } 

    #masthead { 
    text-align: left; 
    background-color: #fff; 
    background-image: url("../images/masthead_image.jpg"); 
    background-repeat: no-repeat; 
    height: 292px; 
    width: 1000px; 
    } 

    #navigation { 
    border-top: 1px solid #808080; 
    border-bottom: 1px solid #808080; 
    background-color: #dbf; 
    } 

    html > body  #navigation { 
    overflow: hidden; 
    } 

    #column_l { 
    width: 367px; 
    padding: 15px; 
    background-color: #fff; 
    } 

    html > body #column_l { 
    width: 370px; 
    padding: 0 15px; 
    background-color: #fff; 
    } 

    #column_r { 
    width: 217px; 
    padding: 15px 10px; 
    background-color: #fff; 
    } 

    html > body #column_r { 
    width: 220px; 
    padding: 15px 10px; 
    background-color: #fff; 
    } 

    #content { 
    background-color: #fff; 
    } 

    #footer { 
    text-align: center; 
    padding-bottom: 10px; 
    } 

    html > body #footer { 
    text-align: center; 
    padding-bottom: 0; 
    } 
    /* Titre */ 

    #masthead h1 { 
    font-weight: bold; 
    font-style: italic; 
    color: #fff; 
    margin-bottom: 0; 
    margin-left: 0.5em; 
    } 

    #masthead h3 { 
    font-weight: bold; 
    font-style: italic; 
    color: #fff; 
    margin-top: 0; 
    margin-left: 1em; 
    } 
    /* Navigation */ 

    #navigation ul { 
    list-style-type: none; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    } 

    #navigation li { 
    float: left; 
    } 

    #navigation a { 
    font-weight: bold; 
    text-decoration: none; 
    color: #000; 
    display: block; 
    padding: 5px; 
    border: 1px solid #dbf; 
    } 

    #navigation a:hover { 
    font-weight: bold; 
    text-decoration: none; 
    color: #fff; 
    border: 1px solid #b9d; 
    background-color: #b9d; 
    } 
    /* Colonne de droite */ 

    #column_r img { 
    border: 1px solid #808080; 
    } 
    /* Typographie du site */ 

    h1 { 
    font-size: xx-large; 
    color: #000; 
    } 

    h2 { 
    font-size: x-large; 
    font-style: italic; 
    color: #000; 
    } 

    h3 { 
    font-size: large; 
    font-style: italic; 
    color: #000; 
    } 

    h4 { 
    font-size: medium; 
    font-style: italic; 
    color: #000; 
    } 

    h5 { 
    font-size: x-small; 
    font-style: italic; 
    color: #000; 
    } 

    h6 { 
    font-size: xx-small; 
    font-style: italic; 
    color: #000; 
    } 
    /* Pied de page */ 

    #footer p { 
    font-size: x-small; 
    color: #000; 
    } 
    /* Liens */ 

    a { 
    color: #a27; 
    text-decoration: underline; 
    } 

    a:hover { 
    color: #f72; 
    text-decoration: none; 
    } 

    .style_bold { 
    font-weight: bold; 
    } 

    .style_italic { 
    font-style: italic; 
    } 
/*]]>*/ 
</style></head> 

<body> 

<!-- Begin Container --> 
<div id="container"> 
<div id="contener"> 
 <!-- Begin Masthead --> 
 <div id="masthead"> 
  <h1>BMW</h1> 
  <h3>Bayerische Motoren Werke</h3> 
 </div> 
 <!-- End Masthead --> 
 <!-- Begin iMenu --> 
 <div id="HorizontalMenu"> 

  <ul class="horizontal"> 
   <li><a href="index.html">Accueil</a></li> 
   <li><a href="histoire/index.html">Histoire</a></li> 
   <li><a href="modeles/index.html">Modèles</a> 
   <ul> 
   <li><a href="serie1/index.html">Série 1</a></li> 
   <li><a href="serie3/index.html">Série 3</a></li> 
   <li><a href="serie5/index.html">Série 5</a></li> 
   <li><a href="serie6/index.html">Série 6</a></li> 
   <li><a href="serie7/index.html">Série 7</a></li> 
   <li><a href="serie8/index.html">Série 8</a></li> 
   <li><a href="seriex/index.html">Série X</a></li> 
   <li><a href="seriem/index.html">Série M</a></li> 
   <li><a href="seriez/index.html">Série Z</a></li> 
   </ul> 
   </li> 
   <li><a href="galerie/index.html">Galerie photo</a></li> 
   <li><a href="contact/index.html">Contact</a></li> 
   <li><a href="liens/index.html">Liens</a></li> 
  </ul> 

 </div> 
 <!-- End iMenu --> 
 <!-- Begin Left Column --> 
 <div id="column_l" style="left: 0px; top: 0px; width: 613px"> 
  <!-- #BeginEditable "content" --> 
  <h2>La nouvelle Série 1 est sortie!</h2> 
  <p>Après une première génération couronnée de succès, pas question pour BMW de chambouler trop en profondeur les traits de sa Série 1. Pourtant, sans en avoir l'air, cette seconde génération change tout pour espérer gravir les mêmes marches de la réussite que sa devancière. 

La première génération de la «petite» BMW s'est ainsi écoulée à plus d'un million d'exemplaires, toutes carrosseries confondues (3 et 5 portes, coupé, cabriolet et M). Un chiffre qui devrait continuer à grimper encore au cours des prochains 24 mois au cours desquels les trois dernières variantes continueront leur carrière. 
 Parmi les acheteurs, quelque 70% étaient des nouveaux clients. C'est dire l'importance du modèle. 
</p> 
<p> 
La nouvelle Série 1 inspire donc son style de la désormais ancienne génération, avec un long capot à l'avant et un porte à faux réduit à l'arrière qui lui procurent une allure très dynamique. Les face avant et arrière sont en revanche totalement nouvelles. Et si cette dernière conserve encore un semblant de parenté avec la première Série 1 (bien que certains lui trouvent un faux air de Polo sous cet angle...), l'avant est lui tout à fait inédit, avec des naseaux agrandis et des feux plus originaux. 

Mais l'originalité de cette nouvelle mouture, c'est surtout de proposer deux lignées différentes une fois passée la finition de base. La gent féminine et les plus branchés des acheteurs pourront ainsi acquérir la finition Urban, qui propose un large panel d'attributs et accessoires originaux (en témoignent les jantes, rétroviseurs et inserts blancs de notre voiture d'essai), tandis que les plus sportifs s'attacheront les services de la finition Sport, qui devrait séduire pas mal de jeunes mâles par son côté viril. Et si cela n'était pas encore suffisant, il sera possible d'ici quelques mois d'opter pour une M Package virilisant encore plus les traits de la compacte. Au total, pas moins de 6.500 combinaisons seraient envisageables ! 

</p> 
<center> 
<img "alt="" height="366" src="images/nouvelleserie2.jpg" width="550" /></center> 
  <!-- #EndEditable --></div> 
 <!-- End Left Column --> 
 <!-- Begin Right Column --> 
 <div id="column_r"> 
  <!-- #BeginEditable "sidebar" --> 
  <img alt="" height="199" src="images/nouvelleserie1.jpg" width="300" /> 
  <object width="300" height="182"><param name="movie" value="http://www.youtube.com/v/qgH7zLg4aaI?version=3&hl=fr_FR&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qgH7zLg4aaI?version=3&hl=fr_FR&rel=0" type="application/x-shockwave-flash" width="300" height="182" allowscriptaccess="always" allowfullscreen="true"></embed></object> 
  <h4><u>Performances :</u></h4> 
  <p><u>Moteur:</u></p> 
  <p><u>Essence:</u></p> 
4 cyl. 1.6 L<br/> 
4 cyl. 2.0 L<br/> 
6 cyl. 3.0 L<br/> 
6 cyl. 3.0 L Biturbo<br/> 
<p><u>Diesel :</u></p> 
4 cyl. 2.0d L<br/> 
4 cyl 2.0d L Biturbo<br/> 
<p><u>Puissance maximale</u></p> 
115 à 306 ch (85 à 225 kW)<br/> 
<p><u>Couple maximal</u></p> 
160 à 400 Nm<br/> 
<p><u>Transmission</u></p> 
Propulsion<br/> 
<p><u>Boîte de vitesses</u></p> 
BVM à 5-6 vitesses<br/> 
BVA à 6 rapports ou Steptronic<br/> 

  <!-- #EndEditable --></div> 
 <!-- End Right Column --> 
 <!-- Begin Footer --> 
 <div id="footer"> 
  <p> 

 <p>COPYRIGHT *********</p> 
  </object> 
  </p> 
 </div> 
 <!-- End Footer --></div></div> 
<!-- End Container --> 

</body> 

<!-- #EndTemplate --> 

</html>


la je bouge une heure ou 2

a+
noctua
Messages postés
51
Date d'inscription
samedi 1 septembre 2007
Statut
Membre
Dernière intervention
11 mars 2013
-
Toujours le même problème :/
RAD ZONE
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1282 -
Toujours le même problème
si tu met l import , bien sur !

puisque sur le code poste plus haut si tu le prend tel quel , le menu fonctionne , la page n est pas structure car je n ai pas le layout .css dessus , mais le menu fonctionne lui !

c est pour cela que je te dis que le probleme est sur le CSS layout.css
noctua
Messages postés
51
Date d'inscription
samedi 1 septembre 2007
Statut
Membre
Dernière intervention
11 mars 2013
-
Ah ok, voila le layout

/* Balises DIV */
body {
	margin: 0;
	padding: 0;
	border: 0;
}
#container {
	width: 660px;
	margin: 0 auto;
	padding: 0;
	border: 0;
}
#masthead {
	width: 660px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
}
#iMenu {
	width: 660px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
}
#column_l {
	position: relative;
	float: left;
	margin: 0;
}
#column_r {
	position: relative;
	float: left;
	margin: 0;
}
#content {
	width: 630px;
	margin: 0;
	padding: 15px;
	border: 0;
}
#footer {
	width: 100%;
	overflow: auto;
	clear: both;
	margin: 0;
	padding: 0;
	border: 0;
}
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1282
0
Merci
OK :-))

avec tout c est plus simple !;-))

enleve les positions relative

sur les 2 colonnes
#column_l {
	position: relative;
	float: left;
	margin: 0;
}
#column_r {
	position: relative;
	float: left;
	margin: 0;
}


c est tout
a+
noctua
Messages postés
51
Date d'inscription
samedi 1 septembre 2007
Statut
Membre
Dernière intervention
11 mars 2013
-
alors la, merci beaucoup!
RAD ZONE
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1282 -
pas de probleme ;-))

je met resolu
a+