Problèmes de codage

Bonjour,
je suis novice en programmation et je n'arrive pas à positionner dans ma page web des images de cette manière http://www.leslie-david.com/. J'utilise la balise <div> mais je ne comprends pas comment ça marche avec plusieurs images et comment les aligner.

10 réponses

  1. http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
    1. Merci, enfin c'est la bonne solution et c'est beaucoup plus simple que ce que j'avais trouvé.
      J'ai une autre question : Savez vous comment on peut, lorsque l'on place la souris sur une de ces images avoir une autre image qui apparaisse ?
      1. Tu souhaites apparemment mettre 4 images par ligne.
        Dans ce cas, il suffit de faire ceci :

        <div>
            <img src="image.png" alt="Texte alter." />
            <img src="image.png" alt="Texte alter." />
            <img src="image.png" alt="Texte alter." />
            <img src="image.png" alt="Texte alter." />
            <br/>
        
            <img src="image.png" alt="Texte alter." />
            <img src="image.png" alt="Texte alter." />
            <img src="image.png" alt="Texte alter." />
            <img src="image.png" alt="Texte alter." />
            <br/>
        
            <!-- ... -->
        </div>

        Cependant, « <br/> » est facultatif, le retour à la ligne se fera automatiquement une fois la ligne complète.
        1. mon code html :
          <div><img src="image/museeairespace.jpg" alt="livret du super chat obèse" /> <img src="image/rdvx3couv.jpg" alt="rdvx" /> <img src="image/GARAMOND1.jpg" alt="rdvx" /> <img src="image/rapportdestage.jpg" alt="rdvx" /> <img src="image/tp.jpg" alt="rdvx" /></div>
          <span><img src="image/degout.jpg" alt="livret du super chat obèse" /> <img src="image/secret2.jpg" alt="rdvx" /> <img src="image/superhero.jpg" alt="rdvx" /> <img src="image/1.jpg" alt="rdvx" /> <img src="image/panda.jpg" alt="rdvx" /></span>

          mon code CSS :
          div
          {
          position: absolute;
          left: 400px;
          top: 50px;
          }

          span
          {
          position: absolute;
          left: 400px;
          top: 232px;
          }
          1. Je suis vraiment nul, je n'y arrive pas. J'ai réussi avec une balise <div> mais le problème c'est que j'ai plusieurs éléments soumis à des balises <div> qui n'ont pas les même propriétés. Dans mon code CSS je ne sais pas comment différencier ces balises <div> !
            Du coup j'ai mis une balise div et une balise span, mais à mon avis c'est un peu n'importe quoi non ?
            1. S'il n'y a que des images, sans texte au-dessus ou en-dessous, il suffit de mettre tes balises <img /> l'une à la suite de l'autre : il s'agit d'un élément inline, il se placera donc à la suite sans créer un retour à la ligne, jusqu'au moment où la ligne est finie et là il créera une seconde ligne et ainsi de suite.
              1. en faite non !
                <div> <img src="image/super chat3.jpg" alt="livret du super chat obèse" /> <img src="image/rdvx3couv.jpg" alt="cd rendez vous avec X" /></div>

                je n'arrive pas à savoir qu'elle est le code CSS pour placer ces deux images qui sont alignées où je veux !
                1. Salut,

                  @Godux: ça répond en partie à sa question, puisque la réponse s'y trouve.

                  Tu peux utiliser la propriété CSS « float: left » ou « display: inline-block ».
                  Les deux fonctionnent bien.
                  1. Ça ne répond pas à ton problème, mais regardes le code source de la page en question...