Allignement horizontal des div par Mohaa Tunaard - page 1

Bonjour à vous l'équipe

J'ai un petit probleme j'ai fait 5 div pour 5 catégories de produit et je voudrais les alligner l'un a côté de l'autre en les plaçant au centre de la page (je vous fait un exemple visuel), auriez vous une idée ? merci..

<!Doctype html>
<html lang="fr">

<head>
	<meta charset="utf-8">
	<title>CV HTML - Moussa Mohamed</title>
	<link rel="shortcut icon" type="image/x-icon" href="img/title.gif" />
	<link rel="stylesheet" href="cv.css"/>
	<script type="text/javascript" src="menu.js"></script>
</head>

<body>
	<div id=bandeidentity>
		<img src="img/identity.png" alt="photo d'identité">
		<h1>Moussa Mohamed</h1>
		<h4>mohamed.moussa94@gmail.com<br>06.98.56.25.97<br>8 Avenue Boileau, 94500 Champigny-Sur-Marne<br>Permis B</h4>
	</div>

	<div class=bloc>
		<ul>
			<li class=titre2><h3>Formation</h3>
				<ul>
					<li class=soustitre2>
						2e Année BTS SIO option SLAM
						<p class=soustitre3>Lycée René Descartes, Champs-sur-Marne (77)</p>
						<p class=soustitre3>2018-2019</p> <br>
					</li>	
					<li class=soustitre2>
						1ère Année BTS SIO option SLAM
						<p class=soustitre3>Lycée Claude Nougaro, Monteils (82)</p>
						<p class=soustitre3>2017-2018</p><br>
					</li>
					<li class=soustitre2>
						Baccalauréat STMG option SIG
						<p class=soustitre3>Lycée Langevin Wallon, Champigny-sur-Marne (94)</p>
						<p class=soustitre3>2015-2016</p>
					</li>
				</ul>
			</li>
		</ul>
	</div>

	<div class=bloc>
		<ul>
			<li class=titre2><h3>Langues</h3>
						<p class=soustitre3>Anglais : Niveau intermédiaire</p>
						<p class=soustitre3>Espagnol : Niveau débutant</p>
						<p class=soustitre3>Français : Langue maternelle</p>
						<p class=soustitre3>Arabe : Langue maternelle</p>
			</li>
		</ul>
	</div>

	<div class=bloc>
		<ul>
			<li class=titre2><h3>Centres d'intérêt</h3>
				<p class=soustitre3>Foot entre amis</p>
				<p class=soustitre3>Cinéma</p>
				<p class=soustitre3>Informatique, nouvelles technologies (Openclassroom, JDN..)</p>
			</li>
		</ul>
	</div>

	<div class=bloc>
		<ul>
			<li class=titre2><h3>Expérience professionnelles et projets</h3>
				<ul>
					<li class=soustitre2>
						2018-2019
						<p class=soustitre3>Stage de 1ère Année BTS SIO, ENSCI, Paris (75)</p>
						<p class=soustitre3>+ Réalisation d'un portfolio</p>
						<p class=soustitre3>- 2018-2019</p> <br>
					</li>
					<li class=soustitre2>
						2017-2018
						<p class=soustitre3>Création d'un portfolio</p>
						<p class=soustitre3>+ Réalisation d'un portfolio</p>
						<p class=soustitre3>- Programmation web, logique, organisaton du travail, maîtrise de codage, de logiciel de traitement de texte</p> <br>
					</li>
					<li class=soustitre2>
						2015-2016
						<p class=soustitre3>Projet de classe de terminal en équipe</p>
						<p class=soustitre3>+ Identification et analyse du besoin de l'organisation, définition d'une charte graphique, cr"ation et référencement d'un site web statique</p>
						<p class=soustitre3>- Programmation web, travail en équipe logique, répartition des tâches, maitrise de codage, des logiciels de traitement de texte.</p>
					</li>
				</ul>
			</li>
		</ul>
	</div>

	<div class=bloc>
		<ul>
			<li class=titre2><h3>Compétences techniques</h3>
				<ul>
					<li class=soustitre2>
						Informatique
						<p class=soustitre3>HTML - CSS : Acquis</p>
						<p class=soustitre3>PHP : Moyen</p>
						<p class=soustitre3>C : Moyen</p>
						<p class=soustitre3>C# : Moyen</p>
						<p class=soustitre3>Java : Moyen</p>
						<p class=soustitre3>SQL : Moyen</p>
					</li>
					<li class=soustitre2>
						Logiciel et suites
						<p class=soustitre3>Suite Office : Acquis</p>
						<p class=soustitre3>Suite Google : Acquis</p>
						<p class=soustitre3>Code Blocks : Acquis</p>
						<p class=soustitre3>Netbeans : Acquis</p>
						<p class=soustitre3>Virtualbox : Acquis</p>
						<p class=soustitre3>Code Blocks : Acquis</p>
						<p class=soustitre3>Sublime Text : Acquis</p>
						<p class=soustitre3>Notepad : Acquis</p>
						<p class=soustitre3>PgAdmin : Acquis</p>
						<p class=soustitre3>Gimp : Notions</p>
						<p class=soustitre3>Photoshop : Notions</p>
					</li>
				</ul>
			</li>
		</ul>
	</div>

</body>

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

#bandeidentity img {
	width:9%;
	float:left;
	padding:3% 0 0 5%;
}

#bandeidentity h1, #bandeidentity h4 {
	text-align: right;
	padding-right:5%;
	color:black;
	font-weight: 900;
	font-family: cursive;
}

#bandeidentity h1 {
	padding-top: 2%;
	padding-bottom: 0;
	margin:0;
}


#bandeidentity h4 {
	margin: 0;
}

#bandeidentity {
	padding-bottom: 2%;
	background-color: #444855;
	border-radius: 10px;
}

.bloc {
	width: 30%;
	padding: 0 1% 1% 0;
	background-color: #444855;
	border-radius: 20px;
	font-family: "Comic Sans MS", cursive, sans-serif;
}

.titre2, .soustitre2 {
	color:red;
	font-weight: normal;
}

.soustitre3 {
	font-weight: normal;
	color:white;
}

Voila ce que je veux environ :

Mohaa Tunaard

11 novembre 2018 à 14:45:33

mootookoi

11 novembre 2018 à 15:03:17

https://gridbyexample.com/examples/example32/

Ça devrait t'aider.

Dev Web Full Stack ( si si c'est possible )

11 novembre 2018 à 15:05:33

J'ai essayé mais je n'y arrive vraiment pas ..

-
Edité par Mohaa Tunaard 11 novembre 2018 à 16:34:22

Maxime L

13 novembre 2018 à 16:39:41

Bonjour,

Il faut utiliser un display:flex ...

Il faut lire ceci :

https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/3298561-la-mise-en-page-avec-flexbox

La technique que vous avez utilisé sur votre page ne s'utilise plus avec HTML 5 et CSS 3.

Prenez le temps de bien comprendre flexbox, il vous sera indispensable pour créer vos alignements dans vos futurs projets.

Bonne journée et bon courage

Redstruct90

13 novembre 2018 à 21:57:29

En effet, utilise flex, space between et une marge pour disposer tes blocks. Si les textes ne te conviennent pas et tu prefere regarder des video, jette un coup d oeil a la video sur les flexbox de Grafikart: https://youtu.be/LNqBKTeeiWo

Allignement horizontal des div

Allignement horizontal des div

Supprimer

Modérer

Signaler le message aux modérateurs