Positionnement d'éléments en responsive

**arwin** · 11/06/2020, 16h41

Bonjour, je suis vraiment débutant en CSSet j'ai du mal à bien saisir l'aspect positionnement des éléments. J'ai un exercice à faire et je pense que si j'arrive à comprendre cet exercice je ferais un pas significatif en avant.

L'exo consiste en un CV composé :

1) d'un <header> pour le titre,
2) d'un <div> contenant :
<img> (la photo) et les données personnelles (<h1> (le nom) et des <p> pour l'adresse, téléphone etc ..)
3) un <div> pour la formation et l’expérience professionnelle
4) un <div> pour les divers.

L'exo demande que la photo, les données personnelles et les divers doivent être à droite l'un au dessous de l'autre pour des écran de taille "normale". Et lorsqu'on réduit la taille de l'écran (en utilisant les media query) la photo reste au niveau du titre du CV mais les données personnelles viennent glisser au dessous du titre et les divers viennent glisser tout en bas c'est-à-dire après l'expérience professionnelle.

J'ai fait des choses (sans conviction) mais je n'ai pas vraiment réussi à bien placer les différents éléments.

Je n'arrive pas à dissocier la photo du reste des informations personnelles (tél, adresse etc..) alors qu'ils sont tous dans la même div ? et même si je les mets dans des div differentes j'arrive pas à faire glisser les données perso. sous le titre tout en laissant la photo conserver sa posotion par rapport au titre.

Et d'une manière générale j'aimerais savoir s'il y a des règles qui gerent le comportent des enfants par rapport à celui des parents et vice versa et qui mettre en absolue et qui en relatif pour qu'ils aient telle ou telle position ? et si on change pour l'un que doit on changer pour l'autre ? etc .....

Si je dois poster mon fichier html et css pas de soucis

Merci d'avance pour votre aide

**NoSmoking** · 12/06/2020, 09h29

Bonjour,

J'ai fait des choses (sans conviction) mais je n'ai pas vraiment réussi à bien placer les différents éléments.

il serait bon que tu nous montres ce que tu as réalisé pour que l'on puisse te conseiller !

**arwin** · 12/06/2020, 10h04

Mon fichier html :

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive CV</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <header id="titre_cv"> Responsable Point de Vente Prêt à Porter</header>
 
    <img id="photo" src="photo_cv.png" alt="Photo identité"/>
    <div id="perso">
        <h1>Alexandra Billu</h1>
        <p>12, rue Saint-Rome - 31000 Toulouse</p>
        <input type="tel" id="fixe"/>
        <input type="tel" id="mobile"/>
        <input type="email" id="mail"/>
    </div>
 
    <section>
        <h2>FORMATION</h2>
        <table>
            <tr>
                <td>Sept 2012 - Juin 2014</td>
                <td><strong>BTS Commerce</strong></td>
            </tr>
            <tr>
                <td>Sept 2012 - Juin 2014</td>
                <td><strong>Baccalauréat STMG</strong></td>
            </tr>
        </table>
        <div id="exp">
            <h2>EXPERIENCES PROFESSIONNELLES</h2>
                <h3>Jan 2014 - Juin 2014&nbsp;&nbsp;&nbsp;Desigual - Responsable Point de Vente</h3> 
                    <ul>
                        <li>Encadrement de 6 vendeuses</li>
                        <li>Gestion de l'espace de vente</li>
                        <li>Mise en valeur des nouvelles collections</li>
                        <li>Interface avec le Siège</li>
                    </ul>
                <h3>Sep 2011 - Juin 2012&nbsp;&nbsp;&nbsp;Zara - Vendeuse Prêt à Porter</h3>
                    <ul>
                        <li>Accueil clientèle</li>
                        <li>Conseils et ventes</li>
                        <li>Gestion de caisse</li>
                        <li>Merchandising et mise en rayon</li>
                    </ul>
                <h3>2008 - 2010&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Boulangerie du Soleil - Vendeuse</h3>
                    <ul>
                        <li>Mise en rayon</li>
                        <li>Vente</li>
                        <li>Gestion de caisse</li>
                    </ul>
        </div>
    </section>
 
    <div id="divers">
            <h2>ETAT CIVIL</h2><img src="triangle.png" alt="triangle" class="triangle"/> 
                <ul id="civil">
                    <li>24 ans</li>
                    <li>Nationalité Francaise</li>
                    <li>Permis B</li>
                </ul>
            <h2>INFORMATIQUE</h2><img src="triangle.png" alt="triangle" class="triangle"/>
                <ul id="informatique">
                    <li>Word</li>
                    <li>Excel</li>
                    <li>Internet</li>
                </ul>
            <h2>SPORTS</h2><img src="triangle.png" alt="triangle" class="triangle"/>
                <ul id="sport">
                    <li>Tennis</li>
                    <li>Golf</li>
                </ul>
            <h2>LOISIRS</h2><img src="triangle.png" alt="triangle" class="triangle"/>
                <ul id="loisir">
                    <li>Théâtre</li>
                    <li>Cinéma</li>
                </ul>
            <h2>VOYAGES</h2><img src="triangle.png" alt="triangle" class="triangle"/>
                <ul id="voyage">
                    <li>Brésil</li>
                    <li>Australie</li>
                    <li>Argentine</li>
                </ul>
    </div> 
    <script src="resp_cv.js"></script>
</body>
</html>

Mon fichier (tout pourri) CSS :

Code :

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
 
#titre_cv{
    font-size: 3em; font-weight:bold; color:blue; margin-bottom: 0.5em; display:block; float: left;
}
 
section>h2, #exp>h2{
        font-size: 2em; font-weight:bold; color:white; margin-bottom: 50px; background-color: blue; margin-top: 20px; margin-bottom: 32px; padding:5px;
}
#divers>h2{
    font-size: 2em; font-weight:bold; color:blue; margin-bottom: 50px; background-color: white;  margin-top: 20px; margin-bottom: 32px; padding:8px;
}
 
#photo{
    display: inline-block; width:35%; border:3px solid white; border-radius: 10px; margin-right: 0px; position:relative;
 
}
 
input{
    display: block;
}
.triangle{
    width:20px;
}
 
h3{
    font-weight: normal; background-color:skyblue; margin-bottom: 30px; margin-top: 30px; padding:5px; 
}
 
body>header, section{
    display:block; float:left; margin-top: 80px; width:60%;
}
 
#divers, #perso{
   /* width:250px;*/
    background-color: blue;
    padding:8px;
    color: white;
    display:inline-block;*/
    width:35%;  
    position:relative;
}
td{
    padding:10px;
}
h2>ul{
    margin-left:50%;
}
#divers ul{
        list-style: none;
        padding-left: opx;
}
 
// media queries
/*grand écran*/
@media screen and (min-width:1050px){
    body{
        font-size:16px;
    }
    #photo{
    display: inline-block; width:35%; border:3px solid white; border-radius: 10px; margin-right: 0px; position:relative;
    }
    #divers, #perso{
   /* width:250px;*/
    background-color: blue;
    padding:8px;
    color: white;
    display:inline-block;*/
    width:100%;  
    }
}
 
 
 
/*écran std*/
@media screen and (min-width:640px) and (max-width:1049px){
    body{
        font-size:14px;
    }
}
 
/*petit écran et tablette */
@media screen and(min-width:400px) and (max-width:1049){
    body{
        font-size:12px;
        position: relative;
    }
     #perso{
        position: relative; display:inline-block; width:100%; border:3px solid white;
    }
    #photo{
    position:relative; display: block;  
    top: -3px; left: -3px; bottom: -3px; right: -3px;
    }
    #titre_cv, #perso>h1{
        font-size: 1.5em;
        display: block;
    }
    #divers{
    width:auto;
    background-color: blue;
    padding:8px;
    color: white;
    display:inline-block;
    }
    #divers>h2{
    font-size: 10px;
    }
    section>h2, #exp>h2 {
        font-size: 10px;
    }
}
 
 
/* smartphone */
@media screen and (max-width:399px){
    body{
        font-size:10px;
        position: relative;
    }
    #perso{
        right: 0px; top: 0px; width:50%; display:block; max-width: 130px; border:3px solid white; border-radius: 10px; margin:auto;
    }
    #titre_cv, #perso>h1{
        display: block; float: left; width:60% font-size: 1em; font-weight:bold; color:blue; margin-bottom: 50px;
    }
    #perso>h1{
        font-size: 2em; font-weight:bold; color:white; margin-bottom: 50px; background-color: blue; margin-top: 20px; margin-bottom: 32px; padding:5px;
    }
    #divers>h2{
    font-size: 15px;
    }
    ul{
        display:none;
    }
    ul li{
        display:inline;
    }
     ul li:after{
        content:'-';
    }
     ul li:last-of-type:after{
        content:'.';
    }
     #exp h3, #divers h2{
        position:relative;
    } 
    #exp h1 img, #divers h2 img{
        position:absolute;
        right:0px;
        bottom:0px;
    }
    .triangle{
    width:20px;
    }
 
}

Positionnement d'éléments en responsive

Responsive design en CSS

Discussions similaires

Partager

Partager