Aide blocs côte à côte

22 juin 2017 à 18:04:43

Bonjour,

J'aimerais pour m'entrainer faire mon cv en page html. Pour cela, une "section" a gauche pour reunir en sous partie l'expérience et les diplomes et un "aside" à droite pour les informations personnelles, la photo et les compétences.

Seulement voila, dans le "aside" j'arrive a placer le premier bloc d'informations comme je le souhaite (centré sous la photo (gris)) mais ensuite je n'arrive pas a créer deux blocs centrées (voir sur la photo (blocs marrons)).

Que me conseillez vous?

-
Edité par Sokar59650 22 juin 2017 à 18:30:30

arthur32810

22 juin 2017 à 18:37:03

Bonjour,

Sokar 59650, serait-il possible de voir ton code.

Cela me servirai à t'aider

Sokar59650

22 juin 2017 à 19:25:47

Voila sans les informations importantes

<!DOCTYPE html>
    <html>
      <head>
        <title>CV Nom</title>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
		<link href="style_cv.css" style="text/css" rel="stylesheet" />

	  </head>
	  
	  
	  
		<body>
		<section>
			<article>
			<h2>Expériences</h2>
			
				<article>
				<h3>Stages</h3>
					
					<div>
					<h4>Nom Entreprise</h4>
						<em>Prise du poste de metrologue</em>
						
						<ul>
							<!--Mes activités-->
						</ul>
					</div>
					
					<div>
					<h4>Nom Entreprise</h4>
						<em>Redacteur de modes operatoires</em>
						
						<ul>
							<!--Mes activités-->
						</ul>
					</div>
					
				</article><!--fin Stages-->
						
						
				<article>		
				<h3>Projets</h3>
					<ul>
						<!--Mes projets-->
					</ul>
					
				</article><!--Fin projets-->
				
			</article><!--Fin expérience-->
			
			<article>
				<h2>Formations</h2>
				
				<!--Mes formations-->
				
				
			</article><!--Fin formations-->
		</section>
		
		
		




		
        <aside>
			<img src="photo.jpg" id="Photo" alt="Photo"/>
			
			<article id="donnees">
			<h2 id="titre">Informations</h2>
				<p class="info" id="adresse"></p>
				<p class="info" id="Ville"></p>
				<p class="info" id="telephone"></p>
				<p class="info" id="mail"></p>
				<p class="info" id="age"></p>
				<p class="info" id="Permis"></p>
			
			</article><!--Fin informations-->
			


			<section>
				<div id="Informatiques">
				<h2>Informatiques</h2>
					<ul>
						<li>Word</li>
						<li>Excel</li>
						<li>Power Point</li>
						<li>AUTOCAD</li>
						<li>CATIA/SOLIDWORKS</li>
						<li>Programmation C</li>
						<li>Java</li>
					</ul>
				</div><!--Fin informatiques-->
					
				<div id="langues">
				<h2>Langues</h2>
					<ul>
						<li>Anglais</li>
						<li>Espagnol</li>
					</ul>
				</div><!--Fin langues-->
			</section>
		</aside>
		
		
		
		
		<footer>
		
		<h2>Loisirs</h2>
		
			<p id="Lecture">Lecture fantastique</p>
			<p id="Télé">Films/Séries américaines</p>
			<p id="Dessin">Dessin</p>
			<p id="Animaux">Animaux</p>
		
		
		</footer>
	  
	  </body>
    </html>

Je débute donc je ne maitrise pas encore tt ce qui est div article section...

Comment pourrais-je améliorer l'agencement et ensuite comment l'utiliser pour mettre les blocs Informatiques et Langues cote a cote?

Tom Martin

23 juin 2017 à 11:34:56

Salut,

Ce que tu peux faire pour séparer chaque élément c'est d'utiliser la balise <div></div>, tu en mets une pour ton carré marron puis une pour entourer tes deux carré gris et enfin tu en mets une à chaque carré gris. La balise div sert à définir différents éléments, ici tu veux que ton carré gris forme un élément et que des deux carrés marron forment eux un autre élément d'où l'utilisation de celles ci.

Cordialement Thomas.

Sokar59650

24 juin 2017 à 16:12:05

Je te remercie de ton aide mais j'ai trouvé mieux sur internet :

aside article{

display:flex; 
justify-content:space-around;

}

J'ai créer une div regroupant mes deux articles Informatiques et Langues.

Cela m'a permis de faire deux blocs avec des espaces équivalents de chaque côté.

Anonyme

24 juin 2017 à 17:01:39

Le cours de ce site devrai vous aider :

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

Voilà... :-°