Bonjour à tous,
Je récupère des images dans une base de donnée avec du PHP, pour les afficher sur ma page html. Jusqu'ici pas de soucis.
Mon problème vient quand je veux appliquer du CSS sur mes balises <figure> <img> et <figcaption>
Pour l'instant le code afficher les images les unes en dessous des autres avec leur titre respective.
Je souhaite les afficher les unes à coté des autres et éventuellement en mettre à la ligne pour former une grille.
Voici le HTML et le CSS
Code php : 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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="fr" /> <title></title> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> </head> <body> <?php // on se connecte à MySQL $db = mysql_connect('localhost', 'root', 'root'); // on sélectionne la base mysql_select_db('Data_Movie',$db); //Requête SQL //$requete='SELECT Link_Poster FROM Data'; $requete='SELECT Title, Link_Poster FROM Data'; $exec=mysql_query($requete); //Boucler sur chaque lien de la colonne Link_Poster //While($ligne=mysql_fetch_array($exec)) While($ligne=mysql_fetch_assoc($exec)) { ?> <figure> <?php echo '<img alt="" src=" '.$ligne['Link_Poster'].' "border="0" /> '; ?> <figcaption> <?php echo $ligne['Title'] ;?> </figcaption> </figure> <?php } //Fermeture de MySQL mysql_close(); ?> </body> </html>
Le CSS :
Merci d'avance pour votre aide
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 body { background: #fff; margin : 0; padding : 0; height : 100%; } .contenu figure { margin-right: 35px; float: left; } .contenu img { width: 150px; height: 200px; } .contenu figcaption { text-align: left; color: white; font-size: 0.8em; font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif; }
Partager