Bonjour ,

Je suis au chapitre " Mettez en page votre site " partie 6 "TP créez un site pas à pas". J'essaye depuis maintenant 2 semaines d'inclure une image en tant que bannière (comme dans l'exemple de Mathieu Nebra). Impossible de l'a faire apparaître. J'ai essayé de prendre une photo d'internet mais la photo s'affiche en grand et est flou (et je ne parvient pas à la redimensionner avec CSS) , j'ai pris une photo du site Canva en format bannière, mais celle-ci ne s'affiche pas sur mon site. J'ai même tenté de prendre la même bannière du cours (sanfransisco) et pareil la bannière n'apparait pas.

Merci par avance.

Chloé P

-
Edité par ChloéPinazza 18 janvier 2021 à 17:47:49

Salut, pour le côté flou essayé de modifier les dimensions de l'image, faire afficher l'image dans une zone plus petite alors.

Et pour les images qui ne s'affiche pas, peut-être le format(l'extension) n'est pas bon. Montre ton code premièrement

Salut et merci de votre réponse ; J'ai déjà essayé de redimensionner l'image mais ne se passe.

Mon code ne s'affiche pas entièrement. Je ne comprends pas pourquoi

	&lt;header&gt;<div>
			<div>
				<img src="logo_site_test.png" alt="Logo site" /><h1>Embrace your hair</h1>
			</div>
			<h2>Your next capillary journey</h2>
		</div>

		&lt;nav&gt;<ul><li><a href="#">Accueil</a></li>
				<li><a href="#">Représentation</a></li>
				<li><a href="#">Contact</a></li>
			</ul>&lt;/nav&gt;&lt;/header&gt;
		<div>
			Retour sur notre héritage...
		</div>
			<a href="#">Voir l'article <img src="sanfransisco.jpg" alt="" /></a>

-
Edité par ChloéPinazza 17 janvier 2021 à 14:36:55

Quelle est l'image qui s'affiche pas? Y'en a deux dans ton code

Tu peux donner des valeurs aux attributs width et height de la balise IMG, pour l'image qui est floue

-
Edité par Asmitta 17 janvier 2021 à 17:57:22

essaye un petit

Ctrl + F5

ou

Ctrl + Maj + Suppr

ca vide le cache navigateur

ah ou et perso moi j'ai copié ton code, et j'ai rien vu d'anormal, les images (que j'ai changées) s'affichent correctement

-
Edité par SwannArnal 17 janvier 2021 à 18:45:02

Bonjour, Merci de modifier le titre de votre sujet pour un titre descriptif de votre problématique. Si vous poster on se doute que vous avez un problème, inutile de l'indiquer dans le titre du sujet, cela n'apporte aucune information quant au contenu du sujet.

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : Problème bannière)

Liens conseillés

• Règles générales du forum

>> Mon code ne s'affiche pas entièrement. Je ne comprends pas pourquoi

C'est parce que vous n'avez pas sélectionner le bon langage dans la liste proposée.

Pour insérer du code sur le forum utilisez le bouton code </>. En image cela donne :

---

Bonsoir, l'image du pont de San Francisco, dans le cours , est une image de fond, pas une image insérée avec la balise <img>;

Les images de décorations devrait être insérées en CSS puisque cela fait partie du design, les images apportant du contenu doivent être insérées avec la balise <img> avec un attribut alt remplit avec une description de l'image; 

  Pour plus d'info voir => https://developer.mozilla.org/fr/docs/Web/CSS/background-image

@Asmitta 

Mon image pour le logo s'affiche très bien, c'est l'image sanfransisco.jpg qui ne s'affiche pas. Toutes les images que je mets à cet endroit du code ne s'affiche pas. 

Je trouve ton code bon pourtant, inspecte ton code avec ton navigateur et regarde la console. Il devrait y avoir les raisons de l'absence d'image là.

Soit ton chemin n'est pas bon, soit c'est l'extension .JPEG peux être au lieu de .jpg

J'ai vérifié plusieurs fois mon code via validator.w3.org et tout est ok. Je pense que ca venait de l'image, car là, j'en ai trouvé une autre et elle apparait correctement sur mon site.

En revanche est ce que tu pourrais me dire où widht et height doivent se placer exactement pour img stp.

Parce que j'ai essayé et j'ai vu que ça fonctionnait mais mal car je l'avais placé au mauvais endroit et surtout "widht...% height...%" apparaissaient sur mon site.

<a href="#" class="bouton_rouge">Voir l'article <img src="original.jpeg" alt=""/></a>

Original.jpeg est ma nouvelle image qui fonctionne.

-
Edité par ChloéPinazza 18 janvier 2021 à 19:17:31

ChloéPinazza a écrit:

En revanche est ce que tu pourrais me dire où widht et height doivent se placer exactement pour img stp

Bonjour, width et height sont des attributs de la balise <img>

https://developer.mozilla.org/fr/docs/Web/HTML/Element/Img#attributs