Entraînez-vous en adaptant votre CV en responsive

Je rencontre des difficultés sur le liseré, l'image et les titres

Sujet résolu

Benedicta93

14 janvier 2021 à 17:51:38

Malgré les différents posts, rencontre des difficultés sur l'exercice.

Je n'arrive pas à :

- retirer le liséré,

- mettre au centre les titres h1 et h4 de la partie "header",

- mettre l'image à gauche

<!DOCTYPE html>
   <hmtl>
   	  <head>
   	  	<meta charset="utf-8">
   	  	<link rel="stylesheet" href="stylecv.css">

   	  	<title>Entraînement CV part 3</title>
   	  </head>

   	  <body>
   	  	<header>
            <h1><strong>Emmanuelle Gayi</strong></h1>
            <h4>En formation sur Openclassroom <br/></h4>
   	  		<img src="images/montagne_mini.jpg" alt="photo" class="imageflottante"/>
         </header>

         <div id="conteneur"></div>
         
   	  	<section>
            <div class="sidebar"></div>

   	  			<div class="experience">
   	  				<p><h3>Mon expérience</h3></p>
   	  				<p>
   	  				<ul>
   	  					<li><strong>De 2018 à 2019</strong>: assistante recrutement</li>
   	  					<li><strong>De 2019 à 2020</strong>: assistante formation </strong></li>
   	  				</ul>
   	  				</p>
   	  			</div>

  	  				<div class="Competences">
   	  				<p><h3>Mes compétences</h3></p>
   	  				<p>
   	  				<ul>
   	  					<li>HTML5 et CSS3en cours d'obtention</li>
   	  					<li> Entretiens téléphoniques, physiques</a></li>
   	  					<li> Excel, word, PPT</li>
   	  				</ul>
   	  			</p>
   	  			</div>

   	  			<div class="formation">
   	  				<h3>Ma formation</h3>
   	  				<p>
                   <ul>
                   <li>Master manager des ressources humaines</li>
                   <li>Licence de psychologie</li>
                   </ul>       
                  </p>
   	  			</div>
            </div>
   	  	</section>
   	  </body>

header
{
	text-align: center;
	color: #FF99CC;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

h1 + p
{
	text-align: center;
}

.imageflottante
{
	float: right;
	border: 1px solid black;
	box-shadow: 2px 2px 2px black;
}

@media screen and (max-width: 1024px)
{
	.sidebar
	{
		display: none;
	}

	section
	{
		display: flex;
		flex-direction: column;
		width: auto;
	}
}


h3
{
	color: #6E4A46;
}

Si quelqu'un peut m'aider svp.

Merci beaucoup.

-RR-

15 janvier 2021 à 14:53:14

Bonjour,

pour te répondre dans l'ordre:

- retirer le liséré,

De quel liséré parles-tu ? Soit il manque une partie de ton CSS, soit je n'ai pas compris de quoi tu parles.

- mettre au centre les titres h1 et h4 de la partie "header",

Actuellement tes titres sont centrés dans ta page.

Par contre, ils se suivent et peut-être souhaites tu qu'ils soient les uns sous les autres ?

Dans ce cas il ne faut pas utiliser display:flex (ainsi que ses propriétés qui en découlent) sur header parce que ça force les éléments enfants à se placer côté à côté.

- mettre l'image à gauche

Peut-être peux-tu commencer par mettre ton image en première position dans ton header, afin de l'avoir dans un ordre logique au niveau du html (ce n'est pas obligatoire).

Quoi qu'il en soit un float:left sur ton image permettrait de la faire sortir du flux et l'afficher à gauche. Selon le besoin, ce n'est pas forcément la meilleure solution.

Après, difficile d'être plus précis. L'idéal serait d'avoir un exemple visuel du résultat que tu souhaites obtenir.

Ensuite, voici quelques points à corriger:

Balise Strong

Tu utilises des balises strong à plusieurs endroits, notamment dans tes titres. Si c'est pour mettre en gras, ça doit être fait en CSS et non avec du balisage html. Donc l'utilisation de ces balises fait doublons dans tes titres.

L'intérêt des balises est d'indiquer sémantiquement à quoi correspond chaque contenu. Dans le cas de la balise strong tu envois le message suivant: "ce texte est très important dans ma page".

De plus tes titres sont déjà des éléments sémantiques importants grâce à l'utilisation des balises appropriées.

source

Hiérarchie de titre

Il n'est pas correct d'avoir une hiérarchie de titre qui ne se suit pas.

Tu ne peux donc pas utiliser un titre h1 puis un titre h4 sans avoir entre les deux un h2 puis un h3.

HTML5 et fermeture de balise

Depuis HTML5, tout se qui ne se compose pas de deux balises (une ouvrante et une fermante) ne se termine plus par "/>" mais simplement par ">".

C'est le cas pour ton image qui peut simplement se terminer par ">".

En soit, ce n'est pas dramatique, mais quitte à apprendre, autant ne pas prendre de mauvaises habitudes.

En espérant que ces points puissent t'aider. Bon courage dans ton apprentissage !

-
Edité par -RR- 15 janvier 2021 à 14:56:25

DidierLucier1

16 janvier 2021 à 22:47:09

bonsoir je suis débutant mais il y a une chose qui ma sauté aux yeux dans votre fichier html tout au début..dans le fichier que vous nommer.... stylecv.css

voici la correction

Benedicta93

18 janvier 2021 à 14:45:10

Bonjour DidierLucier1,

Merci pour ta réponse. :)

J'ai appelé mon dossier CSS "stylecv.css",car j'ai plusieurs documents CSS liés à chaque exercice.

Bonjour RR,

Le liseret c'est le "sidebar" que j'ai mis sur le HTML.

Merci pour ta réponse, je vais corriger mes erreurs

je te montre le visuel que je souhaite obtenir :

-
Edité par Benedicta93 18 janvier 2021 à 14:56:12

Benedicta93

19 janvier 2021 à 18:48:55

Bonjour,

Merci pour votre aide, j'ai enfin réussi l'activité! :)