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>
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à.
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, le forum est là pour ça :)
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: topright; /* Le fond sera placé 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"?
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 .
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, le forum est là pour ça :)
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
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, le forum est là pour ça :)
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
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 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
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)