Placer une image avec float:right

**Diegomarck** · 24/03/2019, 08h49

Bonjour, je suis toujours dans l'exercice d'openclass room sur la mise en page de son cv et j'aimerais placer l'image sur mon cv à droite mais je n'y arrive pas avec la propriété float, je ne trouve pas le code. Voici mes deux code html et css :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<DOCTYPE html>
<html>
    <head>
        <meta charset="UFT-8"/>
        <link rel="stylesheet" href="style1.css">
        <title>titre de la page</title>
    </head>
    <body>
        <h1>Diego  Robert de Massy</h1>
          <p>Polyvalent, sérieux et doté d'un très bon sens commercial </br>
          <a href="TonyetDiego.JPG">
          <img src="TonyetDiegors.jpg" alt="photo de cv"title="Cliquer pour agrandir" />
        </a></p>
        <h2>Mon expérience</h2>
          <ul>
            <li> <strong>De 2012 à 2019 :</strong></br>
              Pâtissier Laboratoire Angelina, cuisine de Qualité, Nomad Traiteur, restaurant les Chouettes,
              Millésimes62</br> Chateauform, Api Restauration. Je fais des gâteaux à longeur de journée, on se marre bien
              mais c'est fatigant!</li>
            <li>  <strong> 2009-2012 :</strong></br>
              Plongeur - livreur - réceptionniste - cafetier
              Angelina Rivoli</li>
            <li> <strong> 2009 :</strong></br>
              Employé polyvalent-vendeur Phileas la Défense </li>
            <li> <strong> 2003 - 2007 :</strong></br>
              Employé polyvalent livreur
              Pizza Hut Paris 15</li>
            <li> <strong> 2003 :</strong> </li>...
          </ul>
        <h2> Formation </h2>
          <ul>
            <li><strong>2016 :</strong></br>
              CAP pâtissier, mention bien</li>
            <li><strong>2001 :</strong></br>
              Niveau licence de Chimie, Université Paris 5 René Descartes</Br>
              Deug 1 de philosophie</li>
            <li><strong>1998 :</strong></br>
              Baccalauréat scientifique S et baccalauréat A1 mathématiques-philosophie</li>
          </ul>
        <h2>Langues et informatique</h2>
          <ul>
            <li><em>Langues :</em> </br>
              Anglais : expérimenté C1</br>
              Espagnol : indépendant B2</br>
              Allemand : occasionnel B1</br>
            <li><em>Informatique</em></br>
              Maîtrise de World, Excel, </br>
              initiation au développement web, langage HTML et CSS
          </ul>
        <h2>Informations complémentaires</h2>
          <ul>
             <p><li><em>Musique :</em>Guitare classique et Jazz-Rock. Expérience musicale au sein d'un groupe.</br></li>
             <li><em>Sport :</em> Musculation, ski, judo, Taekwondo</br></li>
             <li><em>Lectures :</em> Philosophie, roman, psychologie et poésie</li></p></ul>
 
    </body>
</hmtl>

Et le css :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
h2
{
	color: maroon;
}
h1{
	text-align: center;
}
h1
{
    border: 3px blue groove;
}
h1
{
	box-shadow: 6px 6px 6px black;
}
.photo de cv
{
	float: left;
}
body{
	background: url(green-leaf-176722_960_720.jpg) fixed;
}
@font-face {
  font-family: 'KeeponTruckin';
  src: url("KeeponTruckin.ttf") format('truetype');
}
h1
{
	font-family: 'KeeponTruckin', "arial black", arial, verdana, sans-serif;
}
p{
	font-family: 'KeeponTruckin', "arial black", arial, verdana, sans-serif;
}
h2
{
	font-family: 'KeeponTruckin', "arial black", arial, verdana, sans-serif;
}
ul{
	font-family: 'KeeponTruckin', "arial black", arial, verdana, sans-serif;
}

Auriez-vous une idée de code pour placer la photo à droite du texte "polyvalent, sérieux... ".
Merci d'avance de votre réponse. Diego

**ze0ne** · 27/03/2019, 11h31

Bonjour Diegomarck.

Alors c'est très simple, un sélecteur css ne peu contenir d'espace, de fait .photo de cv n'est pas adapté.
Pour la simple et bonne raison qu'on l'utilise pour préciser la descendance.

Dans ton cas, .photo de cv correspond à cibler l'élément cv dans de, lui même dans un conteneur avec la class photo.

Je t'invite à regarder ici avec une preuve par l'exemple: https://codepen.io/ze0ne/pen/qvGgmj

Pour obtenir le résultat que tu souhaite, il faut ajouter la propriété float: right; à ton image et non float: left;.

Tu dois donc ajouter une class à ton image, par exemple photo_de_cv ainsi le sélecteur adéquat sera .photo_de_cv.
Tu as essayé d'ajouter une propriété css en te basant sur l'attribut alt, hors on ne peut le faire que sur le nom de la balise, son class ou son id.
L'attribut alt n'est pas utilisable comme sélecteur css, en tout cas par de cette façon.

Pour ta culture il existe bien une méthode qui permet de le faire mais elle n'est pas couramment utilisée et elle est utile que dans des cas particulier https://css-tricks.com/almanac/selectors/a/attribute/

Placer une image avec float:right

Positionnement en CSS

Discussions similaires

Partager

Partager