Mise en page en zoom/dézoom

**oieretxe** · 06/10/2014, 10h04

Bonjour,

je commence à étudier le développement Web en HTML5 et CSS3, et j'ai pour petit projet de réaliser mon CV en page Web. J'ai réussi à réaliser quelque chose d'assez basique, même si je suppose que le code peut laisser à désirer ^^'
J'ai un problème lorsque j'ouvre ma page et que je zoom/dézoom : le texte qu'il y a dans mes blocsks ne suit pas proportionnellement la taille du block lorsque je suis sur google Chrome, mais sur Internet explorer tout semble marcher correctement. De plus, lorsque je dépasse un certain niveau de dézoom sous Chrome, 2 blocks qui sont censés se positionner un à coté de l'autre, se metttent l'un en dessous de l'autre... Bref ma mise en page part en sucette ^^
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
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style_CV.css" />
  <title>Xxxx XXXX - CV</title>
</head>
<body>
  <div class="presentation"><!--
    --><div class="moi">
      <h1 class="nom_prenom">
        M. Xxxx XXXXXX
      </h1>
      <p class="coordonnees">
        xxx</br>
        xxxx</br>
        tél : xxx</br>
        mail : xxxx</br>
        Français</br>
        22 ans</br>
        Permis B
       </p>
	</div><!--
	--><div class="recherche">
      <h2 class="eleve_ing">
        ELEVE INGENIEUR : GENIE DES SYSTEMES INDUSTRIELS
      </h2>
      <p class="objet">
        <em>Objet :</em> Recherche de stage de fin d’études</br>
        <em>Durée :</em> 6 mois</br>
        <em>Début :</em> février 2015</br>
        <em>Domaines :</em> Systèmes embarquées et temps réel, développement Web et logiciel, supervision, communication et programmation d’automate…
      </p>
    </div>
  </div><!--
  --><div class="corps"><!--
    --><div class="prof_comp_cent">
        <h3 class="titre_profil">
          <span class="soulignement">PROFIL</span>
        </h3>
        <h4 class="titre_savoirs-etre">
          Savoirs-être
        </h4>
        <p class="corps_savoirs-etre">
          Autonome, curieux, dynamique, intéressé, organisé, motivé.
        </p>
        <h4 class="titre_savoirs-faire">
          Savoirs-faire
        </h4>
        <p class="corps_savoirs-faire">
          Gérer une équipe et un projet, mobiliser et adapter mes connaissances, prendre des initiatives.
        </p>
        <h3 class="titre_competences">
          <span class="soulignement">COMPETENCES</span>
        </h3>
        <h4 class="titre_logiciels">
          Logiciels
        </h4>
        <p class="corps_logiciels">
          Solidworks, MatLab, Labview, Suite Office, Visual Studio, Notepad ++
        </p>
        <h4 class="titre_programmation">
          Programmation
        </h4>
        <p class="corps_programmation">
          C/C++, SQL, VBA, Java, Android PHP, MatLab, HTML5, CSS3, temps réel (OSEK, µC/OS II)
        </p>
        <h4 class="titre_langues">
          Langues
        </h4>
        <p class="corps_langues">
          Français : langue maternelle</br>
          Anglais : TOEIC niveau B2</br>
          Espagnol : intermédiaire</br>
          Basque : bilingue
        </p>
        <h3 class="titre_centres_interets">
          <span class="soulignement">CENTRES D’INTERETS</span>
        </h3>
        <h4 class="titre_association">
          Association
        </h4>
        <p class="corps_association">
          Trésorier ENI Kart : montage d’un kart électrique à l’INSA Centre Val de Loire.
        </p>
        <h4 class="titre_sports">
          Sports
        </h4>
        <p class="corps_sports">
          Pratique de la pelote Basque durant 13 ans.</br>
          Pratique de la danse Basque pendant 15 ans, dont 2 ans en tant que professeur bénévole.
        </p>
    </div><!--
    --><div class="form_exp">
        <h3 class="titre_formations">
          FORMATIONS
        </h3>
        <h4 class="titre_INSA">
          2012 – Actuellement : <strong>Institut National des Sciences Appliquées Centre Val de Loire</strong>, Blois (41)
        </h4>
        <ul class="corps_INSA">
          <li>5ème année de formation d’ingénieurs généralistes</li>
          <li>Spécialité : Systèmes Automatisés, Instrumentation et Informatique Industrielle</li>
          <li>Option : Instrumentation et Systèmes Automatisés</li>
        </ul>
        <h4 class="titre_GIM">
          2012 : <strong>DUT Génie Industriel et Maintenance</strong>, Montaury, Anglet (64)
        </h4>
        <ul class="corps_GIM">
          <li>Formation de techniciens supérieurs</li>
          <li>Major de promotion</li>
        </ul>
        <h4 class="titre_BAC">
          2010 : <strong>BAC S – SVT</strong>, Etxepare, Bayonne (64)
        </h4>
        <ul class="corps_BAC">
          <li>Spécification : mathématiques</li>
          <li>BAC mention : Assez-Bien</li>
        </ul>
        <h3 class="titre_experiences">
          EXPERIENCES PROFESSIONNELLES
        </h3>
        <h4 class="titre_fin_etudes">
          2014 – 2015 : 5 mois (en cours) | <strong>Projet de fin d’étude</strong> | INSA Centre Val de Loire, Blois (41)
        </h4>
        <ul class="corps_fin_etudes">
          <li>Supervision et pilotage d’un Automate Programmable Industriel : Protocoles SOAP / Modbus</li>
          <li>Développement d’une application Android : Java</li>
          <li>Travail en équipe : répartition des tâches, responsabilités, esprit d’équip</li>
        </ul>
        <h4 class="titre_ETS">
          2014 : 4 mois | <strong>Stage industriel</strong> | Ecole de Technologie Supérieure, Montréal, Canada
        </h4>
        <ul class="corps_ETS">
          <li>Métrologie numérique : Développement d’algorithmes et expérimentation (MatLab)</li>
        </ul>
        <h4 class="titre_projets">
          2012 – 2015 | <strong>Projets scolaires</strong> | INSA Centre Val de Loire, Blois (41)
        </h4>
        <ul class="corps_projets">
          <li>Bureau d’étude : Motoréducteur d’un pont roulant</li>
          <li>Eléments finis : Modélisation et étude de poutres</li>
          <li>Vibration des structures : Etude de systèmes vibratoires</li>
          <li>Mécanique des fluides : Réalisation d’un banc d’essai</li>
          <li>VBA : Gestion d’une auto-école</li>
          <li>Développement Web : Communication avec un automate</li>
        </ul>
        <h4 class="titre_Euzkadi">
          2013 : 2 mois | <strong>Travail saisonnier</strong> | Euzkadi, Espelette (64)
        </h4>
        <ul class="corps_Euzkadi">
          <li>Commis de cuisine : organisation, gestion</li>
          <li>Plonge : rigueur, communication</li>
        </ul>
        <h4 class="titre_Dassault">
          2012 : 10 semaines | <strong>Stage technique</strong> | Dassault Aviation, Biarritz (64)
        </h4>
        <ul class="corps_Dassault">
          <li>Plans de maintenance : Développement et application aux systèmes présents sur site</li>
        </ul>
        <h4 class="titre_projet_IUT">
          2011 – 2012 : 6 mois | <strong>Projet scolaire</strong> | IUT GIM, Anglet (64)
        </h4>
        <ul class="corps_projet_IUT">
          <li>Conception et développement d’un amplificateur audio</li>
          <li>Management du travail – gestion des comptes</li>
        </ul>
        <h4 class="titre_Piments">
          2009 – 2012 : 10 mois | <strong>Travail saisonnier</strong> | La maison du piment, Ustaritz (64)
        </h4>
        <ul class="corps_Piments">
          <li>Désherbage, récolte du piment, mise en poudre, dosage, sertissage</li>
          <li>Gestion des commandes et distribution des tâches</li>
        </ul>
    </div><!--
  --></div>
</body>
</html>

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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
/*Mise en page du body*/
body
{
    font-family: Arial;
	border-collapse: collapse;
	width: 1310px;
	height: 1420px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
}
 
/*Mise en page des blocks presentation et corps*/
.presentation
{
	margin: 0px;
	width: 1305px;
	height: 255px;
	max-width: 100%;
	min-width: 100%;
}
.corps
{
	margin: 0px;
	padding-top: 10px;
	width: 1305px;
	height: 1155px;
	max-width: 100%;
	min-width: 100%;
}
 
/*Block presentation*/
.moi
{
    display: inline-block;
    border-bottom: 1px solid black;
	border-top: 1px solid white;
    width: 450px;
	height : 250px;
    vertical-align: top;
    margin: 0px;
}
.recherche
{
    display: inline-block;
    border: 1px solid black;
    width: 850px;
	height: 250px;
    vertical-align: top;
	margin: 0px;
}
.nom_prenom
{
	margin: 0px;
	width: 445x;
	height: 50px;
	line-height: 50px;
	vertical-align: middle;
	padding-right: 5px;
	text-align : right;
	font-weight: bold;
}
.coordonnees
{
	margin: 0px;
	padding-right: 5px;
	width: 445px;
	height: 200px;
	line-height: 28px;
	vertical-align: middle;
	text-align : right;
	font-size: 1.2em;
}
.eleve_ing
{
	margin: 0px;
	text-align: center;
	width: 850px;
	border-bottom: 1px solid black;
	background: rgb(91,155,213);
	height: 50px;
	line-height: 50px;
	vertical-align: middle;
	font-weight: bold;
}
.objet
{
	margin: 0px;
	padding-left: 30px;
	width: 850px;
	height: 200px;
	line-height: 39px;
	vertical-align: middle;
	text-align : left;
}
em
{
	text-decoration: underline;
	font-style: italic;
	font-size: 1.1em;
}
 
/*Block corps*/
.prof_comp_cent
{
	display: inline-block;
    border: 1px solid black;
    width: 340px;
	height : 1150px;
    vertical-align: top;
	background: rgb(91,155,213);
    margin: 0px;
}
.form_exp
{
	display: inline-block;
    width: 960x;
	height : 1150px;
    vertical-align: top;
    border: 1px solid black;
	margin: 0px;
}
.titre_profil, .titre_competences, .titre_centres_interets
{
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
	padding-top: 10px;
}
.titre_savoirs-etre, .titre_savoirs-faire, .titre_logiciels, .titre_programmation, .titre_langues, .titre_association, .titre_sports
 {
	color: white;
	font-weight: bold;
	padding-left: 10px;
	text-decoration: underline;
	font-size: 1.15em;
 }
 .corps_savoirs-etre, .corps_savoirs-faire, .corps_logiciels, .corps_programmation, .corps_langues, .corps_association, .corps_sports
 {
	padding-left: 10px;
	padding-right: 5px;
	line-height: 26px;
}
.soulignement
 {
	border-bottom: 2px solid black;
 }
 .titre_formations, .titre_experiences
 {
	border-bottom: 2px solid black;
	padding-left: 10px;
	font-weight: bold;
	margin-left: 10px;
	margin-right: 10px;
	width: 930px;
	line-height: 20px;
	font-size: 1.3em;
 }
 .titre_INSA, .titre_GIM, .titre_BAC, .titre_fin_etudes, .titre_ETS, .titre_projets, .titre_Euzkadi, .titre_Dassault, .titre_projet_IUT, .titre_Piments
 {
	padding-left: 10px;
	font-size: 1.1em;
	line-height: 10px;
 }
 strong
{
	color: rgb(91,155,213);
	font-weight: bold;
	font-size: 1.1em;
}
ul
{
	font-size: 1em;
	line-height: 20px;
	margin-left: 15px;
}

Si vous pouvez me donner quelques pistes pour que je puisse corriger tout ça :-)
Ps : désolé de mettre tout le code comme ça, mais je pense que vous allez pouvoir mieux comprendre mon problème de la sorte
Merci d'avance !

**NoSmoking** · 06/10/2014, 21h54

Bonjour,
problème visiblement lié à la prise en compte ou non des bordures pour le calcul de la largeur des éléments.

Tu dois pouvoir régler cela en rajoutant dans le CSS

Code :

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

1
2
3
div{
  box-sizing: border-box;
}

le comportement devrait être le même sur les différents navigateurs.

Je pense également qu'il serait souhaitable que tu passes les largeurs en % plutôt qu'en px les navigateurs n'ayant pas tous la même façon de "comprimer" le contenu.

Je reste quand même perplexe qu'en à la nécessité de tester sur une réduction/augmentation excessive

Mise en page en zoom/dézoom

CSS

Discussions similaires

Partager

Partager