Partage
  • Partager sur Facebook
  • Partager sur Twitter

Petit souci

Sujet résolu
addesign
    14 février 2006 à 14:45:29

    Salut à tous :)
    Je me présente un peu, j'habite en région parisienne (près de Meudon si certains connaissent :p ) j'ai déjà fait plusieurs sites, les premiers en HTML et les autres en xHTML / CSS, en ce moment, j'ai décidé de reprendre la création de mon site personnel, mais deux problèmes se posent, j'ai cherché mais pas trouvé de solution ...

    Premièrement, je n'ai jamais très bien maîtrisé les div, et ne sait pas comment les placer ...
    Je suis en train de coder mon menu, j'ai une ligne toute simple à faire que j'allai faire en utilisant <table>, mais je vois partout que ce n'est pas recommandé. Je voudrais donc savoir comment arriver à l'équivalent de ce bout de code :

    Citation : Code

    <table class="menu"><tr>
    <td class="logo"></td>
    <td class="lien1"></td>
    <td class="lien2"></td>
    <td class="lien3"></td>
    <td class="lien4"></td>
    <td class="lien5"></td>
    <td class="lien6"></td>
    </tr>



    Mais en utilisant simplement les <div>

    Je remercie d'avance tout ceux qui me répondront ;)
    • Partager sur Facebook
    • Partager sur Twitter
    Finality
      14 février 2006 à 15:06:15

      Salut addesign
      c'est une très bonne initiative de ta part de vouloir utiliser les divs au lieu des tableaux.
      Pour ta question, tu n'es pas obligé d'utiliser les divs : tu peux le faire avec les listes.
      Voilà le code Xhtml

      <body>
      <ul>
      <li>Lien1</li>
      <li>Lien2</li>
      </ul>
      </body>


      Et le CSS :

      li
      {
         display:inline;
      }


      Et voici un lien sur les listes : http://www.siteduzero.com/tuto-3-40-1-les-listes-a-puces.html

      Bonne chance :)
      • Partager sur Facebook
      • Partager sur Twitter
      addesign
        14 février 2006 à 15:14:54

        Merci de ta réponse, je vais essayer tout de suite, mais comment puis-je m'y prendre désormais pour les images du menu ? En réalité le menu sera constitué d'image réactive à la souris, et le bout de code que j'ai trouvé sur alsacréations qui permet le rollover avec images préchargées utilise la fonction background-image dans la feuille de style.

        Merci d'avance :)
        • Partager sur Facebook
        • Partager sur Twitter
        Finality
          14 février 2006 à 15:21:26

          Si j'ai bien compris, tu veux mettre une image pour chaque lien.
          Ce ne devrait pas être trop dur ;)
          A la place des "Lien1", "Lien2", ... tu inseres ton images.
          Ce qui devrait donner comme code :

          <li><img src="lien vers ton image" alt="" /></li>


          Euh... Ty veux que l'image change au survol de la souris?
          • Partager sur Facebook
          • Partager sur Twitter
          addesign
            14 février 2006 à 18:37:27

            Ouais voilà et si possible, qu'elle soit préchargée... Et c'est pour çà que je me demandais comment faire, car le bout de code que j'ai trouvé est celui-ci :

            #lien { /* "lien" sera notre conteneur, ici la balise div */
            position:absolute; /* placement de l'image-lien, à vous d'adapter */
            left: 200px; /* dimensions selon l'image, à vous d'adapter */
            top: 50px;
            width: 100px;
            height: 100px;
            background: url(image2.gif) top left no-repeat; /* placement de l'image 2 au second plan */
            }

            #lien a { /* définition du lien qui occupera toute la place du conteneur */
            display: block;
            width: 100%;
            height: 100%;
            background: white url(image1.gif) top left no-repeat; /* placement de l'image 1 au premier plan */
            color: #000;

            }

            #lien a:hover { /* masquage de l'image1 au survol */
            background: transparent none;
            }


            Merci pour ton aide ;)
            • Partager sur Facebook
            • Partager sur Twitter
            Finality
              14 février 2006 à 19:09:01

              Dans ce cas là, tu dois utiliser les divs.
              Tout d'abord je te fais le code pour un lien puis je te le ferais pour deux.

              Voilà le code XHTML:

              <div id="lien">
                 <a href="#"></a>
              </div>


              Et le CSS

              #lien
              {
                 width: 100px;
                 height: 100px;
                 background-color:#CCCCCC;
              }

              #lien a
              {
                 display: block;
                 width: 100%;
                 height: 100%;
                 background-color:green;
              }

              #lien a:hover
              {
                  background: transparent ;
              }

              Je t'ai fais cet exemple avec des background-color pour plus de facilité mais tu peux le faire avec les background-image :)
              Normalement, ce code n'a rien de très compliqué : tu définies une couleur de fond pour ton div qui est recouvert par un lien qui lui a aussi sa couleur de fond. Quand le lien est survolé, son fond de couleur devient transparent donc laisse appercevoir celui du div.

              Maintenant, pour faire cette même chose mais avec plusieurs liens, tu dois utiliser les position:absolute:

              <div id="lien1">
                 <a href="#"></a>
              </div>

              <div id="lien2">
                 <a href="#"></a>
              </div>



              #lien1
              {
                 width: 100px;
                 height: 100px;
                 background-color:#CCCCCC;
                 position:absolute;
              }

              #lien1 a
              {
                 display: block;
                 width: 100%;
                 height: 100%;
                 background-color:green;
              }

              #lien1 a:hover
              {
                  background: transparent ;
              }

              #lien2
              {
                 width: 100px;
                 height: 100px;
                 background-color:#CCCCCC;
                 position:absolute;
                 margin-left:110px;
              }

              #lien2 a
              {
                 display: block;
                 width: 100%;
                 height: 100%;
                 background-color:green;
              }

              #lien2 a:hover
              {
                  background: transparent ;
              }


              Pour un cours sur les positionements, regarde ce lien : http://www.siteduzero.com/tuto-3-44-1-mise-en-boite-partie-2-2.html#ss_part_3
              Bonne chance :)
              • Partager sur Facebook
              • Partager sur Twitter
              addesign
                14 février 2006 à 19:26:48

                Merci beaucoup pour ton aide ;)
                Je testerai çà demain, je te tient au courant :)

                Merci :)

                [EDIT] J'ai réussi ! Il suffisait de mettre tous les divs en position:absolute; et de les placer avec les marges, je te remercie pour ton aide ;):)
                • Partager sur Facebook
                • Partager sur Twitter

                Petit souci

                × 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