Partage

Centrer une Image (HTML) via le CSS

apprenez-a-creer-votre-site-web-avec-html5-et-css3/pratiquez-4

27 juillet 2017 à 19:52:19

Bonjour,

Je suis sur un exo du cours suivant:

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/pratiquez-4

J'ai tout réussi sans souci mais je bloque sur une consigne: Centrez la figure (image) et sa description 

J'ai essayé en entrant dans le code HTML dans la partie <figure> pour y insérer un attribut "class" (j'ai aussi essayé en attribut "id" en vain). Et dans mon code CSS j'ai tenté de centrer la figure (image+texte) avec "background-position:center" Mais ça ne marche pas.

Je vous mets ici le code HTML:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <link rel="stylesheet" href="style.css" />

        <title>Les cupcakes</title>

    </head>

    <body>

      <h1>Vive les cupcakes</h1>

      <p>J'ai découvert les cupcakes lors d'un voyage à <a href="https://fr.wikipedia.org/wiki/New_York">New York</a>... et depuis c'est une véritable passion. Sur mon site, vous saurez <strong>tout</strong> sur les cupcakes !</p>

      <p>Un cupcake ? C'est ça :</p>

      <figure>

        <img class="ma-classe" src="cupcake.jpg" alt="Cupcake" />

        <figcaption>Un cupcake</figcaption>

      </figure>

      <p>Délicieux non ? Sur mon site, je vous présenterai :</p>

      <ul>

        <li>Les différentes variétés de cupcakes</li>

        <li>Leur histoire</li>

        <li>Leurs recettes</li>

      </ul>

    </body>

</html>

ET ici mon code CSS:

h1

{

    color:red ;

    font-size: 2em ;

}

.ma-classe {

  background-position:center;

}

ul

{

  border:2px grey solid;

  box-shadow: 2px 1px 4px aqua;

}

a:hover

{

  font-weight:bold;

}


Qu'en pensez vous? Merci d'avance pour votre aide. Je galère dessus depuis 2h je comprends pas ce que je fais mal.

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
certifiante
Financée
à 100%
27 juillet 2017 à 20:07:18

Salut, tu peux faire :

<center>
   <img class="ma-classe" src="cupcake.jpg" alt="Cupcake" />
   <figcaption>Un cupcake</figcaption>
</center>

après le bot le valide pas mais le résultat est là.

Cordialement Thomas.



27 juillet 2017 à 20:18:45

Merci!

Tu veux dire de remplacer <figure>... </figure> par <center>... </center>?

En fait le html était déjà inscrit ainsi dans l'exo j'ai du appliquer les consignes à partir d'un HTML déjà existant, et donc les balises <figure> existaient déjà.

Staff 27 juillet 2017 à 20:27:50

Bonjour,

Tom Martin > "center" c'est NON. C'est obsolète depuis 1999 (authentique, hein, c'est depuis la sortie de HTML4.0.1). C'est une très mauvaise pratique. Le style ça se fait dans le CSS.

NassNascimento > "background-position" c'est pour définir la position d'un… background, d'un fond. Ici, tu veux centrer une image et du texte, du contenu. Lis cet article : https://openclassrooms.com/courses/centrer-en-css .

-
Edité par Lamecarlate 27 juillet 2017 à 20:28:23

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
27 juillet 2017 à 21:08:55

Merci Lamecarlate !

En fait, j'ai un souci lol. Je ne veux pas user d'autres moyens. Si dans cet exo on me demande ça, c'est obligatoirement que on l'a vu dans le cours. Donc j'essaie les manip vues dans le cours.


Le lien que tu m'envoies sont d'un autre cours avec d'autres manip surement plus avancées. Je sais qu'il existe surement d'autres moyens car je débute mais il me semble avoir vu dans le cours que nous pouvions faire un background sur une image. 

Je te copie ici l'explication du cours que j'essaie d'appliquer : 

"Ainsi, si je veux afficher un soleil en image de fond (figure suivante), en un unique exemplaire (no-repeat), toujours visible (fixed) et positionné en haut à droite (top right), je vais écrire ceci :"

body
{
background-image: url("soleil.png");
background-attachment: fixed; /* Le fond restera fixe */
background-repeat: no-repeat; /* Le fond ne sera pas répété */
background-position: top right; /* Le fond sera placé en haut à droite */
}

Un soleil placé en image de fond en haut à droite


A la différence, je ne peux pas apporter l'image dans mon css car elle est déjà existante dans l'exercice en HTML (l'HTML était déjà codé) . Si je l'a mets de cette manière, mon image sort en doublon puisque elle existe en HTML et CSS. Donc je dois me référer au HTML il me semble pour lui donner le style que je souhaite. Voilà pourquoi j'utilise l'attribut "class=" puisque nous l'avons vu en cours, on peut modifier une image de cette manière. Le "background" ne fonctionne pas avec l'attribut "class"? 

27 juillet 2017 à 21:22:08

Lamecarlate a écrit:

Bonjour,

Tom Martin > "center" c'est NON. C'est obsolète depuis 1999 (authentique, hein, c'est depuis la sortie de HTML4.0.1). C'est une très mauvaise pratique. Le style ça se fait dans le CSS.

NassNascimento > "background-position" c'est pour définir la position d'un… background, d'un fond. Ici, tu veux centrer une image et du texte, du contenu. Lis cet article : https://openclassrooms.com/courses/centrer-en-css .

-
Edité par Lamecarlate il y a environ 1 heure


D'accord mon capitaine!!!! 

-
Edité par Tom Martin 27 juillet 2017 à 21:22:27

Staff 27 juillet 2017 à 21:27:50

Il doit y avoir une mécompréhension dans le cours : si l'image est dans le HTML on ne peut pas travailler dessus avec les propriétés CSS "background" ; c'est comme vouloir modifier un tableau en peignant le mur par-dessous.

Peux-tu me donner la page exacte où tu as vu cet exemple, et celle où il y a l'exercice ?

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
27 juillet 2017 à 21:48:03

Je me trompe peut être, il se peut que j'ai mal compris. Voilà pourquoi j'insiste ici car mon but est vraiment de comprendre ce qui cloche.

Voici la partie du cours que je suis qui traite "les images", il s'agit de la partie "images de fond":

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-couleur-et-le-fond

Voici l'exercice qui me pose problème, il s'agit de la 4ème consigne à gauche :
"Centrez la figure (image) et sa description "

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/pratiquez-4

Voici là encore une capture d'écran d'un résumé du cours qui dit qu'on peut background une image pour la positionner où on veut (voilà pourquoi j'essaie de la centrer avec "class" dans le HTML pour l'indiquer en "background-position:center" dans mon CSS.)



Lamecarlate a écrit:

Il doit y avoir une mécompréhension dans le cours : si l'image est dans le HTML on ne peut pas travailler dessus avec les propriétés CSS "background" ; c'est comme vouloir modifier un tableau en peignant le mur par-dessous.

Peux-tu me donner la page exacte où tu as vu cet exemple, et celle où il y a l'exercice ?



-
Edité par NassNascimento 27 juillet 2017 à 21:54:58

Staff 28 juillet 2017 à 7:06:07

Le cours "les couleurs et le fond" traitent d'une *façon* d'utiliser les images. Qui n'est pas celle qui t'est demandée dans l'exercice.

C'est simple : si tu as une "<img>" dans le HTML, ce n'est pas une image de fond (ou d'arrière-plan, ou de background). Donc on ne peut pas agir dessus avec "background-position" en CSS. (cf mon pitoyable exemple avec le tableau et le mur)

Pour l'exercice : oublie que c'est une image, ce n'est pas ça qui est important. Ce qui est important c'est de centrer un bloc (ici "figure") ou son contenu.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
11 janvier 2018 à 20:31:24

je suis sur ce même exercice et impossible de centrer mon image? puis je avoir de l'aide s'il vous plait?

Staff 11 janvier 2018 à 22:02:25

Bonjour MelD2, crée un nouveau sujet s'il te plaît au lieu de squatter celui-ci, en donnant le code que tu as écrit.
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
4 février 2018 à 1:36:05

il te demmande de centré la <figure>

donc pas l'image ni la description .

en css ca donne ca :

figure

      {

  text-align: center;      pour le texte

  display: block;

  margin:auto;pour l'image

      }

9 mai 2018 à 14:13:20

Bravo et Merci MouradKesr

Il s'agit de la bonne réponse. Moi aussi j'ai buté sur le problème et maintenant ça marche.

10 mai 2018 à 15:41:51

  display: block;

  margin:auto;pour l'image

a quoi servent ces paramètres ? 

J'ai essayé avec juste "text-align" et ça marche très bien.

11 mai 2018 à 15:19:07

AntoineMondange a écrit:

  display: block;

  margin:auto;pour l'image

a quoi servent ces paramètres ? 

J'ai essayé avec juste "text-align" et ça marche très bien.

Bonjour AntoineMondange

Ces attributs  sert pour centrer l'image, mais le plus idéal est de le faire comme ca   

<style type="text/css">
.ma-classe { margin-left:auto; margin-right:auto; display:block}
</style>


Pour text-align, il sert tout simplement a center le text :)



Staff 12 mai 2018 à 21:08:33

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.

Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Déterrage

Citation des règles générales du forum :

Avant de poster, demandez-vous si ce que vous allez dire apporte quelque chose au sujet. Si votre message n'apporte rien, vous ferez perdre du temps à tout le monde et le sujet pourrait dévier ou devenir difficile à suivre.

Aussi, vérifiez la date du topic. Le déterrage de topic nuit au bon fonctionnement du forum et est interdit. Utilisez les boutons pouce en haut pour dire merci. Si le topic date de plus de deux mois sans réponses, mieux vaut ne pas répondre. Si vous avez une question similaire, créez plutôt votre propre sujet en détaillant votre contexte

Je ferme ce sujet. Me contacter par MP si besoin.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!