Je suis bloquée à l'exercice du CV de la semaine 2 et viens vous demander de l'aide.
J'aurais aimé que l'en tête de mon CV soit comme celui du CV de Mathieu Nebra : la photo flottante à côté de mon nom (h1) et métier (p) et par conséquent, ces derniers centralisés l'un par rapport à l'autre. Or, j'ai la photo flottante seulement à côté de mon nom, ce qui "décentralise" la ligne de texte métier par rapport à mon nom. De plus, cela fait un grand écart entre lignes. Voici les photos pour illustrer, ainsi que mes codes.
Je vous remercie par avance pour votre disponibilité et patience.
Natalia
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>CV Openclassrooms Natalia Vaz</title>
</head>
<body>
<a href="img/this_is_not_me.jpg"> <img src="img/this_is_not_me_mini.jpg" class="photoflottante" alt="Photo CV" title="Cliquez pour agrandir" /></a>
<h1>Natalia Vaz</h1>
<p class="intro">
Communication et management de projets
</p>
Alors le problème est l'image tu remarques que si tu la retire tout ce réaligne.
Place le code de ton image après ton paragraphe ayant pour classe "intro" comme ceci :
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>CV Openclassrooms Natalia Vaz</title>
</head>
<body>
<h1>Natalia Vaz</h1>
<p class="intro">
Communication et management de projets
</p>
<a href="img/this_is_not_me.jpg"> <img src="img/this_is_not_me_mini.jpg" class="photoflottante" alt="Photo CV" title="Cliquez pour agrandir" /></a>
Ensuite le problème si tu rafraîchis ta page c'est que l'image est bien à droite, le texte est bien aligné mais l'image est trop basse pour ceci on utilise :
margin-top:-100px;
Margin soit la marge et top soit le haut donc l'espace entre le haut et ton image.
Ici on utilise une valeur négative (-) pour lui dire de remonter si j'avais pas mis le "-" l'image serait descendue.
Ainsi si tu modifier la valeur (100) tu peux bouger l'image.
Donc j'ai mis 100 mais j'ai pas l'image donc à toi d'ajuster.
Merci d'avoir pris le temps pour me dépanner. J'ai aussi essayé ta solution, mais je ne peux pas dire pourquoi, cela marche moins bien que la solution proposée ci-dessus.
Je pense aussi qu'un des objectifs de l'exercice était d'utiliser le float car à ce stade du cours la balise <header> n'a pas encore été montrée. Mais si elle le sera par la suite rien ne m'empêche de pratiquer dès maintenant.
Je mets le code avec le rendu ci-dessous. N'hésite pas à me signaler s'il y a eu erreur de ma part.
Bonne fin de dimanche à toi.
Natalia
<body>
<header>
<div>
<h1>Natalia Vaz</h1>
<p class="intro">Communication et management de projets</p>
</div>
<a href="img/this_is_not_me.jpg" class="photoflottante">
<img src="img/this_is_not_me_mini.jpg" alt="Photo CV" title="Cliquez pour agrandir" />
</a>
</header>
Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.
Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre. En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.
Au lieu de déterrer un sujet il est préférable :
soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
soit de créer un nouveau sujet décrivant votre propre contexte
ne pas répondre à un déterrage et le signaler à la modération
Rêve : vivre de l'informatique !