Problème menu déroulant horizontal

Résolu/Fermé
noctua Messages postés 41 Date d'inscription   Statut Membre Dernière intervention   -  
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   -
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>


A voir également:

10 réponses

Réponse 1 / 10
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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 !
0
Réponse 2 / 10
noctua Messages postés 41 Date d'inscription   Statut Membre Dernière intervention  
 
Non, ca ne marche pas :/
0
Réponse 3 / 10
noctua Messages postés 41 Date d'inscription   Statut Membre Dernière intervention  
  
@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;
}
0
Réponse 4 / 10
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
enleve le #navigation sur le CSS et dis moi ! 

html>body #navigation {
	overflow: hidden;
}


donc 
html>body  {
	overflow: hidden;
}


a+
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
noctua Messages postés 41 Date d'inscription   Statut Membre Dernière intervention  
 
Nan, ca ne fonctionne toujours pas :/
0
Réponse 6 / 10
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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>


0
Réponse 7 / 10
noctua Messages postés 41 Date d'inscription   Statut Membre Dernière intervention  
 
Ca fonctionne mais qu'est ce que tu as modifié d'autre dans le CSS?
0
Réponse 8 / 10
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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. ♣
0
Réponse 9 / 10
noctua Messages postés 41 Date d'inscription   Statut Membre Dernière intervention  
 
Le problème est qu'avec ce nouveau code, mon site est aligné à gauche et mes zones de textes so tn'importe comment :/
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
alors c est que l arborescence des div sur ta page n est pas la meme que celle que j ai faite ,
+ il faudrait peut etre aussi regarder si l import layout.css ne creait pas le probleme au depart ?? il doit agir sur la structure vue son nom :-))
0
noctua Messages postés 41 Date d'inscription   Statut Membre Dernière intervention  
 
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>
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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+
0
noctua Messages postés 41 Date d'inscription   Statut Membre Dernière intervention  
 
Toujours le même problème :/
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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
0
Réponse 10 / 10
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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+
0
noctua Messages postés 41 Date d'inscription   Statut Membre Dernière intervention  
 
alors la, merci beaucoup!
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
pas de probleme ;-))

je met resolu
a+
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
menu caché
laurent -
ChariduP -

7 réponses
supprimer une liste déroulante
fred94 -
m@rina -

3 réponses