Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Retour à la ligne sur des images


Sujet :

Tableau en CSS

  1. #1
    Membre confirmé
    Retour à la ligne sur des images
    Bonjour,

    Je place trois rangées d'images, les unes en dessous des autres. Un espace blanc apparaît entre les rangées. Comment le supprimer pour que les images soient juxtaposées?

    Merci par avance pour vos réponses.
    Code html :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <style>
          img {
     
          }
        </style>
      </head>
      <body>
        <img src="http://tile.openstreetmap.org/8/126/92.png"><img src="http://tile.openstreetmap.org/8/127/92.png"><img src="http://tile.openstreetmap.org/8/128/92.png"><br>
        <img src="http://tile.openstreetmap.org/8/126/93.png"><img src="http://tile.openstreetmap.org/8/127/93.png"><img src="http://tile.openstreetmap.org/8/128/93.png"><br>
        <img src="http://tile.openstreetmap.org/8/126/94.png"><img src="http://tile.openstreetmap.org/8/127/94.png"><img src="http://tile.openstreetmap.org/8/128/94.png">
      </body>
    </html>

  2. #2
    Membre confirmé
    Salut,
    Met tes images dans la balise p et applique le css sur la balise p

    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
     
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <style>
          p {
      line-height:0px;
     
          }
        </style>
      </head>
      <body>
        <p><img src="http://tile.openstreetmap.org/8/126/92.png"><img src="http://tile.openstreetmap.org/8/127/92.png"><img src="http://tile.openstreetmap.org/8/128/92.png"><br/>
        <img src="http://tile.openstreetmap.org/8/126/93.png"><img src="http://tile.openstreetmap.org/8/127/93.png"><img src="http://tile.openstreetmap.org/8/128/93.png"><br/>
        <img src="http://tile.openstreetmap.org/8/126/94.png"><img src="http://tile.openstreetmap.org/8/127/94.png"><img src="http://tile.openstreetmap.org/8/128/94.png">
      </p>
      </body>
    </html>

  3. #3
    Membre confirmé
    Merci beaucoup Manequin, c'est parfait!
    En fait, on peut aussi mettre la propriété line-height au sélecteur body et se passer ainsi des balises <p> et </p>.

  4. #4
    Membre confirmé
    Bonjour, je t'ai montré une piste de solution à toi de l'exploiter.

    Cordialement.

  5. #5
    Modérateur

    Bonjour,
    cette solution, bien que satisfaisante, me paraît hasardeuse dans le sens où tes images représentent une entité bien définie, une carte.
    Il me semblerais plus judicieux de les mettre dans un conteneur carré, que va t-il se passer lors d'un redimensionnement de la page ?