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   -
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.
A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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

.

0
Jessekamba Messages postés 54 Date d'inscription   Statut Membre Dernière intervention  
 
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.
0
Réponse 2 / 2
Jessekamba Messages postés 54 Date d'inscription   Statut Membre Dernière intervention  
 
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.
0

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses