Placement d'image sur un site web + une legende en dessous
Fermé
Jessekamba
Messages postés
54
Date d'inscription
mercredi 21 juin 2017
Statut
Membre
Dernière intervention
10 février 2020
-
Modifié le 6 déc. 2018 à 08:56
Jessekamba Messages postés 54 Date d'inscription mercredi 21 juin 2017 Statut Membre Dernière intervention 10 février 2020 - 7 déc. 2018 à 09:06
Jessekamba Messages postés 54 Date d'inscription mercredi 21 juin 2017 Statut Membre Dernière intervention 10 février 2020 - 7 déc. 2018 à 09:06
A voir également:
- Placement d'image sur un site web + une legende en dessous
- Traduire une page web - Guide
- Site de telechargement - Guide
- Site de vente en ligne particulier - Guide
- Site inaccessible - Guide
- Instagram web - Guide
2 réponses
jordane45
Messages postés
38144
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
21 avril 2024
4 650
6 déc. 2018 à 10:02
6 déc. 2018 à 10:02
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
.
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
54
Date d'inscription
mercredi 21 juin 2017
Statut
Membre
Dernière intervention
10 février 2020
7 déc. 2018 à 09:06
7 déc. 2018 à 09:06
voici mon code html:
et le css:
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.
<!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.
7 déc. 2018 à 08:49