Mise en page changeante

**Amnael** · 29/01/2016, 21h00

Bonsoir,

je viens de me rendre compte en faisant des tests pour autre chose, que la mise en page déconnait complètement sur mes pages.

Lorsque je teste sur mon portable, ou même sur mon smartphone, je n'ai aucun problème d'affichage disproportionné.

En revanche, lorsque j'étais sur un ordre ordi (son écran est assez grand comparé à mon portable) et bien à ma grande surprise, tout était déformé.

Il est vrai que cet ordi était assez vieux, mais sous chrome je pensais qu'il n'y aurait pas de problème particulier.

Est-il possible que certaines propriété de mon CSS, comme flex, ne soit pas interprété correctement ?

J'ai mis le site en ligne pour que vous puissiez vous rendre compte directement de l'affichage de la page d'accueil.

http://wayofshogun.olympe.in/

Je vous met le CSS en question, mais vous devriez pouvoir y avoir accès en regardant le code source normalement

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
 
#all{
	background-color: black;
	border-radius:8px 8px 8px 8px;
	text-align: center;
}
 
#head{
 
	background-color: black;
	background-image:-webkit-linear-gradient(top, black 10%, #9F391A 100%);/*couleur progressive*/
	background-image:linear-gradient(to bottom, black 10%, #9F391A 100%);
	border-radius:8px 8px 8px 8px;
}
#head h1{
	text-align: center;
	color: white;
	font-family: "Comic Sans Ms";
}
 
#bodyHeart{
	display: flex;
	width: 100%;
	height: 100%;
	background-color: black;
	border-radius:8px 8px 8px 8px;
}
 
#infoIndex{
	background-color: maroon;
	border-radius:8px 8px 8px 8px;
	margin-top: 2.5%;
	margin-left: 3%;
	width: 30%;
	height:90%;
	word-wrap: break-word;
	font-family: "Comic Sans Ms";
}
 
#inscrip{
	border-radius:8px 8px 8px 8px;
	background-color: maroon;
	margin-left:10px;
	margin-top: 2.5%;
	width: 60%;
	height:90%;
	text-align: center;
	font-family: "Comic Sans Ms";
}
 
#image{
	border-width: 2px;
	border-color: purple;
	border-style:ridge;
	text-align: center;
	width: 50px;
	height: 50px;
}
 
#conec{
	margin-left: 15px;
	border-width: 2px;
	border-color: white;
	border-style:ridge;
	border-radius:8px 8px 8px 8px;
	width: 90%;
	height: 25%;
	background-image:-webkit-linear-gradient(top, red 10%, yellow 100%);/*couleur progressive*/
	background-image:linear-gradient(to bottom, red 10%, yellow 100%);
}
 
#kingAuth,#sitAuth{
	font-family: "Comic Sans Ms";
	color: white;
}

Invité · 29/01/2016, 21h30

Bonjourn,

Quel(le) est la question / problème précisément ?

**Amnael** · 29/01/2016, 22h33

Et bien par exemple si tu prend la page qui correspond directement au lien

On devrait voir, une image de type bannière en haut sur toute la page, puis en dessous deux cadre rouge aligné. Celui de gauche avec du texte, celui de droite avec les formulaires.

Sur l'ordi en question, le cadre de formulaire apparaissait sous le cadre de texte.

Sauf que, il me semblait avoir à peu près bien fait les choses et je me demandais si dans le css que j'ai fais il y avait quelque chose pouvant provoquer ça. Soit parce que non compris par un navigateur soit parce que mal codé.

**NoSmoking** · 31/01/2016, 12h51

Bonjour,
d'après le lien mis, il te faut commencer par mettre un DOCTYPE, par exemple le plus simple <!doctype html> pour pouvoir envisager la suite sereinement.

**Inikaam** · 01/02/2016, 09h47

Bonjour Amnael,

J'ai de grosses difficultés à visualiser ce que tu cherches à obtenir à partir de ta description. Puisque l'effet est correct sur ton portable, pourrais-tu nous donner une capture d'écran qui nous serve de comparatif stp ?

Mise en page changeante

CSS

Discussions similaires

Partager

Partager