Après moult essais et tentatives infructueuses, relecture de cours et recherche sur le forum, je me tourne vers vous car je n'ai toujours pas résussi à trouver la solution à mon problème.
Je suis sensé placer un liseré sur la gauche de mon CV, mais :
- Quand j'utilise la flex box, il se colle sous mon header et ne va pas jusqu'en haut (mais s'ajuste normalement avec mes sections.)
- Quand je le place avec position: absolute; j'arrive à le faire aller jusqu'en haut mais du coup il "écrase" mes catégories.
Une solution ?
D'avance merci !
(Et si vous voyez d'autres erreurs, n'hésitez pas !)
Mon code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CV Openclassrooms Activité HTML5</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<div class="imgours">
<a href="img/ours_alt.jpg"><img src="img/ours_alt_mini.jpg" class="imgflo" alt="Photo CV" title="Cliquez pour agrandir" /></a>
</div>
<div class="entete">
<h1> Benoît CORDIER </h1>
<div class="intro">"Cesse de croire et instruis toi" A.Gide</div>
</div>
</header>
<div id="ctnr">
<aside>
<img src="img/fond1_1.jpg" alt="fond" />
</aside>
<section>
<h2> Mon expérience </h2>
<ul>
<li><span class="dates">Sept. 2014 / Août 2017 : Education Nationale</span> - Collège J. Joudiou - Châteauneuf sur Loire</li>
<ul>
<li><span class="sous_titre">Assistant pédagogique</span></li>
<li>Aide aux devoirs quotidienne auprès des élèves</li>
<li>Mise en place d’un accompagnement spécifique auprès des élèves dyslexiques</li>
<li>Organisation de groupes de travail “Objectif brevet” pour les 3éme</li>
<li>Intervention en classe sur la méthodologie</li>
<li>Suivi personnalisé d’élève en collaboration avec l’équipe enseignante</li>
<li>Mise en place d’atelier ludique pour faciliter la prise de parole en cours des élèves</li><br />
</ul>
<li><span class="dates">Nov. 2010 / Mai 2011 : Association “Les Bouchons d’Amour”</span> - Orléans</li>
<ul>
<li><span class="sous_titre">Stagiaire chargé de communication</span></li>
<li>Réalisation de plaquettes et de carte de visite</li>
<li>Mise à jour du site internet</li>
<li>Création d’une nouvelle charte graphique</li><br />
</ul>
<li><span class="dates">Octobre 2010 : Entreprise ‘‘TWIDECO’’</span> - Orléans</li>
<ul>
<li><span class="sous_titre">Stagiaire assistant chargé de communication</span></li>
<li>Bilan de la communication antérieure de la société</li>
<li>Recherche thématique pour un débat avec invités</li>
<li>Vente d’espace publicitaire</li><br />
</ul>
<li><span class="dates">Nov. 2009 / Juin 2010 : Entreprise “COCHEZ”</span> - St Cyr en Val</li>
<ul>
<li><span class="sous_titre">Stagiaire chargé de communication</span></li>
<li>Organisation d’un évènement client pour les 10 ans de la société, dont l’établissement du budget global, la création et le suivi des invitations</li>
<li>Argumentaire, phoning et rendez vous clients</li>
<li>Communiqué interne sur les normes de sécurité sur les chantiers</li>
</ul>
</ul>
</section>
<section>
<h2> Mes compétences </h2>
<ul>
<li>Réalisation de la stratégie de communication globale pour un entreprenneur</li>
<li>Ecriture de communiqué de presse</li>
<li>Création du cahier des charges pour les graphistes</li>
<li>Réalisation d’affiches et plan de stand pour un salon</li>
<li>Anglais parlé et écrit (niveau B2)</li>
<li>Maîtrise du pack Office et de la suite Adobe</li>
</ul>
</section>
<section>
<h2> Ma formation </h2>
<ul>
<li><span class="dates">2011/2014</span> Licence de psychologie (L1 / L2) - Université François Rabelais à Tours</li>
<li><span class="dates">2009/2011</span> BTS Communication - Lycée Voltaire à Orléans</li>
<li><span class="dates">2008/2009</span> Hypokhâgne A/L - Lycée Pothier à Orléans</li>
<li><span class="dates">2007/2008</span> Baccalauréat S/SI Anglais européen Lycée - Benjamin Franklin à Orléans</li>
</ul>
</section>
</div>
</body>
</html>
Je regarde ça et je reviens vers toi quand j'ai fini de bidouiller si ça ne marche toujours pas.
Pour l'instant, j'ai ma barre sur le côté (avec des marges en haut et à gauche mais je devrais pouvoir résoudre ça) et tout mes textes à droite, faut que j'arrive à séparer mon en-tête de mes sections.
EDIT :
Réussi !
Enfin, en quelque sorte, j'ai fini par coller mon liseré en position: fixed; puisque je ne voulais pas qu'il défile et que je voulais me débarasser des marges et je n'y arrivais pas en flexbox.
Merci pour le coup de main en tout cas !
- Edité par BenoîtCordier 19 juillet 2018 à 14:43:33
Problème liseret - Activité CV - Cours HTML/CSS
× 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.
Compos sui.
Compos sui.
Compos sui.