[CSS] Aligner des éléments l'un à côté de l'autre

CV horizontal

Sujet résolu

22 juin 2017 à 1:32:40

Bonjour,

Je voudrais aligner des sections de mon CV, malheureusement je n'y arrive pas. J'ai essayé pleins de choses dont le fait de mettre inline-block mais ça ne fonctionne pas. Comment faire ?

body
{
background-image: url("fleur.png");
}

.photo
{width: 100%;}

h1
{color:maroon;
text-align: center;
text-shadow: 2px 2px 4px black;
font-family:mapolice;}

@font-face
{font-family:"mapolice";
src: url("/Users/cynthia/Desktop/CaviarDreams.ttf");}

a:visited
{color:#AAA}

a:active
{
background-color:#FFCC66}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head><link rel="stylesheet" href="moncv.css" />
	<title>mon cv</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.30.1" />
</head>

<body>
<h1>Cynthia Finck <p class="photo"><a href="https://www.hostingpics.net/viewer.php?id=814810moi.png"><img src="https://img15.hostingpics.net/thumbs/mini_814810moi.png" alt="Heberger image" /></a>
</p></h1>
<p class="designergraphique"> Designer graphique </p>

<div>
	<div class="experience"> <strong>Expériences</strong>
<br /><em>Avril 2017</em>
<br />Assistante de galerie à Paris 8 <a href="http://artelie.fr/">
	(Galerie Artelie)</a>
</div>

<div class="formation"><strong>Formation</strong>
<br /><em>Septembre 2014-Juin 2017</em>
<br />Licence Arts Plastiques</div>

<div class="logiciels"><strong> Logiciels</strong>

	<br />Photoshop
	<br />Illustrator
	<br />HTML 5 </div>
	
	</div>
	
</body>

</html>

Merci de votre aide

Morena Daniel

22 juin 2017 à 2:42:44

Bonsoir

Tout d'abord, tu étais sur la bonne voie avec le display: inline-block ! Il manquait juste une chose à rajouter en plus aux éléments dont tu voulais appliquer l'alignement. C'est le css "float: left;". Float left permet a la <div> de se place directement à la suite de l'élément précédent.

Si nous voulons optimiser le code css, cela va ressembler à ceci :

.categories {
  display: inline-block;
}

.experience {
  float: left;
  width: 33%;
}

.formation {
  float: left;
  width: 33%;
}

.logiciels {
  float: left;
  width: 33%;
}

Comme tu peux le remarquer j'ai ajouté 2 autres choses. La pemière étant ".categories" qui te permettra d'activer le inline block aux autres éléments que tu ajoutera plus tard si tu en as envie. Le deuxième étant "width: 33%". En enlevant ceci tu remarqueras que les éléments ne s'alignent plus. C'est parce que de base ils prennent toute la largeur de l'écran. Width 33% permet de diminuer leur taille pour qu'ils ne prennent que 33% de l'écran et de faire entrer 3 éléments si nécessaire (je te conseil de jouer avec cette valeur pour trouver la taille qu'il te faut et comprendre comment ça marche).

Pour que tout ceci fonctionne, dans ton html il te suffit d'ajouter la classe categories aux div Experience - Formation et Logiciels comme ceci :

<div class="experience categories">
  <strong>Expériences</strong>
  <br /><em>Avril 2017</em>
  <br />Assistante de galerie à Paris 8 <a href="http://artelie.fr/">
    (Galerie Artelie)</a>
</div>
  
<div class="formation categories"><strong>Formation</strong>
  <br /><em>Septembre 2014-Juin 2017</em>
  <br />Licence Arts Plastiques</div>
</div>
 
<div class="logiciels categories"><strong> Logiciels</strong>
  <br />Photoshop
  <br />Illustrator
  <br />HTML 5 </div>
</div>

J’espère avoir pu être clair dans mes explications, et j’espère avoir pu t'aider !

-
Edité par Morena Daniel 22 juin 2017 à 2:59:54

Lamecarlate

22 juin 2017 à 6:34:39

Bonjour,

"display: inline-block" + "float: left", c'est non. C'est redondant. On met soit l'un soit l'autre suivant les besoins.

Et ici, surtout si c'est un CV fait pour le cours HTML/CSS d'OpenClassrooms (mais c'est de toute façon plus adapté), c'est plutôt avec "display: flex" qu'il faudrait jouer ; voici le lien du cours correspondant : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox

Pas d'aide concernant le code par MP, le forum est là pour ça :)

ZeldaGamer55

22 juin 2017 à 13:25:43

Merci beaucoup

ça marche.

Hack25

22 juin 2017 à 21:41:29

N'oublie pas de mettre "résolu"

AdrienCoullaut

4 janvier 2020 à 11:10:48

Merci infiniment