Comment créer une div avec plusieurs images et le texte associé

Question

john044000

2 Apr 2014 à 15:43

Bonjour
Je suis actuellement en train de créer mon site perso sous iweb car mes compétences dans la programmation est quasi nul, mais grace a votre site j'ai trouvé plein de réponses a mes questions, ainsi que des petites astuces pour accroitre les limites d'Iweb.
Afin de pouvoir réaliser ce que je veux, je dois insérer des widgets avec fragment HTML.
Je suis bloqué sur une dernière chose, car je souhaite créer une div avec plusieurs images et le texte associé a chaques images. Dans la div je souhaite voir seulement qu'une seule image a la fois avec son texte et avoir une scrollbar horizontal pour visualiser les autres images.
Merci au personnes qui peuvent m'aider

gc-nomade

2 Apr 2014 à 15:55

Bonjour,

Tu n'as besoin de multiplier les questions pour avoir des réponses.

Si tu nous montrer ce que tu as essayer de faire, tu aurais probablement des réponses , tout du moins des conseils ou des pistes.

Tout le monde ne sait pas ce qu'est Iweb (moi par exemple) , et si c'est un service en ligne, il y a surement une FAQ , voir un Forum associé qui serait techniquement plus aptes a te répondre, ici on va principalement te repondre sur ton code et sa validiter, et les plus enthousiaste iront te parler de sémantiques , d'accessibilité , ... de bonne pratique en générale.

john044000

2 Apr 2014 à 18:49

Iweb est un logiciel de mac qui permet de faire de blog, pages perso ou site internet de façon très scolaire sans avoir a créer des lignes de codes html ou autres. Rapideweaver est un peu similaire mais en plus compliqué.

Je vous laisse le code que j'essaie de modifier. Je souhaite avoir remplacer les carré blanc par des images et pour avoir un texte differents a coté de chaque images.
Comme le jpeg que je joins a ce texte.

Voici mon code actuel:

<html>
<head>
<style type="text/css">
body, html { padding: 0; margin: 0; background-color:#000000 }
#header {
background-color: white;
position:relative;
width : 910px;
height: 100px;
margin: 20px auto;
line-height: 50px;
text-align: center;
}
#images {
padding: 5px;
overflow: auto;
position: relative;
width:900px;
margin:20px auto;
white-space: nowrap;
}
#commentaire {
position: relative;
width:910px;
color:white;
margin:auto;

}
.image {
background-color: white;
display: inline-block;
width: 300px;
height: 400px;
border: 1px solid black;
text-align: center;
line-height: 400px;
}
</style>
</head>
<body>
<div id="images">
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
<div class="image">Zoli image</div>
</div>
</body>
</html>

Sujet clos

Questions générales et questions de débutants

Comment créer une div avec plusieurs images et le texte associé