Width différent selon le navigateur !

**Overrider** · 07/04/2017, 15h14

Bonjour à tous,

Je n'ai pas le même "width" selon que j'ouvre mon site avec Firefox, Mozilla ou safari...? J'ai défini ma section "aside" avec un width de 305px ! Seulement sur chrome ça s'affiche bien, sur Mozilla c'est trop large et sur safari c'est pas assez large...?

Mon 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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="styles/styles.css" />
 
		<title>Mon CV2 - Mme Risette</title>
	</head>
 
	<body>
		<!--Mon liseré-->
		<aside>
			<p>ENVOLEZ VOUS AVEC MOI !</p>
		</aside>
 
		<!--Corps de mon CV-->
		<section id="cv">
			<!--Entête de mon CV-->
			<header>
				<div id="titre">
					<a href="ma_photo_gd.html" title="Cliquez sur la photo, cela vous met ma photo en grand !" class="titre_photo"><img src="images/ma_photo.jpg" alt="Ma photo"/></a>
					<h1>Mme Risette</h1>
					<p>Apporte joie et bonheur à toute personne receptive !</p>
				</div>
 
				<div id="objet">
					<h2>Objet</h2>
					<p>Recherche un poste de <strong>Clown</strong>.</p>
				</div>
			</header>
 
			<section id="details_cv">
				<article id="xp">
					<h2>Mon expérience</h2>
					<ul>
						<li><span class="date">2016-2017</span> : Animatrice au Zoo de Beauval. <em>Apporter de la joie et de la bonne humeur !</em> aux animaux comme aux Hommes !</li>
						<li><span class="date">2015-2016</span> : Guide touristique au gouffre de Padirac. <em>Egayer les vacances des visiteurs</em> en ce site magnifique !</li>
						<li><span class="date">2014-2015</span> : Clown dans la troupe du cirque Pindère. <em>Apporter joie, bonheur et fou rire</em> aux plus petits comme aux plus grands !</li>
						<li><span class="date">2013-2014</span> : Animatrice à l'hôpital du centre. <em>Changer le quotidien des enfants</em> en longue convalescence</li>
					</ul>
				</article>
 
				<article id="form">
					<h2>Ma formation</h2>
					<ul>
						<li><span class="date">2017</span> : Certificat HTML5 sur Open ClassRoom. N'hésitez pas à visiter <a href="https://open classrooms.com/dashboard" title="Le site le plus génial du moment ! venez apprendre avec eux">leur site !</a></li>
						<li><span class="date">2013</span> : Certificats de l'école du rire et du bonheur. Venez la découvrir <a href="http://www.ecolederire.org/ecole-internationale-du-rire.html" title="Venez découvrir l'école du rire et du bonheur !">ici !</a></li>
					</ul>
				</article>
 
				<article id="comp">
					<h2>Mes Compétences</h2>
					<ul>
						<li><strong>Logistique d'un numéro</strong></li>
						<li><strong>Acrobatie</strong></li>
						<li><strong>Maitrise des techniques d'expression corporelle</strong></li>
						<li>HTML - <em>pour divertir aussi sur le web</em> -</li>
					</ul>
				</article>
			</section>
		</section>
	</body>
</html>

Et mon 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
/*pour tout*/
html
{
		background-image : url("../images/fond.jpg");
		background-color : Orange; /*Au cas où l'image aurait un souci...*/
		overflow-x : hidden;
}
 
body
{	
	width : 100%;
 
	color : White;
 
	display: flex;
	display: -webkit-flex; /*Pour safari ! Attention uniquement en 6.1 minimum !*/
	flex-direction : row;
 
	-webkit-align-content: stretch;
    align-content: stretch;
}
 
/*Pour l'index*/
/*Mon liseré*/
aside
{
	width : 305px;
 
	background-image : url("../images/lisere.png");
 
	border : 3px black solid;
	border-radius : 50px / 30px;
	box-shadow : 10px 10px 15px black;
}
 
/*Les sections*/
#cv
{	
	display : flex;
	display: -webkit-flex; /*Pour safari ! Attention uniquement en 6.1 minimum !*/
	flex-direction : column;
 
 
 
	padding-left : 1%;
}
 
header
{
	display : flex;
	display: -webkit-flex; /*Pour safari ! Attention uniquement en 6.1 minimum !*/
	flex-direction : column;
}
 
#details_cv
{
	display : flex;
	display: -webkit-flex; /*Pour safari ! Attention uniquement en 6.1 minimum !*/
	flex-direction : row;
}
 
div, article
{
	margin-bottom : 20px;
	margin-right : 10px;
 
	Background-color : rgba(137, 133, 133, 0.8);
 
	border : 3px black solid;
	border-radius : 50px / 30px;
	box-shadow : 10px 10px 15px black;
 
	text-align : center;
	line-height : 30px;
}
 
h2
{
	text-decoration : underline;
	font-size : 2em;
}
 
ul, li
{
	text-align : left;
}
 
a
{
	color : white;
}
 
a:hover
{
	font-weight : bold;
	font-size : 1.2em;
}
 
strong
{
	font-size : 1.2em;
}
 
.date
{
	text-decoration : underline;
	font-weight : bold;
}
 
#titre
{	
	position : relative;
	padding-left : 30px;
}
 
#titre h1
{
	font-size : 3em;
	text-shadow : 10px 10px 15px white;
}
 
a.titre_photo
{
	width : 118px;
	height : 107px;
 
	position : absolute;
 
	margin-top : 15px;
	left : 100px;
 
	float : left;
 
	border : 3px black solid;
}
 
em
{
	font-family: 'AlexBrush-Regular', Arial, serif;
	font-size : 1.2em;
}
 
@font-face /* Définition d'une nouvelle police nommée LearningCurveProRegular, plusieurs polices selon celle qui sera supportée par le navigateur, il la téléchargera en conséquence !*/
{
    font-family: 'AlexBrush-Regular';
    src : url('../polices/AlexBrush-Regular.ttf') format('truetype');
}
 
/*Pour la page grande photo*/
 
a.photo_gd
{
	width : 472px;
	height : 428px;
 
	margin-top : 15%;
	margin-left : auto;
	margin-right : auto;
 
	display : block;
 
	border : 10px black solid;
}

Avez-vous une idée de la raison d'un tel problème ? Et surtout comment le corriger ? Car mon aside à une image background hyper précise qui ne doit pas changer de width...

**NoSmoking** · 08/04/2017, 10h24

Bonjour,
essaie de mettre sur ton <aside>

Code :

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

1
2
min-width: 305px;
box-sizing: border-box;

mais ta page me semble « chargée et mal foutue »

**Overrider** · 07/05/2017, 18h31

Je reviens un peu tard... Merci NoSmoking, cela fonctionne.

Au passage j'ai relu mon code pour voir ce qui n'allais pas dedans en écoutant ton "ta page me semble « chargée et mal foutue »". Etant débutant, je ne comprend pas ce qui ne va pas dedans, je reste donc ouvert à vos avis et critique, soyez certains que j'améliorerez ma manière de coder en conséquence. Merci à tous.

Width différent selon le navigateur !

CSS

Discussions similaires

Partager

Partager