Partage

Alignement de box (flexbox)

Sujet résolu

16 décembre 2018 à 0:20:50

Bonsoir,

J'ai un souci de placement que je n'arrive pas à résoudre... donc je fais appel à vous

En gros, je voudrais que les 3 zones (expériences, compétences, formations) soient cotes à cotes et le qu'un liseré blanc soit sur la droite, sauf que là, le liseré et bien ou je veux, mais les box non, je n'arrive pas à les placer cotes à cotes et plutôt centrée..

Si quelqu'un voit pourquoi je lui en serais reconnaissant

Code HTML :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Mon CV</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="cv.css">
	</head>
	<body>
		
				<header>			
					<section class="align">
						<h1>Maxime BUJEAU</h1>
							<p>Étudiant à l'IMIE école de la filière numérique, je souhaites par la suite travailler au Puy du Fou dans le secteur des réseaux et systèmes, ou à la Warner Bros à Londres.</p>
							<a href="Img.png"><img class="image1" src="Img_mini.png" alt="photo maxime bujeau" title="Photo"></a>

					</section>
				</header>
					<main>			
						
							<div class="lisere">
							</div>
								<section>
									<div class="experience">
										<h2>Mon expérience</h2>
											<p>
												<ul>
													<li>2018 (Juillet - Septembre) : Hôte de caisse Carrefour City</li>
													<li>2018 (Juillet) : Réaprovisionneur rayon liquide Leclerc</li>
													<li>2013-2017 : Hôte de caisse Conforama</li>

												</ul>
											</p>
									</div>
								</section>	
									<div class="competences">
										<h2>Mes compétences</h2>

										<p>
											<ul>
												<li>Méthode merise pour la base de donnée (bases)</li>
												<li>SQL (notions)</li>
												<li>Python (notions)</li>
												<li>PHP (notions)</li>
												<li>HTLM 5 (notions)</li>
												<li>CSS 3 (notions)</li>
												<li>VMware (bases)</li>
												<li>Active Directory (notions)</li>
												<li>Procédures d'encaissements (avancé)</li>
												<li>Réponse au standard (avancé)</li>
												<li>Anglais (avancé)</li>
											</ul>
										</p>
								</div>	
								</section>

								<section>
								
									<div class="formation">
										<h2>Ma formation</h2>

										<p>
											<ul>
												<li>2018-2023 : IMIE école de la filière numérique
													<ul><li>2018-2019 : IT Start, 6 mois de formations général sur l'informatique, avec spécialisation sur le domaine des réseaux et systèmes (OPS, Opérateur Réseaux et Systèmes) et 5 mois de stage</li>
														<li>2019-2021 : Titre profesionnel RNCP Administrateur Réseau et Système (ASR) en alternance</li>
														<li>2021-2023 : Titre professionnel RNCP Chef de Projet en Conception de Systèmes Informatique (CPCSI) en alternance</li>
													</ul>
												</li>
												<li>2018 : SST</li>
												<li>2017-2018 : AFPA, Titre profesionnel Agent de Loisirs</li>
												<li>2011-2013 : Lycée ST Gabriel Nantes Océan, BAC Profesionnel Service en milieu rural</li>
												<li>2010-2011 : Lycée STE Anne, Première année Bac Profesionnel hôtellerie restauration option cuisine</li>
												<li>2008-2010 : Lycée STE Anne,BEP hôtellerie restauration option cuisine</li>
									</section>
											</ul>
										</p>
									</div>
							</main>	

							<footer>
								<a href="tel:+33600000000"><img src="mobile_mini.png" alt="Téléphone mobile"></a>
						 		<a href="mailto:maxime.bujeau"><img src="mail_mini.png" alt="Mail"></a>
						 		<a href="callto:mbujeau"><img src="skype_mini.png" alt="Skype"></a>
							</footer>
						
	</body>
</html>

Code CSS :

@font-face
{
	 font-family: '3dumbregular';
    src: url('Fonts/3Dumb-webfont.eot');
    src: url('Fonts/3Dumb-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/3Dumb-webfont.woff2') format('woff2'),
         url('Fonts/3Dumb-webfont.woff') format('woff'),
         url('Fonts/3Dumb-webfont.ttf') format('truetype'),
         url('Fonts/3Dumb-webfont.svg#3dumbregular') format('svg');

}

body
{
	background-image: url("fond.jpg");
}

h1
{
	color: #F78181;
	font-family: '3dumbregular', Arial, Serif;


}


h2,p,ul,li

{
	color: white;
}

.image1
{
	float: right;
    margin-left: 50%;
    margin-right: 40%; 
    margin-top: 2%;
    border: 2px white dashed;
    border-radius: 15px;
    box-shadow: 6px 6px 10px white;
}

.align
{
	text-align: center;
}



.lisere
{
  position: absolute;
  width: 100px;
  height: 100%;
  background: white;
  margin-right: 100px;
}

.experience, .competences, .formation

{
	display:flex;
	flex-direction: row;
    width:30%;
    vertical-align:top;
    background-color:black;
    color:white;
    font-weight:bold;
    border:1px;
    box-shadow:10px 11px 8px gray;
    border-radius:18px 18px 18px 18px;
    opacity:0.82;
}

Actuellement en 2ᵉ année de formation à Campus Academy, en spécialité réseau et système (Titre professionnel Administrateur Système et Réseaux). Bénévole pour une entreprise de jeux en ligne multiplateforme.

lk77

16 décembre 2018 à 14:27:24

Salut,

tu as un problème de markup html, balise section pas ouverte correctement ou pas fermée, ça casse complétement ton html.

ça doit poser des problèmes vu que ton css ne s'applique plus correctement.

t'entend quoi par côte à côte ? vu qu'un c'est un cv je dirais les uns en dessous des autres. Auquel cas c'est flex-direction:column qu'il faut utiliser.

-
Edité par lk77 16 décembre 2018 à 14:34:32

Aquilamaximus

16 décembre 2018 à 14:59:31

Bonjour,

C'est pour cet exercice.

J'ajusterais le contenu des rubriques par la suite mais en gros je voudrais (bon ça reste un schéma les 3 blocs expériences, compétences, formation sont alignés normalement ) :

BryanThoury1

16 décembre 2018 à 15:40:42

Salut, voila rajoute dans ton css :

.experience, .competences, .formation

margin-left: 15%;

puis rajoute ceci en bas de ton CSS

.liens{
  margin-left: 15%;
}

et dans ton code HTML ta partie avec ton numero ton skype ton mail rajoute une div lien

                        <div class="liens">
                            <footer>
                                <a href="tel:+33600000000"><img src="mobile_mini.png" alt="Téléphone mobile"></a>
                                <a href="mailto:maxime.bujeau"><img src="mail_mini.png" alt="Mail"></a>
                                <a href="callto:mbujeau"><img src="skype_mini.png" alt="Skype"></a>
                            </footer>
                        </div>

Aquilamaximus

16 décembre 2018 à 21:58:16

Bonsoir,

Ils restent quand même les uns en dessous des autres et par dessus le liseré.

Et j'ai modifié le problème de <section> juste après avoir posté mon message donc cela ne change rien à la mise en page.

-
Edité par Aquilamaximus 16 décembre 2018 à 21:59:12

Zoki_Marciano

17 décembre 2018 à 0:02:23

Il faut refaire le découpage pour pouvoir aligner correctement.

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

lk77

17 décembre 2018 à 8:35:32

Pourquoi avoir mis le lisere en absolute ?

normalement tu dois tout pouvoir faire en flexbox, le lisere est une div comme une autre.

en gros tu as un flex row général avec dedans deux flex col, un pour le lisere et un pour la partie centrale,

Dans la partie centrale tu as deux div en flex row, dans la première tu as tes 3 div et dans la deuxième ta div liens

-
Edité par lk77 17 décembre 2018 à 8:36:20

Aquilamaximus

18 décembre 2018 à 16:50:17

Bonjour,

C'est peut-être moi mais j'ai rien compris

Car s'il faut que je modifie le code ainsi :

HTML :

<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Mon CV</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="cv.css">
	</head>
	<body>
		
		<header>			
			<section class="align">
				<h1>Maxime BUJEAU</h1>
					<p>Étudiant à l'IMIE école de la filière numérique, je souhaites par la suite travailler au Puy du Fou dans le secteur des réseaux et systèmes, ou à la Warner Bros à Londres.
					</p>
					<a href="Images/Img.png"><img class="image1" src="Images/Img_mini.png" alt="photo maxime bujeau" title="Photo"></a>

			</section>
		</header>
		<main>			
			<div class="general">
				<div class="lisere">
				</div>
					<section>
						<div class="experience">
							<h2>Mon expérience</h2>
								<p>
									<ul>
										<li>2018 (Juillet - Septembre) : Hôte de caisse Carrefour City</li>
										<li>2018 (Juillet) : Réaprovisionneur rayon liquide Leclerc</li>
										<li>2013-2017 : Hôte de caisse Conforama</li>
									</ul>
								</p>
						</div>
					</section>	
					<section>	
						<div class="competences">
							<h2>Mes compétences</h2>
								<p>
									<ul>
										<li>Méthode merise pour la base de donnée (bases)</li>
										<li>SQL (notions)</li>
										<li>Python (notions)</li>
										<li>PHP (notions)</li>
										<li>HTLM 5 (notions)</li>
										<li>CSS 3 (notions)</li>
										<li>VMware (bases)</li>
										<li>Active Directory (notions)</li>
										<li>Procédures d'encaissements (avancé)</li>
										<li>Réponse au standard (avancé)</li>
										<li>Anglais (avancé)</li>
									</ul>
								</p>
						</div>	
					</section>

					<section>				
						<div class="formation">
							<h2>Ma formation</h2>
								<p>
									<ul>
										<li>2018-2023 : IMIE école de la filière numérique
											<ul>
												<li>2018-2019 : IT Start, 6 mois de formations général sur l'informatique, avec spécialisation sur le domaine des réseaux et systèmes (OPS, Opérateur Réseaux et Systèmes) et 5 mois de stage</li>
												<li>2019-2021 : Titre profesionnel RNCP Administrateur Réseau et Système (ASR) en alternance</li>
												<li>2021-2023 : Titre professionnel RNCP Chef de Projet en Conception de Systèmes Informatique (CPCSI) en alternance</li>
											</ul>
										</li>
										<li>2018 : SST</li>
										<li>2017-2018 : AFPA, Titre profesionnel Agent de Loisirs</li>
										<li>2011-2013 : Lycée ST Gabriel Nantes Océan, BAC Profesionnel Service en milieu rural</li>
										<li>2010-2011 : Lycée STE Anne, Première année Bac Profesionnel hôtellerie restauration option cuisine</li>
										<li>2008-2010 : Lycée STE Anne,BEP hôtellerie restauration option cuisine</li>									
									</ul>
								</p>
						</div>
					</section>
			</div>		
			</main>	
		<div class="liens">
			<footer>
				<a href="tel:+33600000000"><img src="Images/mobile_mini.png" alt="Téléphone mobile"></a>
				<a href="mailto:maxime.bujeau"><img src="Images/mail_mini.png" alt="Mail"></a>
				<a href="callto:mbujeau"><img src="Images/skype_mini.png" alt="Skype"></a>
			</footer>
		</div>
						
	</body>
</html>

CSS :

@font-face
{
	 font-family: '3dumbregular';
    src: url('Fonts/3Dumb-webfont.eot');
    src: url('Fonts/3Dumb-webfont.eot?#iefix') format('embedded-opentype'),
         url('Fonts/3Dumb-webfont.woff2') format('woff2'),
         url('Fonts/3Dumb-webfont.woff') format('woff'),
         url('Fonts/3Dumb-webfont.ttf') format('truetype'),
         url('Fonts/3Dumb-webfont.svg#3dumbregular') format('svg');
}

body
{
	background-image: url("Images/fond.jpg");
}

h1
{
	color: #F78181;
	font-family: '3dumbregular', Arial, Serif;
  font-size: 3em;
}


h2,p,ul,li
{
	color: white;
}

.image1
{
	float: right;
    margin-left: 50%;
    margin-right: 40%; 
    margin-top: 2%;
    border: 2px white dashed;
    border-radius: 15px;
    box-shadow: 6px 6px 10px white;
}

.align
{
	text-align: center;
}


.general

{
  display: flex;
  flex-direction: row;
}
.lisere
{
  display: flex;
  flex-direction: column;
  width: 100px;
  height: 100%;
  background: white;
  margin-right: 100px;
}

.experience, .competences, .formation
{
	display: flex;
	flex-direction: row;
    width:30%;
    vertical-align:top;
    background-color:black;
    color:white;
    font-weight:bold;
    border:1px ;
    box-shadow:10px 11px 8px gray;
    border-radius:18px 18px 18px 18px;
    opacity:0.82;
    margin-left: 15%.
}

.liens
{
  margin-left: 15%;
}

Bah cela ne fonctionne pas, je n'ai pas le liseré, ni l'alignement de expériences et autres.

Zoki_Marciano

19 décembre 2018 à 7:50:31

Supprime ca :

.general
 
{
  display: flex;
  flex-direction: row;
}

Et dans .lisere remplace le height 100% par 100vh et la remplace la couleur par du rouge juste pour que tu puisses voir ton liseré et ce que tu fais. Tu verras qu'avec ca deja ca va bouger et t'auras juste à repositionner correctement tes blocs. Donc je te confirme ton problème principal viens du fais que ton html n'est pas correctement structuré.

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

Aquilamaximus

19 décembre 2018 à 11:06:04

Bonjour,

Si je supprime, voila ce que cela donne.

Mais je ne vois pas le liseré rouge pour autant... et les blocs formations etc sont les uns en dessous les autres.

Alors que si je laisse le code css .general, au moins les blocs sont cote à cote (même si pas très large), mais toujours pas de liseré.

Zoki_Marciano

19 décembre 2018 à 17:09:41

t as bien mis 100vh au lieux de 100 % pour le liseré ?

tiens le wireframe de ce que tu dois faire, ca devrait t'aider à structurer le HTML :

-
Edité par Zoki_Marciano 19 décembre 2018 à 20:44:55

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

Aquilamaximus

19 décembre 2018 à 22:58:26

Bonsoir,

Merci pour l'aide ! J'ai réussi.