[ok]Mise en page menu CSS

lordbdp · Message par **lordbdp** » 17 oct. 2005, 14:47

Bonjour à toutes et à tous,

J'utilise pour le menu haut un modèle Alsacréations, et pour le sous-menu un modèle Listamatic (http://www.e-central.fr). Mais je souhaiterai changer le sous menu par ce modèle (http://css.maxdesign.com.au/listamatic/horizontal26.htm).

Donc j'ai créé une autre CSS avec le contenu du modèle donné, et j'ai transformé dans la partie HTML :

Code : Tout sélectionner

<ul id="menuhautlist">
<li onmouseover="javascript:montre();"><a href="?page=1" title="Retour à l'accueil" id="current">Accueil</a></li>
   <li onmouseover="montre('smenu2');"><a href="#">Boutiques</a></li>
       <li><ul id="smenu2">
        <li><a href="?page=2">Particuliers</a></li>
          <li><a href="?page=3">Professionnels</a></li>
          <li><a href="?page=4" title="Demandez un devis !">Devis</a></li>
      </ul></li>

Par :

Code : Tout sélectionner

<ul id="menuhautlist">
<li onmouseover="javascript:montre();"><a href="?page=1" title="Retour à l'accueil" id="current">Accueil</a></li>
   <li><a href="#">Boutiques</a></li>
       <div id="mh2">
       <li><ul id="mh2">
        <li><a href="?page=2">Particuliers</a></li>
          <li><a href="?page=3">Professionnels</a></li>
          <li><a href="?page=4" title="Demandez un devis !">Devis</a></li>
      </ul></li></div>

Et le résultat n'est pas superbe ! (http://www.e-central.fr/test3_index.php)

1) Où est l'erreur ?
2) Que doit-je ajouter pour que ce sous-menu s'affiche au milieu et non à gauche (sous Firefox et Opera)? Si je vire le float: s'est encore pire !
3) Quelle code HTML doit-je ajouter pour que le sous-menu ne s'affiche que si on clique sur le menu désiré ?

Merci d'avance.

Message par **Benoit** » 17 oct. 2005, 19:31

Tu t'es un peu trompé dans l'imbrication de tes balises là

Ce que tu veux vraiment c'est une seconde liste (ul) à l'intérieur d'un point de ta première liste (li), donc à la place de (div).

Code : Tout sélectionner

<ul id="menuhautlist">
  <li onmouseover="javascript:montre();"><a href="?page=1" title="Retour à l'accueil" id="current">Accueil</a></li>
  <li><a href="#">Boutiques</a>
    <ul id="mh2">
      <li><a href="?page=2">Particuliers</a></li>
      <li><a href="?page=3">Professionnels</a></li>
      <li><a href="?page=4" title="Demandez un devis !">Devis</a></li>
    </ul>
  </li>
</ul>

Essaie de bien aligner tes balises d'ouverture et de fermeture, tu verras tout de suite où ça cloche.

lordbdp · Message par **lordbdp** » 17 oct. 2005, 21:16

désormais, j'ai :

Code : Tout sélectionner

            <ul id="menuhautlist">
<li onmouseover="javascript:montre();"><a href="?page=1" title="Retour à l'accueil" id="current">Accueil</a></li>
   <li><a href="#">Boutiques</a>
       <ul id="mh2">
         <li><a href="?page=2">Particuliers</a></li>
          <li><a href="?page=3">Professionnels</a></li>
          <li><a href="?page=4" title="Demandez un devis !">Devis</a></li>
      </ul></li>
   <li><a href="?page=5" title="Pour trouver un sp&eacute;cialiste près de chez vous">Sp&eacute;cialistes</a></li>
   </ul>

Et le résultat est pire ! Help me !

calimo · Message par **calimo** » 18 oct. 2005, 14:47

Là c'est surement un problème avec les styles CSS que tu appliques. Tu peux nous les donner ?

lordbdp · Message par **lordbdp** » 18 oct. 2005, 19:13

CSS mh2 :

Code : Tout sélectionner

#mh2 ul li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
text-align: center;
float: left;
background: url("imgs/navBarBg.gif") repeat-x 20px;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
}

#mh2 a
{
color: #000;
text-decoration: none;
display: block;
width: 100px;
border-top: 1px solid #A8B090;
border-bottom: 1px solid #A8B090;
border-left: 1px solid #A8B090;
border-right: 1px solid #A8B090;
}

#mh2 li#active { background: url("imgs/navBarBgHover.gif") repeat-x 20px; }
#mh2 a:hover { background: url("imgs/navBarBgHover.gif") repeat-x 20px; }

calimo · Message par **calimo** » 18 oct. 2005, 21:42

J'en conclus que #mh2 n'est pas positionné ? Dans ce cas sa position n'a rien d'étonnante

Invité · Message par **Invité** » 18 oct. 2005, 21:59

C'est quoi alors le

Code : Tout sélectionner

<ul id="mh2">

dans mon HTML ?

calimo · Message par **calimo** » 19 oct. 2005, 09:59

Mais tu ne lui appliques aucune propriété ! (Enfin, à ce que j'ai vu).

lordbdp · Message par **lordbdp** » 19 oct. 2005, 12:21

Il me faudrait quoi pour que ce soit correcte ?

calimo · Message par **calimo** » 19 oct. 2005, 13:43

Ben là ce bloc tu le laisse se positionner où il veux/peut (il est simplement dans le flux).

Donc à toi de trouver où tu veux le mettre (chose que je ne peux pas savoir à ta place) et ensuite de trouver quel positionnement est le plus adéquat. Là pour l'instant il n'y a rien

lordbdp · Message par **lordbdp** » 19 oct. 2005, 14:54

Ben la réponse à ta question est dans le 1er post...

2) Que doit-je ajouter pour que ce sous-menu s'affiche au milieu et non à gauche (sous Firefox et Opera)? Si je vire le float: s'est encore pire !
3) Quelle code HTML doit-je ajouter pour que le sous-menu ne s'affiche que si on clique sur le menu désiré ?

calimo · Message par **calimo** » 19 oct. 2005, 15:51

lordbdp a écrit :2) Que doit-je ajouter pour que ce sous-menu s'affiche au milieu et non à gauche (sous Firefox et Opera)? Si je vire le float: s'est encore pire !

La même chose que sur les autres pages non ? Je ne saisi pas trop ce qui ne va pas

lordbdp a écrit :3) Quelle code HTML doit-je ajouter pour que le sous-menu ne s'affiche que si on clique sur le menu désiré ?

C'est l'évènement onclick. Et puis il faut lui mettre un équivalent clavier comme onkeydown

Ou alors tu peux utiliser la combinaison d'évènements onfocus/onblur

(clavier et souris d'un coup).

lordbdp · Message par **lordbdp** » 19 oct. 2005, 18:10

Bon j'en suis à :

Code : Tout sélectionner

            <ul id="menuhautlist">
<li onmouseover="javascript:montre();"><a href="?page=1" title="Retour à l'accueil" id="current">Accueil</a></li>
   <li><a href="#">Boutiques</a>
       <ul id="mh2">
         <li><a href="?page=2">Particuliers</a></li>
          <li><a href="?page=3">Professionnels</a></li>
          <li><a href="?page=4" title="Demandez un devis !">Devis</a></li>
      </ul></li>
   <li><a href="?page=5" title="Pour trouver un sp&eacute;cialiste près de chez vous">Sp&eacute;cialistes</a></li>
   </ul>

1) Quand je passe mh2.css au validateur W3C, il me dit que le document est bon mais pas bon quand-même !

Ligne : 7 (Level : 1) Cette propriété ne s'applique qu'aux éléments de type "bloc". : #mh2 ul li
Ligne : 14 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : #mh2 a

2)

lordbdp a écrit:
3) Quelle code HTML doit-je ajouter pour que le sous-menu ne s'affiche que si on clique sur le menu désiré ?
C'est l'évènement onclick. Et puis il faut lui mettre un équivalent clavier comme onkeydown

Peux-tu me donner un exemple pour onclick, stp ?
Et c'est quoi cette commande onkeydown ? Je la connais pö !

calimo · Message par **calimo** » 19 oct. 2005, 18:22

Ben au lieu de onmouseover="javascript:montre();" tu mets onclick="javascript:montre();"

Tous les attributs HTML sont toujours à leur place habituelle : http://www.la-grange.net/w3c/html4.01/i ... butes.html

Dans le cas qui nous intéresse : http://www.la-grange.net/w3c/html4.01/i ... l#h-18.2.3

lordbdp · Message par **lordbdp** » 19 oct. 2005, 20:30

Ben pas de changement...snif !

Je suis allé sur les 2 liens que tu as donné mais je te raconte pas pour un néophyte comme moi afin de comprendre....

Geckozone

[ok]Mise en page menu CSS

[ok]Mise en page menu CSS

Qui est en ligne ?