Menu

Placement d'image sur un site web + une legende en dessous

Messages postés
29
Date d'inscription
mercredi 21 juin 2017
Dernière intervention
7 décembre 2018
-
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.
Afficher la suite 

Votre réponse

2 réponses

Messages postés
23628
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 décembre 2018
0
Merci
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

.

Jessekamba
Messages postés
29
Date d'inscription
mercredi 21 juin 2017
Dernière intervention
7 décembre 2018
-
salut jordan45. j'ai quand meme reussi a avoir le resultat que je voulais. mais j'ai un autre petit souci, je te fais un capture et je met le code pour que tu voie et je t'explique aussi c'est quoi le souci.
Commenter la réponse de jordane45
Messages postés
29
Date d'inscription
mercredi 21 juin 2017
Dernière intervention
7 décembre 2018
0
Merci
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.
Commenter la réponse de Jessekamba