Problèmes de codage

leffaceuse -  
avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   -
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. Godux Messages postés 43 Date d'inscription   Statut Membre Dernière intervention   5
     
    Ça ne répond pas à ton problème, mais regardes le code source de la page en question...
    0
  2. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    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.
    0
  3. leffaceuse
     
    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 !
    0
  4. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  5. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    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.
    0
  6. leffaceuse
     
    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 ?
    0
  7. leffaceuse
     
    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;
    }
    0
  8. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    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.
    0
  9. leffaceuse
     
    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 ?
    0
  10. avion-f16 Messages postés 19182 Date d'inscription   Statut Contributeur Dernière intervention   4 511
     
    http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
    0