Discussion :

[jpapa]

Bonjour j'aimerai mettre en place un calendrier de ce type



J'ai réussi à faire ça https://jsfiddle.net/NadirB21/mhvq1ga0/3/

Il me manque un ajustement pour que ma liste se mettent de façon horizontal avec l'image et le texte.

J'utilise boostrap et ce qu'il y a une solution ?

Merci

[01001111]

Bonjour, tu peux passer par un code css du type suivant:

Code css :

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
 
ul.media-list {
     padding:0; // initialisation des valeurs par défaut sur certains navigateurs
     margin:0; // initialisation des valeurs par défaut sur certains navigateurs
     display:block;
     position:relative;
     width:100%;
     height:auto;
}
// ici il faut que tu définisses la hauteur et la largeur comme tu le souhaites, ce que j’ai mis c’est pour exemple
ul.media-list li.media {
     width:400px;
     height:105px;
     list-style-type:none; // pour éviter les puces de l’élément de liste
     display:inline-block; // important, permet le positionnement en ligne et le retour à la ligne en cas de dépassement (attention, si tu mets "white-space:nowrap;" dans l’élément parent, ça ne revient plus à la ligne)
     position:relative;
}
// à rajouter sur les éléments que tu as déjà stylisés
div.datetime {
      display:inline-block;// important
      height:105px;
      width:100px;
}
div.media-body {
       display:inline-block;// important
       height:95px;
       width:290px;
       padding:5px;
}