Placement d'image sur un site web + une legende en dessous
Jessekamba
Messages postés
54
Date d'inscription
Statut
Membre
Dernière intervention
-
Jessekamba Messages postés 54 Date d'inscription Statut Membre Dernière intervention -
Jessekamba Messages postés 54 Date d'inscription Statut Membre Dernière intervention -
salut a tous je travail sur un petit site, et du coup je me retrouve un peu buter au placement de mes images et des ecrits en dessous des images avec le style css. je voulais aboutir a un resultat semblable a celui sur l'image :
J'ai reussi a placer les images mais les ecrits(petite legende) ca marche pas, ca decale toute les images, ca se superpose.
J'ai reussi a placer les images mais les ecrits(petite legende) ca marche pas, ca decale toute les images, ca se superpose.
2 réponses
-
Bonjour,
Sans voir le code que tu as écrit (html et css ) .. impossible de te répondre !
PS: N'oublie pas d'utiliser les balises de code pour poster ton code : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
.
-
voici mon code html:
<!DOCTYPE html> <html class="no-js" lang="en"> <head> <title>NestaSolution</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" href="css/screen.css"> <link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css"> <link rel="stylesheet" href="css/body.css"> <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet"> <script src="bootstrap-3.2.0-dist/js/jquery-1.10.2.js"></script> <script src="bootstrap-3.2.0-dist/js/bootstrap.js"></script> <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <script>(function(){document.documentElement.className='js'})();</script> </head> <body> <header role="banner"> <div class="wrapper"> <h1>NestaSolution</h1> <nav id="nav" role="navigation"> <div class="show_menu_btn" data-target="#nav ul" data-shown-text= "<div class='glyphicon glyphicon-minus'/>" data-hidden-text="<div class='glyphicon glyphicon-plus'/>"> <span class='glyphicon glyphicon-plus'/></span></div> <ul> <li><a href="index.php">Acceuil</a></li> <li><a href="">A propos</a></li> <li><a href="">Services</a></li> <li><a href="contact.php">Contact</a></li> </ul> </nav> </div> </header> <main role="main"> <div class="wrapper"> <article> </article> </div> </main> <script src="js/navigation.js"></script> <section> <article> <img src="images/pc.jpg" alt=""/> <a href=""><p>ma description ou mon lien</p></a> </article> <article> <img src="images/pc.jpg" alt=""/> <p>ma description ou mon lien</p> </article> <article> <img src="images/pc.jpg" alt=""/> <p>ma description ou mon lien</p> </article> <article> <img src="images/pc.jpg" alt="Windows"/> <p>Petite description</p> </article> <article> <img src="images/pc.jpg" alt="Windows"/> <p>Petite description</p> </article> </section> </body> <footer> <?php include('footer.php'); ?> </footer> </html>
et le css:section{ width: 100%; display: grid; grid-template-columns: 33% 33% 33%; flex-align: flex-start; /* flex-wrap: wrap; */ align-content: flex-start; justify-content: flex-start; margin-top: 20px; margin:10px; } article { display: flex; flex-direction: column; margin-bottom: 30px; margin-right: 30px; } article img { width: 100%; } article p { background-color: rgba(16, 38, 109, 0.836); color: white; padding: 0; margin: 0px; font-size: 20px; }
voici le resultat:
mon probleme se trouve ici:
c'est dire que lorsque je resize la fenetre de mon navigateur les images et leur description se resize aussi, je prefefere que les images et leur description se mettent les unes en dessous des autres lorsque je resize mon navigateur ou encore lorsque je suis sur mobile.
