Bonjour.
Je voudrais obtenir (rapidement) une petite galerie de photos, de telle sorte que les photos se placent les unes à côté des autres en n'allant "à la ligne" que lorsqu'il n'y a plus de place à droite.
Sous le paquet de photos, je voudrais mettre une ligne de texte.
J'ai réussi à obtenir le résultat désiré avec Firefox ; ça donne à peu près ça :
Mais avec IE, si les images se placent comme je le souhaite, le texte vient se mettre à côté de la dernière image, dans l'espace disponible à la droite de celle-ci (voire, selon les cas, à côté de la première image qui a assez de place à droite !) :
Comment l'éviter ?
L'HTML est le suivant :
Les styles sont les suivants :
Merci pour toute aide.
=========== EDIT =====================
Un modérateur peut supprimer ce fil. Désolé.
Je me suis souvenu qu'une image pouvait être intégrée dans un paragraphe... Du coup, plus de float: left; à employer... Et tout va bien : chaque image est comme un mot posé à côté d'un autre mot et le retour à la ligne se fait tout seul ; le petit problème de la "margeouillette" sous l'image a été résolu en donnant au texte du paragraphe une taille de 1px (zéro étant sans effet) !
Modifié par Piteur511 (07 Apr 2008 - 20:03)
Je voudrais obtenir (rapidement) une petite galerie de photos, de telle sorte que les photos se placent les unes à côté des autres en n'allant "à la ligne" que lorsqu'il n'y a plus de place à droite.
Sous le paquet de photos, je voudrais mettre une ligne de texte.
J'ai réussi à obtenir le résultat désiré avec Firefox ; ça donne à peu près ça :
Mais avec IE, si les images se placent comme je le souhaite, le texte vient se mettre à côté de la dernière image, dans l'espace disponible à la droite de celle-ci (voire, selon les cas, à côté de la première image qui a assez de place à droite !) :
Comment l'éviter ?
L'HTML est le suivant :
<body>
<div id="conteneur">
<h1>
Titre
</h1>
<div id="photos">
<img title="1" style="width: 500px; height: 375px;" alt="1" src=
"mon_image1.jpg">
<img title="2" style="width: 500px; height: 375px;" alt="2" src=
"mon_image2.jpg">
<img title="3" style="width: 500px; height: 375px;" alt="3" src=
"mon_image3.jpg">
</div>
<p>
Texte
</p>
</div>
</body>Les styles sont les suivants :
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#conteneur {
position: relative;
font-size: 76%;
font-family: Arial,Helvetica,sans-serif;
color: black;
}
img {
border: 1pt solid black;
float: left;
margin-right: 10px;
margin-top: 20px;
display: block;
}
h1, p {
text-align: center;
margin-top: 10px;
}
#photos {
position: relative;
margin-left: 15px;
margin-right: 15px;
}
</style>Merci pour toute aide.
=========== EDIT =====================
Un modérateur peut supprimer ce fil. Désolé.
Je me suis souvenu qu'une image pouvait être intégrée dans un paragraphe... Du coup, plus de float: left; à employer... Et tout va bien : chaque image est comme un mot posé à côté d'un autre mot et le retour à la ligne se fait tout seul ; le petit problème de la "margeouillette" sous l'image a été résolu en donnant au texte du paragraphe une taille de 1px (zéro étant sans effet) !
Modifié par Piteur511 (07 Apr 2008 - 20:03)