Partage
  • Partager sur Facebook
  • Partager sur Twitter

[CSS] Changer la largeur

de mes menus déroulants

Sujet résolu
    26 mars 2006 à 20:17:27

    Bonjour à tous,

    Voilà, je suis en train de créer un site et j'ai crée 5 menus déroulants sur la première page de celui-ci et là, je voudrais changer la largeur de mes menus déroulants, certains ayant trop de textes écrits dedans, j'aimerais qu'ils soient plus larges...et mon problème, c'est que j'y arrive pas. Ayant utilisé la borne <div> pour mes menus déroulants, je pensais qu'en attachant la fonction "width" à mes <div>, ça marcherait mais c'est pas le cas. Je dois dire que je sais pas trop à quel autre borne, je pourrais attacher ça...ou alors c'est une autre fonction qu'il faut utiliser...

    Mes menus en simplifiant sont comme ça:
    <div>
    <ul>
    <li>
    </li>
    </ul>
    </div>

    Je sais pas si je suis très clair mais bon, je remercie d'avance ceux qui arriveront à me comprendre et me répondre :D
    • Partager sur Facebook
    • Partager sur Twitter
      26 mars 2006 à 23:22:12

      Salut!

      C'est vrai que c'est pas évident à comprendre :) !

      Pourrait tu mettre le bout de xHTML qui correspond à un menu avec le css qui va avec que l'on comprenne mieux?

      Merci et @+
      • Partager sur Facebook
      • Partager sur Twitter
        29 mars 2006 à 9:59:12

        Bon voici donc le code xHTML(que je vous ai raccourci) de l'un de mes menus déroulants:

        <td width="18%" height="2" valign="top">
                    <div align="center" >
                      <ul id="nav">
                        <li>
                          <p align="center"><a href="."><img  src="."></a></p>
                          <ul class="index">
                            <li><a href=".">Indexus</a>
                              <ul class="index">
                                <li><a href=".">Indexus brucus</a></li>
                                <li><a href=".">Indexus cookei</a></li>
                              </ul>
                            </li>
                            <li><a href=".">Indexidés</a>
                              <ul class="index">
                                <li><a href=".">Indexidés paradoxus</a></li>
                                <li><a href=".">Indexidés bruniensis</a></li>
                              </ul>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </div>
                  </td>


        Et voici le CSS complet propre à ce menu déroulant:

        .index{
        border: 3px inset yellow;
        font-family: "Arial Helvetica", Arial, serif;
        font-size: small;
        font-weight: bold;
        background-color: white;
        }
        #nav, #nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
        }

        #nav a {
        display: block;
        width: 10em;
        }
        #nav li {
        float: left;
        width: 10em;
        }
        #nav li ul {
        position: absolute;
        width: 10em;
        left: -999em;
        }
        #nav li:hover ul {
        left: auto;
        }
        #nav li:hover ul, #nav li.sfhover ul {
        left: auto;
        }
        #nav li ul ul {
        margin: -1em 0 0 10em;
        }
        #nav, #nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
        line-height: 1;
        }
        #nav li:hover ul ul, #nav li.sfhover ul ul {
        left: -999em;
        }
        #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
        left: auto;
        }


        Donc, je rapelle mon problème, je veux arriver à modifier la largeur des cadres de mes menus qui apparaissent quand je passe avc ma souris sur le titre.
        J'espère que ça sera plus compréhensible avec le code.
        Merci d'avance pour votre aide
        • Partager sur Facebook
        • Partager sur Twitter
          29 mars 2006 à 10:07:08

          ca doit etre ctte regle la
          #nav li ul {
          position: absolute;
          width: 10em; /* ici dodifie le 10em */
          left: -999em;
          }
          • Partager sur Facebook
          • Partager sur Twitter
            30 mars 2006 à 10:18:53

            Oui, c'était bien ça, ça change bien la largeur...à force de prendre des codes à droite à gauche, je sais même plus ce que je programme. :D

            Encore merci pour vos réponses ^_^
            • Partager sur Facebook
            • Partager sur Twitter
              26 avril 2006 à 10:32:35

              Argh, j'ai un autre problème! C'est élémentaire mais j'y avais pas pensé! Ayant maintenant l'habitude d'utiliser Mozilla, j'avais oublié que certaines personnes utilisent encore Internet Explorer!

              Résultat: ma page avec les menus déroulants est plutôt réussie sur Mozilla Firefox mais c'est vraiment du "n'importe quoi" sur Internet Explorer! Un seul des quatres menus s'ouvrent (alors que c'est un seul code qui régit les 4), les sous-menus s'ouvrent un peu n'importe où sur la page...
              Et je suis même pas allé sur Netscape (qui est pas mal utilisé aussi me semble-t-il) mais j'ai très peur!
              Mon code fonctionnait bien à l'origine sur les deux navigateurs. Pourquoi le simple fait de rajouter des propriétés CSS a-t-il rendu le code illisible pour Explorer? Changer la largeur ou mettre des cadres ne me semblaient pas être des propriétés inconnues d'Explorer!

              Je sais pas s'il est possible de m'aider avec ce que je viens de dire mais toute indication sera la bienvenue! Merci d'avance!
              • Partager sur Facebook
              • Partager sur Twitter
                26 avril 2006 à 14:03:00

                Humm... au hasard : tu utilises des position en absolute pour certain éléments de ton menu, qui sont interprétés de manière très différentes pour IE et les autres. Pareil pour les bordures - IE les ajoute au cadre là où les autres les y intègre, ... -.

                Il suffit parfois de peu de chose pour faire tout tomber ;)
                • Partager sur Facebook
                • Partager sur Twitter
                  27 avril 2006 à 9:05:37

                  Merci Folken Laëneck pour ta réponse. Mais en fait, j'avais une sauvegarde assez récente de mon code de base, je vais tout simplement reprendre à Zéro ma page, mettre les propriétés une à une et voir où ça pêche avec IE, c'était ptet pas très malin de vous poser cette question, je considère mon problème résolu.

                  Encore merci à tous ceux qui m'ont aidé sur ce topic.
                  • Partager sur Facebook
                  • Partager sur Twitter
                    28 avril 2006 à 10:29:59

                    Salut à tous,

                    Après avoir passé ma journée d'hier à faire des expérimentations sur les pages de mon site (voilà à quoi je passe mes jours de congés!), il semblerait que mon problème de menu déroulant provient de mes balises de cadre qui pulullent sur ma page. Voilà ce qu'on trouve en encadrement de mes menus:

                    <div align="center"></div>
                    <table width="100%" height="70">
                      <tr>
                        <td width="67%" height="53" valign="top">
                          <div align="left"></div>
                          <table width="50%" height="10" align="left">
                            <tr>
                              <td width="18%" height="2" valign="top">
                                <div align="left">
                                </div>
                              </td>
                            </tr>
                          </table>
                          </div>
                        </td>
                      </tr>
                    </table>


                    Et si je supprime tous ça, et bien mes menus déroulants sont parfaitement lisibles par IE mais...ma page est plus très bien organisée!
                    Normalement ces balises sont parfaitement lisibles par IE, alors pourquoi y a t-il des problèmes?

                    Merci d'avance pour vos éventuelles réponses
                    • Partager sur Facebook
                    • Partager sur Twitter

                    [CSS] Changer la largeur

                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                    • Editeur
                    • Markdown