[Résolu] Création d'une maquette pour annonces

Bonjour je sollicite votre aide car je souhaite créer une maquette simple (qu'elle soit également responsive), qui permet d'afficher une annonce avec ses informations (titre, catégorie, date, prix, photo...).
J'ai entouré les div avec un border en bleu pour essayer de bien les positionner, notamment les div informations et slider, mais sans résultas. Impossible de positionner le titre en première ligne dans la div informations. Est-ce à cause de deuxième photo se trouvant dans le slider qui en overflow:hidden ?

Voici le code css:

.informations {
  padding-right: 500px;
  border: 1px solid blue;
  display: table-cell;
  height: auto;
}
 
.slider {
  border: 1px solid blue;
  text-align: center;
  vertical-align: middle;
  margin: auto;
  width: 245px;
  height: 135px;
  overflow: hidden;
}
.slider img {
  max-width: 245px;
  display: none;
}
.annoncepubs {
  margin-top: 200px;
  margin-right: 0px;
  width: 100%; /*700px*/
  height: 150px; /*400px*/
  border-bottom: solid orange;
  margin-bottom: 5px;
  display: table;
}
span.title {
  font-weight: bold;
  font-size: 20px;
  color: #221461;
}
span.date {
  display: block;
  top: 30px;
}
 span.category {
  display: block;
  margin-bottom: 0px;
}
 span.price {
  display: block;
  margin-top: 5%;
}
span.city {
  display: block;
  margin-bottom: 10px;
}
span.comments {
  display: block;
  margin-bottom: 10px;
}
 
img.active {
  display: block;
  animation: fade 0.8s;
}

Le code source HTML:

<div class="container"> 
<div class="slider" >
<img class ="active" style="width:240px; height:135px;" src="pictures/velo1.jpg">
<img class ="active" style="width:240px; height:135px;" src="pictures/velo2.jpg"></div></div>
<div class= "informations"><a class="maquette" href="single.php?id=4"  >
 <span class='title'>vélo à vendre. opportunité!!!</span>
<span class='category'>Vélos</span>
<span class='price'>0</span><span class='date'>2022-01-01</span>
</div>

Bonjour, Merci pour votre réponse. c'est très joli!
3 problèmes:
1-En réajustant au niveau du container les div informations et et slider sont séparées par une droite verticale. C'était pour créer une bordure pour chaque annonce en ajoutant un width de 240px à container > div. Photo:


Code:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.container > div {
  width: 240px;
  height: 160px;
  border: 1px solid orange;
  margin-bottom: 3px;
}

.slider {
  position: relative;
  height: 170px;
  overflow: hidden;
}

.slider img {
  display: block;
  position: absolute;
  width: 240px;
  height: 170px;
}
.informations {
  background: white;
  height: 135px;
}

2-En augmentant également le width de container > div (400px), les slider apparaissent au dessus des informations lorsqu'on réduit la fenêtre:


3-Pour les annonces qui n'ont qu'une seule image, le slider change en blanc.


Auriez-vous un problème pour cela?


Pour les annonces qui ont plusieurs image, (plus de 2), faut-il faire du genre:

.slider img:nth-of-type(3) {
  animation: slidein3 8s linear infinite;
}

et ainsi de suite pour les images 4 et 5

Bonjour,

1) Je n'ai pas compris quel était ton problème au 1), ni quelle était la question !

2) Je n'ai pas compris quel était ton problème au 2), ni quelle était la question ! J'ai volontairement fait en sorte que le slider passe au dessus des informations quand on n'a pas assez de place. On peut éventuellement améliorer, mais le principe général restera le même : il faudra bien mettre le slider quelque part si on n'a pas assez de place en largeur.

3) Quand il n'y a qu'une seule photo, il faut juste ne pas mettre d'animation pour la photo en question.

4) Quand il y a 3 photos (ou plus), il faut adapter à chaque fois les chiffres.

Un petit tuto pour les animations de slider ici : https://www.alsacreations.com/tuto/lire/1059-ID-slideshow-css3-animation-keyframes-automatique.html

Un exemple ici avec une annonce à 2 photos, une annonce à une photo, et une annonce à 3 photos. J'ai modifié les animations pour que ce soit un peu plus simple à généraliser (j'utilise un principe un peu différent du tuto ci-dessus, mais l'idée générale reste la même : l'animation cache les images et les fait ré-apparaitre au fil du temps en les changeant de place). J'ai aussi fait en sorte qu'on passe le slider au dessus des informations un peu plus tardivement quand on réduit la taille de la fenêtre.
https://jsfiddle.net/parsimonhi/ro9ycd04/

Amicalement,
Modifié par parsimonhi (09 Jan 2022 - 22:08)

Concernant la question 1, je voulais savoir comment faire pour qu'il n' ait pas de droite verticale entre l'image et les informations de l'annonce (prix, titre, date...)?
Et comment faire pour augmenter la largeur de la div dans la quelle se trouve les informations de l'annonce? Comment les positionner vers la droite ou la gauche?
J'ai bidouillé avec la div information, mais sans résulats.
=> J'ai essayé également d'augmenter le width du container, ça m'a donné l'image 2 lorsqu'on réduit la fenêtre.

Quelle est la condition qu'il faut s'il y a une seule image dans le slider? Aurais-tu un petit exemple, please? Dans d'autres langages c'est if, mais en css...

Bonjour,

J'ai fourni un exemple dans ma réponse précédente https://jsfiddle.net/parsimonhi/ro9ycd04/ qui traite déjà tous les points que tu cites.

Pour la barre verticale, il suffit de mettre la bordure orange au niveau du container global (voir mon exemple, j'ai fait l'adaptation, mais seulement à l'instant, ça n'y était pas dans la version précédente).

Pour l'augmentation de la largeur de la boite d'informations de l'annonce, a priori, c'est aussi fait dans mon exemple. Pour les positionner vers la droite ou vers la gauche (des photos ?) il suffit d'intervertir dans le html les boites slider et informations me semble-t-il. On pourrait aussi le faire avec du css avec la propriété order. Par exemple, le code ci-dessous va mettre la boite informations avant la boite slider :

.slider {order:2}
.informations {order:1}

S'il n'y a qu'une seule image, il faut ne pas mettre d'animation sur l'image en question. Voir la 2e annonce de mon exemple.

Amicalement,
Modifié par parsimonhi (09 Jan 2022 - 23:24)