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

HTML Discussion :

nombres d'images sur une lign automatique


Sujet :

HTML

  1. #1
    Nouveau membre du Club
    nombres d'images sur une lign automatique
    Bonjour,

    J'aimerais afficher une galerie d'image en php avec un commentaire en dessous genre:

    ____________ ____________
    |PHOTOPHOTO| |PHOTOPHOTO|
    |PHOTOPHOTO| |PHOTOPHOTO|
    |PHOTOPHOTO| |PHOTOPHOTO|
    |PHOTOPHOTO| |PHOTOPHOTO|
    |PHOTOPHOTO| |PHOTOPHOTO|
    ------------------ ------------------
    | commentaire| | commentaire|
    ------------------ ------------------ .... .... ...
    Mais voila j'aimerais que les photos reviennent automatiquement à la ligne suivant le nombre et la résolution du type. Sans le commentaire, juste l'image y'a pas de soucis mais lorsque j'ajoute le commentaire, comme j'emploie table ben évidemment la photo revient tout le temps à la ligne.

    Y'aurait-il des éléments qui iraient bien ou genre une astuce avec div ou bien dois-je calculer le bons nombres d'images a afficher sur une ligne par programmation et construire un tableau juste ??!!

  2. #2
    Membre averti
    Avec la propriété float: left sur un div.

    Code :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
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .image {
            float: left;
            margin: 5px;
            border: 1px solid #000000;
            text-align: center;
    }
     
    h5 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 10pt;
            font-weight: normal;
            margin: 0;
    }
    </style>
    </head>
     
    <body>
     
    <div class="image">
      <img src="image.png" alt="image" />
      <h5>commentaire</h5>
    </div>
     
    <div class="image">
      <img src="image.png" alt="image" />
      <h5>commentaire</h5>
    </div>
     
    <div class="image">
      <img src="image.png" alt="image" />
      <h5>commentaire</h5>
    </div>
     
    <div class="image">
      <img src="image.png" alt="image" />
      <h5>commentaire</h5>
    </div>
     
    </body>
    </html>

    En plaçant les div contenant les images dans un div conteneur dans le cas où float: left causerait des problèmes.

  3. #3
    Nouveau membre du Club
    Yep merci beaucoup c'est exactement ce qu'il me fallait !!!

###raw>template_hook.ano_emploi###