Bonjour,

J'essaye de realiser l'exercice : "Activité HTML5 - Semaine 3 - structurer son CV", dans lequel je dois placer ma photo à droite en haut de page, mais malgré les heures passés dessus, et la recherche dans https://openclassrooms.com/forum/sujet/regles-et-bonnes-pratiques-du-forum , je n'arrive pas. 

 Maintenant je me retrouve avec deux photos, une au milieu du bloc et l'autre en haut à droite.

J'ai vu ceci aussi :

https://openclassrooms.com/courses/centrer-en-css

Mais j'ai tout essayé, et à chaque fois, je n'arrive pas !

Voici le HTML( le bloc en question c'est le "header", comme suit):

<header>             
  <h1>Cris Braga</h1><br/>
     <p><span class="especialiste">Especialiste dans les métiers d'accueil</span></p>                   
     <p><a href="image/braga.jpg" ><img
src="image/braga_mini.jpg" alt="Photo de Braga"></a></p>
                             
</header>

Et le CSS:

header
{
    font-family: '20_dbregular';/*utilisation de la police qu'on vient de definir*/
    font-size: large;
    width: 100%; /* On a indiqué une largeur (obligatoire) */
    margin: auto; /* On peut donc demander à ce que le bloc soit centré avec auto */   
    text-align: center;
    padding: 12px;   
    background-image: url(image/braga_mini.jpg);
    background-attachment: fixed; /* Le fond restera fixe */
    background-repeat: no-repeat; /* Le fond ne sera pas répété */

}


.especialiste
{
    color: black;
    font-weight: bolder;
    font-size: 32px;
}

Et finalement, le resultat dans le browser:

Merci de votre aide aide precieuse !!

-
Edité par @Arobase 15 janvier 2018 à 20:14:27

Salut, 

C'est normal d'obtenir deux images car tu en définis deux dans dans ton code : une dans ton HTML et une dans ton CSS.

Sans le cadre d'un CV on peut considérer que la photo apporte une information importante, par conséquent sa place est dans le HTML et tu peux la retirer du CSS.

Ensuite pour placer ton image, je te conseille de te pencher sur flexbox. ;) 

Le width:100% sur ton header est inutile, tu peux le retirer. 

-
Edité par Mewen_bzh 15 janvier 2018 à 20:51:11

Bonsoir,

Je rajoute :

le <br /> ligne 2 après le <h1> n'a rien à faire là! Si tu veux créer un espace de ce type, c'est en CSS que ça se passe!

Pour "optimiser" également ton CSS, ton <span> dans ton premier paragraphe ne sert à rien. Met la classe directement sur le <p>.

Aussi, il manque l'attribut title sur ton ancre.

-
Edité par Lord Morpheus 15 janvier 2018 à 22:09:25

Bonjour,

Juste pour vous remercier de m'avoir repondu, hier j'ai vu les réponses et j'ai essayé de les appliquer, j'ai reussi à fixer mon image et j'ai fait un peu de ménage dans le code comme indiqué par Morpheus, j'ai enregistré un vote pour chaque réponse, mais il faut répondre....mais je ne m'en sorts pas avec cet exercice depuis 2 jours, je me sens très mal et je doute de mes capacités à comprendre les cours sans avoir qqn à qui parler. Je vois là les limites du cours en ligne sans tuteur, il y a le forum qui est trés utile, mais pour moi cela ne suffit pas, puisque je n'y arrive pas. Je vais creer un nouveau sujet, malgré la deprime, je lache pas ! (d'ailleurs je suis à la recherche active de formation pro, présentiel).

Merci !

-
Edité par @Arobase 17 janvier 2018 à 12:05:35