Il est temps de travailler la mise en page ! Pour le moment, nos pages étaient très, comment dire... verticales. On peut travailler le sens de lecture et profiter de la puissance de la mise en page CSS pour nos pages !
Je vais vous demander ici de structurer la page comme ceci :
A gauche, un liseré (purement décoratif, mais vous pouvez aussi mettre des informations à l'intérieur)
A droite, le contenu de votre CV, qui contiendra à l'intérieur, de gauche à droite les sections suivantes :
Mon expérience
Mes compétences
Ma formation
Cela devrait donner quelque chose comme ceci :
Si la hauteur du liseré peut être définie en valeur absolue (en pixels), tout le reste de la mise en page doit être en valeur relative (pourcentages). Le contenu doit occuper tout l'espace en largeur, quelle que soit la largeur de la fenêtre.
Bonjour,
Je n arrive pas à mettre la photo avec la présentation tout en haut du cv à cause de se liseré mis en place. j'en perds mon latin.
<h1 id="title">katy plouzeau</h1> <p>Aide à Domicile avec une solide expérience, capable de réaliser toutes les taches demandées en temps et en heure. Personne soucieuse d'obtenir des résultats dotés d'une capacité de communication interpersonnelle.</p><br/> </div> </div> </header>
<div class="element"> <div> <h2>Mon expérience et Compétence</h2><br/>
<h3>07/2015 01/2017<br/><em> Aide à domicile C.C.A.S CESTAS</em></h3>
<ul> <li>Entretient de la maison</li> <li>Aide à la toilette à une personne alitée</li> <li>Accompagnement au rendez-vous médical</li> <li>Effectuer des courses en respectant les habitudes alimentaires</li> <li>A proposer des jeux de stimulation de la mémoire et jeux de société</li> <li>Promenade</li> <li>Aide dans les taches administratives</li> <li>Préparation des repas</li> </ul>
<h3>10/2013 06/2015<br/><em> Aide à domicile A.D.M.R Allevard et st Pierre d'Allevard</em></h3>
<ul> <li> Entretient domicile </li> <li> Aide à la toilette à une personne alitée </li> <li> Suivie d'une bénéficiaire en maltraitance morale et physique </li> <li> Application de bas de contention </li> <li> Préparation de repas </li> <li> Aide au couché </li> <li> Transfere à l'aide du disque 360° (soulève malade) </li> <li> Promenade et jeux </li>
</ul> </div> </div>
<div class="element"> <div> <h2>Ma formation</h2>
<div id="text"> <p>Alors là c'est simple....j'ai tout appris sur le tas.</p> </div> </div> </div>
Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: c;">Votre code ici</pre>.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
<pre class="brush: c;css</pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Katy Plouzeau</title>
<link rel="stylesheet" type="text/css" href="CSS/cvkatyplouzeau.css">
</head>
<body>
<div id="conteneur">
<div class="element">
</div>
<header>
<div class="element">
<div id="pdp">
<a href="Images/katy.jpg" target="_blank"><img src="Images/katy_mini.jpg" alt="photo d'identité"/></a>
<h1 id="title">katy plouzeau</h1>
<p>Aide à Domicile avec une solide expérience, capable de réaliser toutes les taches demandées en temps et en heure. Personne soucieuse d'obtenir des résultats dotés d'une capacité de communication interpersonnelle.</p><br/>
</div>
</div>
</header>
<div class="element">
<div>
<h2>Mon expérience et Compétence</h2><br/>
<h3>07/2015 01/2017<br/><em> Aide à domicile C.C.A.S CESTAS</em></h3>
<ul>
<li>Entretient de la maison</li>
<li>Aide à la toilette à une personne alitée</li>
<li>Accompagnement au rendez-vous médical</li>
<li>Effectuer des courses en respectant les habitudes alimentaires</li>
<li>A proposer des jeux de stimulation de la mémoire et jeux de société</li>
<li>Promenade</li>
<li>Aide dans les taches administratives</li>
<li>Préparation des repas</li>
</ul>
<h3>10/2013 06/2015<br/><em> Aide à domicile A.D.M.R Allevard et st Pierre d'Allevard</em></h3>
<ul>
<li> Entretient domicile </li>
<li> Aide à la toilette à une personne alitée </li>
<li> Suivie d'une bénéficiaire en maltraitance morale et physique </li>
<li> Application de bas de contention </li>
<li> Préparation de repas </li>
<li> Aide au couché </li>
<li> Transfere à l'aide du disque 360° (soulève malade) </li>
<li> Promenade et jeux </li>
</ul>
</div>
</div>
<div class="element">
<div>
<h2>Ma formation</h2>
<div id="text">
<p>Alors là c'est simple....j'ai tout appris sur le tas.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Je n arrive pas à mettre la photo avec la présentation tout en haut du cv à cause de se liseré mis en place. j'en perds mon latin.
exercice semaine 3
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)