Partage

Problème avec une image

Sujet résolu

27 septembre 2022 à 18:31:14

Bonjour tout le monde,

j'apprends tout juste à coder et là je suis face à un problème que je n'arrive pas à régler. Je m'explique :

j'essaie de faire en sorte qu'une image que j'ai surnommé "bannière" fasse toute la largeur de l'écran. Le problème c'est que quoi que je fasse, rien ne se passe hormis quand je mets dans le langage css

#bannière
{
	text-align: center;
}

Là la bannière va au centre sans problème.

par contre pour le reste quoi que je fasse, la bannière ne fait rien. Je vous montre mon html et mon css :

HTML :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="css/style.css" />
		<title>Ummah Esprit Nature</title>
	</head>
	
			

	<body>

		<header>
			<div id="logo">
				<img src="image/logo.png" alt="logo" />
			</div>

			<nav>
				<ul>
					<li><a href="#">Accueil</a></li>
					<li><a href="#">Environnement</a></li>
					<li><a href="#">Agriculture</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</header>

		<div class="bannière">
		<img src="image/bannière.png" alt="bannière" />	
		</div>



	</body>

CSS

header
{
	background-color: black;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;	
}

body
{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

#logo
{
	display: flex;
}

nav ul
{
	display: flex;
	list-style-type: none;
}

nav li
{
	margin-right: 15px;
}

nav a
{
	font-size:xx-large;
	color: white;
	text-decoration: none;
}

nav a: hover
{
	color: white;
}

#bannière
{
	width: 100%;
	height: auto;
}

Voilà ce que ca donne :

J'ai essayé plusieurs trucs mais rien y fait l'image ne fait rien ca reste comme ça, sauf si je la déplace au centre ou à droite. Peut être qu'on ne peut pas changer la dimension de l'image ? Pouvez-vous m'aider à régler ce problème svp ?

Désolé si la réponse parait vraiment évidente, je débute vraiment à peine.

Je vous remercie pour vos retour en tout cas.

Yorick

Aurélien10!

27 septembre 2022 à 18:49:13

Bonjour,

- Pas d'accents dans les noms de classe. Les accents c'est uniquement pour du texte pur

- Tu confonds id (où tu auras un # dans le css) et class (où tu auras un . dans le css)

- Penses a vider aussi le cache de ton navigateur

Activer les erreurs PDO / (julp) htmlspecialchars / FAQ PHP / Pas d'aide par MP

SayoLiebkha

27 septembre 2022 à 19:17:58

Aurélien10! a écrit:

Bonjour,

- Pas d'accents dans les noms de classe. Les accents c'est uniquement pour du texte pur

- Tu confonds id (où tu auras un # dans le css) et class (où tu auras un . dans le css)

- Penses a vider aussi le cache de ton navigateur

D'accord merci pour ton retour.

J'ai fais les corrections, et ca reste quand même à la même place :

HTML

<div id="banniere">
	<img src="image/banniere.png" alt="banniere" />	
</div>

CSS

#banniere
{
	width: 100%;
	height: auto;
}

Domi65

27 septembre 2022 à 19:37:49

Bonjour. Ton image n'étant que décorative (elle n'est pas porteuse d'information) il vaudrait mieux qu'elle soit en background du div qui la contient.

<div id="banniere" style="background: url('image/banniere.png') center no-repeat">
</div>

Cordialement.

-
Edité par Domi65 27 septembre 2022 à 19:38:29

SayoLiebkha

28 septembre 2022 à 11:44:03

Bonjour,

Idem ca ne fonctionne pas. Je n'arrive vraiment pas à changer la hauteur et la largeur de l'image. Je la déplace sans problème mais les dimensions quoi que je fasse rien...

AbcAbc6

28 septembre 2022 à 12:10:56

Bonjour,

+1 Domi65

Quand l'image de décoration est définie en CSS il existe background-size: cover; pour en modifier la taille.

https://developer.mozilla.org/fr/docs/Web/CSS/background-size

SayoLiebkha

28 septembre 2022 à 12:20:06

AbcAbc6 a écrit:

Bonjour,

+1 Domi65

Quand l'image de décoration est définie en CSS il existe background-size: cover; pour en modifier la taille.

https://developer.mozilla.org/fr/docs/Web/CSS/background-size

Merci pour votre retour. J'ai effectivement essayé background-size: cover; mais idem ca ne marche pas. J'ai essayé ceci

HTML

<div id="banniere">
<img src="image/banniere.jpg" alt="banniere" />  
</div>

CSS

#banniere 
{
    background: url('image/banniere.jpg')no-repeat;
    margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}

et regardez le résultat, c'est comme si l'image n'était pas "intégrée" dans le background :

AbcAbc6

28 septembre 2022 à 12:23:46

Mais mais c'est soit la balise <img> pour les image de 'contenu' OU soit la l'image en background pour les images de décoration.

Mais pas les deux ensemble, cela n'a aucun sens.

Supprime la balise <img>.

SayoLiebkha

28 septembre 2022 à 16:02:59

AbcAbc6 a écrit:

Mais mais c'est soit la balise <img> pour les image de 'contenu' OU soit la l'image en background pour les images de décoration.

Mais pas les deux ensemble, cela n'a aucun sens.

Supprime la balise <img>.

D'accord je comprends...

Du coup en html je suis sensé avoir

<div id="banniere"></div>

et en CSS

#banniere 
{
    background: url("image/banniere.jpg");
	margin-top: 15px;
    height: 200px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}

c'est ça ?

Le problème c'est que là l'image disparait carrément. J'ai vérifié plusieurs fois background: url("image/banniere.jpg") si c'était et le même chemin fonctionne quand je mets img dans html. J'ai forcément fais un oublie quelque part

Mewen_bzh

28 septembre 2022 à 16:14:50

Hello,

Difficile de juger si ton chemin est bon car nous ne connaissons pas ta structure de dossiers et de fichiers.

Je vais partir du principe que tu respectes un minimum les conventions à savoir : les images dans un dossiers "images" et les feuilles de style dans un dossier "styles" (les noms peuvent changer mais tu vois l'idée).

Pour ajouter une image depuis le HTML :

<img src="image/banniere.jpg" alt="banniere" />

Ici tu dis au navigateur d'entrer dans le dossier "image" et de chercher à l'intérieur de ce dossier l'image nommée "banniere.jpg". Classique, on sait d'après ton screenshot que cela fonctionne.

Pour ajouter une image depuis le CSS :

#banniere {
  background: url("image/banniere.jpg");
}

Cela par contre ne fonctionnera pas car ton dossier "image" n'est pas dans ton dossier "styles".

Il faudrait plutôt faire quelque chose comme ceci :

#banniere {
  background: url("../image/banniere.jpg");
}

afin de dire au navigateur : "sors du dossier "styles" puis entre dans le dossier "image" et herchec à l'intérieur de ce dossier l'image nommée "banniere.jpg".

Je ne réponds pas aux messages privés.

AbcAbc6

28 septembre 2022 à 16:25:47

Oui ça c'est le code minimal pour afficher l'image.

Le chemin peut être différent si le fichier .css n'est pas dans le même répertoire que le fichier .html.

Quel est la hiérarchie de vos fichiers? Pour savoir quel est l'url depuis le fichier appelant (ici le .css) quel est le chemin que vous parcourez dans la hiérarchie de vos fichiers?

Un exemple :

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Une bannière </title>
        <style>
            #banniere
            {
                background: url("https://picsum.photos/700/200") no-repeat center;
                background-size: cover;
                margin-top: 15px;
                height: 500px;
                border-radius: 5px;
                position: relative;
                box-shadow: 0px 4px 4px #1c1a19;
                margin-bottom: 25px;
            } 
        </style>
    </head>
    <body>
        <div id="banniere"></div>
    </body>
</html>

Ici j'ai agrandi la zone à 500px de haut pour que tu vois que l'image s'adapte à son conteneur.

SayoLiebkha

28 septembre 2022 à 17:52:01

Mewen_bzh a écrit:

Hello,

Difficile de juger si ton chemin est bon car nous ne connaissons pas ta structure de dossiers et de fichiers.

Je vais partir du principe que tu respectes un minimum les conventions à savoir : les images dans un dossiers "images" et les feuilles de style dans un dossier "styles" (les noms peuvent changer mais tu vois l'idée).

Pour ajouter une image depuis le HTML :
<img src="image/banniere.jpg" alt="banniere" /> 
Ici tu dis au navigateur d'entrer dans le dossier "image" et de chercher à l'intérieur de ce dossier l'image nommée "banniere.jpg". Classique, on sait d'après ton screenshot que cela fonctionne.

Pour ajouter une image depuis le CSS :
#banniere {
  background: url("image/banniere.jpg");
}
Cela par contre ne fonctionnera pas car ton dossier "image" n'est pas dans ton dossier "styles".

Il faudrait plutôt faire quelque chose comme ceci :
#banniere {
  background: url("../image/banniere.jpg");
}
afin de dire au navigateur : "sors du dossier "styles" puis entre dans le dossier "image" et herchec à l'intérieur de ce dossier l'image nommée "banniere.jpg".

C'était bien ça le problème, j'avais pas mis les deux ".." avant "image/banniere.jpg". Là ca fonctionne. C'est top merci !

Et merci à vous tous aussi pour votre aide.

Yorick

Aurélien10!

28 septembre 2022 à 17:53:35

super,

n'oublie pas de passer le sujet en résolu (bouton en haut a droite de ton 1er post)

Activer les erreurs PDO / (julp) htmlspecialchars / FAQ PHP / Pas d'aide par MP