Bonjour,

Je suis actuellement sur le projet créer son CV en site web. J'ai un problème avec la mise en page Flexbox sur mes listes à puce.

Voici mon code HTML :

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="SStyle.css">
	<script src="https://kit.fontawesome.com/ce6bb10a35.js" crossorigin="anonymous"></script>
	<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
	<title>CCV</title>
</head>
<body>
	<div id="bloc">
		<div>
			<div id="moi">
				<div>
					<img src="images/chien.jpg">
				</div>
				<div>
					<h2 class="connaissance">CONTACT</h2>
					<ul id="liste">
						<li>Adresse<br/> Le Loroux Bottereau, France</li>
						<li>Téléphone<br/> 06 22 19 24 62</li>
						<li>Email<br/> chrismaelle.henry.29@gmail.com</li>
						<li>Site Web<br/> www.name.com</li>
						<li>Skype<br/> @nom_dutilisateur</li>
					</ul>
				</div>
				<div>
					<h2 class="connaissance">À PROPOS DE MOI</h2>
					<p>Passionnée par l'E-sport et l'informatique depuis mon plus jeune âge, je réorientes ma carrière professionnelle dans le développement web afin de m'épanouir professionnellement mais également personnellement.</p>
				</div>
			</div>
			<div id=loisir>
				<h2 class="connaissance">LOISIRS</h2>
				<i class="fas fa-baby" aria-hidden="true"></i>
				<i class="fas fa-gamepad" aria-hidden="true"></i>
				<i class="fab fa-twitch" aria-hidden="true"></i>
			</div>
		</div>
		<div id="cv">
			<div>
				<h1><span>CHRISMAELLE</span> HENRY</h1>
				<h3><span>Dével</span>oppeuse web freelance</h3>
			</div>
			<div>
				<i class="fas fa-graduation-cap"></i>
				<h2 class="titre">FORMATION</h2>
				<hr>
				<ul>
					<li>
						<div>2018 - 2019<br/>Clisson</div>
						<div>
							<h2>LVH MEDICAL</h2>
							<h3>Secrétaire Médicale Téléphonique</h3>
							<p>Répondre au appel, organisation des plannings, évaluer le degrés d'urgence de l'état du patient.</p>
						</div>
					</li>
					<li>
						<div>2013 - 2014<br/>Orléans</div>
						<div>
							<h2>IFPM</h2>
							<h3>Auxiliaire de Puériculture</h3>
							<p>Evaluer l'état clinique du patient, réaliser les transmissions orales et écrites à l'ensemble de l'équipe, accompagner l'enfant dans les gestes de la vie quotidienne</p>
						</div>
					</li>
				</ul>
			</div>
			<div>
				<i class="fas fa-briefcase"></i>
				<h2 class="titre">EXPERIENCE PROFESSIONNELLE</h2>
				<hr>
				<ul>
					<li>
						<div>Août 2019 - Poste actuel<br/>Haute Goulaine</div>
						<div>
							<h2>TALMELIER D'AUJOURD'HUI</h2>
							<h3>Vendeuse en Boulangerie</h3>
							<p>Accueillir et orienter le client, réaliser des encaissements en espèce, chèque et carte bancaire, prise de commande.</p>
						</div>
					</li>
					<li>
						<div>Nov 2018 - Juil 2019<br/>Clisson</div>
						<div>
							<h2>LVH MEDICAL</h2>
							<h3>Secrétaire Médicale Téléphonique</h3>
							<p>Répondre au appel, organisation des plannings, évaluer le degrés d'urgence de l'état du patient.</p>
						</div>
					</li>
					<li>
						<div>Sept 2014 - Déc 2016<br/>ST-Hilaire-ST-Mesmin</div>
						<div>
							<h2>IME LES CHATELLIERS</h2>
							<h3>Auxiliaire de Puériculture</h3>
							<p>Evaluer l'état clinique du patient, réaliser les transmissions orales et écrites à l'ensemble de l'équipe, accompagner l'enfant dans les gestes de la vie quotidienne, organiser des activités adaptés au capacité de l'enfant</p>
						</div>
					</li>
				</ul>
			</div>
			<div>
				<i class="fas fa-pencil-alt"></i>
				<h2 class="titre">RECOMMANDATIONS</h2>
				<hr>
				<div id="reco">
					<div>
						<ul>
							<li>MAXIME KIEMAN</li>
							<li>Directeur, Mon agence</li>
							<li>Téléphone : 06 00 00 00 00</li>
							<li>Email : name@mail.com</li>
						</ul>
					</div>
					<div>
						<ul>
							<li>MAXIME KIEMAN</li>
							<li>Directeur, Mon agence</li>
							<li>Téléphone : 06 00 00 00 00</li>
							<li>Email : name@mail.com</li>
						</ul>
					</div>
				</div>	
			</div>
		</div>
	</div>
</body>
</html>

Et voici mon CSS :

html, body{

    padding: 0;

    margin: 0;

}

#bloc{

display: flex;

}

#bloc>div:first-child{

    background-color: rgb(254,202,7);

    width: 20%;

    min-width: 250px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}

.connaissance{

background-color: rgb(64,64,64);

color: rgb(254,202,7);

text-align: center;

padding-top: 6px;

padding-bottom: 3px;

font-size: 1.1em;

}

#loisir>i{

    font-weight: 900;

    font-size: 200%;

    margin-left: 15%;

    margin-bottom: 8%;

    margin-top: 4%;

}

#moi>div:first-child>img

{

    overflow:hidden;

    -webkit-border-radius:50%;

    -moz-border-radius:50%;

    border-radius:50%;

    width:150px;

    height:140px;

    display: flex;

  margin-left: auto;

  margin-right: auto;

  margin-top: 30px;

    margin-bottom: 30px;

}

#moi>div:nth-child(2)>ul{

    list-style-type: none;

}

#moi>div:nth-child(3)>p{

    text-align: justify;

    margin-left: 10%;

    margin-right: 10%;

    font-size: 0.8em;

}

#liste>li{

    font-size: 0.8em;

    margin-bottom: 13px;

}

#cv{

    width: 80%;

}

#cv>div:first-child{

    margin-left: 5%;

}

#cv>div>h1{

    font-weight: 300;

    margin-top: 80px;

    font-size: 3em;

    margin-bottom: 0;

}

#cv>div>h1>span{

    color: rgb(254,202,7);

    font-weight: 400;

}

#cv>div>h3{

    font-weight: 400;

    margin-bottom: 100px;

    margin-top: 0;

}

#cv>div>h3>span{

    border-bottom: solid;

    border-color: rgb(254,202,7);

}

.titre{

    font-weight: 500;

    font-size: 1.3em;

}

.fas.fa-graduation-cap, .fas.fa-briefcase, .fas.fa-pencil-alt{

    float: left;

    position: relative;

    color: rgb(254,202,7);

    font-size: 1.8em;

    margin-right: 25px;

    margin-left: 5%;

}

#cv>div{

    width: 90%;

}

#cv>div>hr{

    width: 100%;

    height: 2px;

    background-color: rgb(254,202,7);

    border : none;

    margin-left: 5%;

}

#cv>div:nth-child(2)>ul{

    display: flex;

    flex-direction: column;

}

#cv>div:nth-child(2)>ul>li{

    display: flex;

    flex-direction: row;

    justify-content: space-between;

}

#cv>div:nth-child(2)>ul>li h2, li h3{

    margin-top: 0;

    margin-bottom: 0;

}

#cv>div:nth-child(2)>ul>li>div:last-child{

    width: 65%;

}

#cv>div:nth-child(3)>ul{

    display: flex;

    flex-direction: column;

}

#cv>div:nth-child(3)>ul>li{

    display: flex;

    flex-direction: row;

    justify-content: space-between;

}

#cv>div:nth-child(3)>ul>li h2, li h3{

    margin-top: 0;

    margin-bottom: 0;

}

#cv>div:nth-child(3)>ul>li>div:last-child{

    width: 65%;

}

#reco{

    display: flex;

    flex-direction: row;

}

#reco>div:nth-child(2){

   padding-left: 5%;

   width: 20%;

   margin-right: 50%;

}

*{

    font-family: roboto, sans-serif;

}

Je n'arrive pas à trouver l'erreur de moi-même.

Je prends tous les conseils ! :)

Merci à vous

Bonne journée

-
Edité par ChrismaelleHenry 3 avril 2020 à 19:43:30

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci de colorer votre code à l'aide du bouton Code

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 Code 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: xml;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Liens conseillés

Règles générales du forum

ChrismaelleHenry

3 avril 2020 à 19:01:35

AbcAbc6

3 avril 2020 à 19:02:27

Lartak

3 avril 2020 à 19:36:09

Bonjour.

Pourrais-tu s'il te plait corriger l'indentation du code HTML, car il n'y en a aucune là, par conséquent ton code est illisible.

J'ai vu que tu supprimes le style de puce d'un ul dans ton code CSS, c'est peut-être lié à ça.

-
Edité par Lartak 3 avril 2020 à 19:36:23

Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.

3 avril 2020 à 19:46:31

Bonjour

Merci pour ta réponse.

Est ce que mon HTML fonctionne maintenant ? S'il ne fonctionne pas quelle code dois-je prendre pour qu'il puisse être lisible ?

Effectivement j'ai supprimé le style de puce pour ul qui est dans la partie contact, j'ai tout de même enlevé la suppression dans le doute mais cela ne change rien.

AliasDmc

4 avril 2020 à 9:54:49

Bonjour chrismaelleHenry,

A partir du moment ou tu définis en css un "display : ... ", tu redéfinis le type de l'élément.

Donc si tu mets un display:flex sur un li ce dernier perd sont type "list-item"

Découvrez les Css avec la zonecss.fr

RomainMacé1

11 février 2022 à 17:16:29 - Message modéré pour le motif suivant : Merci d'utiliser le bouton code du forum pour insérer votre code

11 février 2022 à 17:21:03

@RomainMacé1 Bonjour, merci de ne pas déterrer d'ancien sujet résolu.

Déterrage

Citation des règles générales du forum :

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

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

Forums des Zéros

Les puces disparaissent avec flexbox

Merci de colorer votre code à l'aide du bouton Code

Liens conseillés

Déterrage

Les puces disparaissent avec flexbox

Merci de colorer votre code à l'aide du bouton Code

Liens conseillés

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs