Sous menu qui reste figé

Fred71 · Message par **Fred71** » 05 sept. 2012, 17:45

Bonjour à tous,

Depuis peu je me suis lancé à la réalisation d'un site avec Kompozer. J'avoue que ce petit logiciel me plait bien.
J'ai un petit soucis avec mon menu déroulant. Les sous menu sont bien là mais figé. Ils ne disparaissent pas comme ils devraient pour apparaître au passage de la souris.

J'ai copié / coller un menu depuis des exercices proposé dans divers sites sur des pages vierges sans soucis sa fonctionne, mais dès que l'intégre dans ma page nada

. Bon c'est vrai que je maitrise pas encore totalement le CSS !

Je vous donne mon code si quelqu'un veut bien m'expliquer ce qui se passe,

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Page d'accueil Kompozer</title>
<style type="text/css">
body {
margin: 0px auto;
background: yellow url(images/kompozer2.png) no-repeat fixed center;
font-family: Arial,Helvetica,sans-serif;
color: black;
width: 840px;
}
#entete {
background-color: #c06000;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-bottom: 0px;
top: 0px;
bottom: 0px;
display: block;
}
#corps {
opacity: 0.8;
background-color: white;
width: 840px;
display: inline;
float: left;
}
#piedpage {
color: black;
font-family: Arial,Helvetica,sans-serif;
float: left;
background-color: #c06000;
text-align: center;
display: inline;
width: 840px;
}
#menuh {
padding-left: 0%;
display: inline;
}
#menuh li {
border: 1px solid #003333;
color: yellow;
text-align: center;
float: left;
list-style-type: none;
background-color: #c06000;
width: 166px;
}
#menuh li a:link {
color: #ffff66;
text-decoration: none;
display: block;
height: 20px;
}
#menuh li a:hover {
background-color: yellow;
color: #c06000;
text-decoration: none;
}
#menuh li ul {
display: inline;
}

</style>
</head>
<body>
<div style="text-align: center;" id="entete">
<h1>Kompozer</h1>
<h2>La création de site facile</h2>
<br>
</div>
<div>
<ul id="menuh">
<li><a href="index.html">Accueil</a></li>
<li><a href="service.html">Service</a></li>
<li><a href="produit.html">Produit</a>
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
</li>
<li><a href="entreprise.html">Entreprise</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="corps">
<p>Corps<br>
<br>
<br>
</p>
</div>
<div id="piedpage">
<p>Pied de page</p>
</div>
</body>
</html>

Merci d'avance
Fréd

Message par **Ymai** » 05 sept. 2012, 23:31

Bonjour
Je crains que le souci ne provienne pas de CSS. Ne manque-t-il pas d'un peu de magie Javascript pour que les éléments puissent apparaître et disparaître à l'envi? À vérifier sur le site d'où provient le code, sans doute...

Message par **chinon37** » 06 sept. 2012, 09:03

Au risque de contrarier le précédent interlocuteur et néanmoins ami et bien qu'il soit difficile de le contrarier, je pense que tout peut être fait en css sans problème.
Cependant, au cas présent, le menu est très incomplet pour arriver au résultat souhaité.

Pour éviter le cours magistral, je renverrais notre honorable lecteur à cette page qui explique très bien la construction d'un menu déroulant. Il suffira d'adapter celui-ci pour obtenir l'aspect souhaité.

Il sera tout de même souhaitable de tester ce menu sous IE, un peu versatile, qui ne semble pas poser de problème dans la version 9...

Message par **Ymai** » 06 sept. 2012, 09:28

chinon37 a écrit :Au risque de contrarier le précédent interlocuteur et néanmoins ami et bien qu'il soit difficile de le contrarier, je pense que tout peut être fait en css sans problème.

Tels Montaigne et Monsieur de La Boétie, nous nous trouvons parfaitement d'accord.
Simplement, voyant une feuille de style déjà un peu chargée et

copié / coller un menu depuis des exercices proposé dans divers sites

,
j'étais parti de l'hypothèse qu'elle était complète. Le chaînon manquant ne pouvait donc se trouver que du côté Javascript.
Mais je ferai volontiers amende honorable et romprai une lance en faveur de CSS.

En plus, je m'en voudrais qu'un désaccord, même passager, puisse me priver d'Agnès Sorel (very private joke inside, ne cherchez pas).

Fred71 · Message par **Fred71** » 06 sept. 2012, 10:41

Bonjour et merci pour vos réponses.

J'ai commencé à me "former" sur Kompozer avec ce site : http://www.gtalbot.org/nvuSection/Guide ... tion3.html puis celui-cijosar.free.fr/tutokompozer/MenusPlan.html.

J'ai ensuite été faire un tour sur le site proposé par Chinon37.

Maintenant mon menu ce déroule bien, sans javascript, mais...il ne prend pas toute la largeur de la <div>. De plus sous Chrome, le menu s'affiche en dessous du calque suivant.

Je vous redonne mon code réctifié :

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>menu2</title>
<style type="text/css">
body {
background: yellow url(images/kompozer2.png) no-repeat fixed center;
width: 840px;
color: black;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
}
#menu {
width: 840px;
}
#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
display: inline;
}
#menu li {
margin: auto;
padding: 0;
background-color: #c06000;
float: left;
}
#menu li a {
padding: 5px;
text-decoration: none;
color: yellow;
width: 166px;
display: block;
}
#menu li a:hover {
color: #c06000;
background-color: yellow;
}
#menu ul li ul {
display: none;
}
#menu ul li:hover ul {
display: block;
}
#menu li:hover ul li {
float: none;
}
#menu li ul {
position: absolute;
}

#entete {
margin-top: 0px;
padding-top: 0px;
top: 0px;
display: block;
background-color: #c06000;
margin-bottom: 0px;
padding-bottom: 0px;
bottom: 0px;
}

#corps {
opacity: 0.8;
background-color: white;
width: 840px;
display: inline;
float: left;
}

#piedpage {
font-family: Arial,Helvetica,sans-serif;
background-color: #c06000;
display: inline;
color: black;
float: left;
text-align: center;
width: 840px;
}

</style>
</head>
<body>
<div id="entete">En tete</div>
<div id="menu">
<ul>
<li><a target="_blank" href="index.html">Accueil</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Produits</a>
<ul>
<li><a href="#">Sous-item 1</a><br>
<br>
</li>
<li><a href="#">Sous-item 2</a><br>
<br>
</li>
<li><a href="#">Sous-item 3</a><br>
<br>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="corps">Corps</div>
<div id="piedpage">Pied de page</div>
</body>
</html>

Merci,
Fréd

Fred71 · Message par **Fred71** » 06 sept. 2012, 12:49

Youpi c'est règlé pour le déroulement du sous menu et pour la largeur du menu par rapport à son conteneur. UN problème de taille et d'onglet que j'avais oublié.

Pour ceux qui débute prenez le temps de lire ce site :

Code : Tout sélectionner

http://css.developpez.com/

on y trouve pleins de réponses, sauf une...

c'est pour cela que je reviens vers vous, pourqoui mon sous-menu s'affiche t-il pardessous mon calque corps sous Chrome ? Sous IE pas de soucis !

Merci de m'aider.

Fréd

Geckozone

Sous menu qui reste figé

Sous menu qui reste figé

Re: Sous menu qui reste figé

Re: Sous menu qui reste figé

Re: Sous menu qui reste figé

Re: Sous menu qui reste figé

Re: Sous menu qui reste figé

Qui est en ligne ?