Discussion :

[°°° Zen-Spirit °°°]

Bonjour à tous !
J'ai besoin d'un renseignement.
Je vais commencer à coder mon site. Et je crée ce topic, pour ne pas en créer plusieurs. Donc tout ce qui se rapportera à l'aide concernant mon site, je le mettrai ici.
D'abord je voudrai savoir quels sont les points ou je dois tout mettre à 0, c'est à dire au même niveau dans un fichier CSS.
Par exemple :

*
{
margin: 0;
padding: 0;
border: 0;
font-family: Verdana, Arial, serif, sans-serif;
font-size: 1em;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: justify;
}

Est ce que c'est une bonne idée de commencer un fichier CSS par çà ?

-Est ce que vous pouvez me confirmez que le code qui permet par exemple de centrer le corps d'un design est celui là :

body
{
margin: auto
margin-top: 0px;
margin-bottom: 0px;
text-align: justify;
}

vace ce codage là, le site est il extensible ?

Merci.

[Erwan31]

Est ce que c'est une bonne idée de commencer un fichier CSS par çà ?

Non pas de façon aussi radical, ce type de reset est à éviter. Les styles par default du navigateurs sont là pour assurer un minimum de présentation en l'absence de ta css (styles auteurs).
Vouloir TOUT annuler est donc absurde et peut s'avérer problématique...
D'autre part cela implique de tout redéfinir par la suite (marges Hn, font-size, font-weight...) sans rien oublier.

Mieux vaut annuler certains style par default en connaissance de cause (pour éviter par exemple de trop grandes différences de marges/padding entre navigateurs) et de manière ciblé avec des reset de ce type (exemple non exhaustif) :

Code :

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

1
2
3
ul,ol,form,body,fieldset {margin:0; padding:0;}
li { list-style:none;}
a img { border:none;}

Mais ce n'est qu'un exemple parmi d'autres qui devra dépendre de prises de décisions bien mesurées.

Est ce que vous pouvez me confirmez que le code qui permet par exemple de centrer le corps d'un design est celui là :
vace ce codage là, le site est il extensible ?

Non les marge auto latérales doivent être appliquées au div conteneur globale ou aux divs enfant directes (directement imbriqués) de body.

[niklaus]

Non pas de façon aussi radical, ce type de reset est à éviter. Les styles par default du navigateurs sont là pour assurer un minimum de présentation en l'absence de ta css (styles auteurs).
Vouloir TOUT annuler est donc absurde et peut s'avérer problématique...
D'autre part cela implique de tout redéfinir par la suite (marges Hn, font-size, font-weight...) sans rien oublier.

Hum, je ne serais pas aussi catégorique qu'Erwan sauf si on maitrise bien les valeurs par défaut des éléments. Sans cette bonne connaissance, on est confronté à des décalages lors de mises en page. Et les styles par défaut ne sont de loin pas identiques pour chaque navigateur et versions de navigateur. Moi, par expérience, j'ai préféré mettre mes margin et padding à zéro et redéfinir mes propriétés en fonction de mes besoins. C'est mon choix
Niklaus

[°°° Zen-Spirit °°°]

Merci à vous pour vos précisions ! Je comprends mieux.
Je suis entrain de constituer le corps de ma page html. J'ai un petit soucis.
Dans le corps il y a 3 parties, genre 3 box afin de mettre des infos dans ces 3 box, comme sur ce site là :Exemple ici.
Vous pouvez voir que dans le corps de leur site, il y a une partie blanche que j'appelle box-photo ( où il y a la la photo du joueur de foot et c'est écrit "A la une du mercredi 02 avril"), le 2ème box, c'est la partie noire où c'est écrit "ALL PSG TV" et la dernière partie c'est un autre box que j'appelle box info rouge, c'est là où c'est écrit "priez ..."
Le problème c'est ce dernier box.

Donc j'ai 3 boites à mettre dans ce corps et la dernière boite ne veut pas se mettre à coté de la 2ème boite. Pourtant lorsque je mets un float left pour la 2èm boite, elle se mets à coté, mais pour la 3ème, elle ne se pet pas à droite à coté de la 2ème boite, mais sous la 1ère boite.
Je vous laisse mon code, afin de m'aider à corrgier mon erreur, mais moi je ne vois pas l'erreur car j'ai fais exactement la même chose que pour la 2ème boite.

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
 #corps
{
   float: left;
}
 
.corps-haut
{
   width: 958px;
   height: 30px;
   margin-left: 22px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/corps-haut1.jpg");
   background-repeat: no-repeat;
   margin-bottom: 0px;
  }  
 
 
  .corps-central
{
   width: 958px;
   margin-left: 22px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   padding-top: 700px; /*  EFFACER CETTE DIMENSION POUR QUE C A SOIT EXTENSIBLE */
   margin-top:0px;
   background-image: url("images/corps/corps-central1.jpg");
   background-repeat: x-repeat;
   margin-bottom: 0px;
  }  
 
  .corps-bas
{
   width: 958px;
   height: 24px;
   margin-left: 22px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   padding-top: 0px;
   background-image: url("images/corps/corps-bas1.jpg");
   background-repeat: x-repeat;
   margin-bottom: 0px;
  }  
 
 
 
 #box-photo
{
   float: left;
}
 
  .box-photo-haut-blanc
  {
   width: 350px;
   height: 44px;
   margin-left: 21px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 22px;
   background-image: url("images/corps/box-photo-blanc-haut.jpg");
   background-repeat: no-repeat;
 }  
 
  .box-photo-centre-blanc
  {
   width: 350px;
   height: 220px; /*  EFFACER CETTE DIMENSION POUR QUE C A SOIT EXTENSIBLE */
   margin-left: 21px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-photo-blanc-centre.jpg");
   background-repeat: x-repeat;
 }  
 
  .box-photo-bas-blanc
    {
   width: 350px;
   height: 44px;
   margin-left: 21px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-photo-blanc-bas.jpg");
   background-repeat: no-repeat;
 }  
 
 
   #box-info-noir
{
   float: left;
}
 
  .box-partie-haute-noir
  {
   width: 350px;
   height: 44px;
   margin-left: 10px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 23px;
   background-image: url("images/corps/box-texte-noir-haut.jpg");
   background-repeat: no-repeat;
 }  
 
  .box-partie-centre-noir
  {
   width: 266px;
   height: 220px; /*  EFFACER CETTE DIMENSION POUR QUE C A SOIT EXTENSIBLE */
   margin-left: 10px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-texte-noir-centre.gif");
   background-repeat: x-repeat;
 }  
 
  .box-partie-bas-noir
    {
   width: 350px;
   height: 44px;
   margin-left: 10px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-texte-noir-bas.jpg");
   background-repeat: no-repeat;
 }  
 
 
   #box-info-rouge
{
   float: left;
}
 
  .box-partie-haute-rouge
  {
   width: 266px;
   height: 13px;
   margin-left: 0px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-partie-rouge-haut.jpg");
   background-repeat: no-repeat;
 }  
 
  .box-partie-centre-rouge
  {
   width: 266px;
   height: 250px; /*  EFFACER CETTE DIMENSION POUR QUE C A SOIT EXTENSIBLE */
   margin-left: 0px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-partie-rouge-centre.jpg");
   background-repeat: x-repeat;
 }  
 
  .box-partie-bas-rouge
    {
   width: 266px;
   height: 13px;
   margin-left: 0px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-partie-rouge-bas.jpg");
   background-repeat: no-repeat;
 }

[°°° Zen-Spirit °°°]

C'est bon j'ai réussi à faire passer le 3ème bloc en haut à droite à coté du bloc central.
J'ai juste rajouter des - .
Je ne sais pas pourquoi, ici, il faut rajouter des moins, car pour le 2ème bloc il y avait pas besoin, mais en tout cas çà marche.

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
 #box-info-rouge
{
   float: left;
}
 
  .box-partie-haute-rouge
  {
   width: 266px;
   height: 13px;
   margin-left: -62px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-partie-rouge-haut.jpg");
   background-repeat: no-repeat;
 }  
   
  .box-partie-centre-rouge
  {
   width: 266px;
   height: 250px; /*  EFFACER CETTE DIMENSION POUR QUE C A SOIT EXTENSIBLE */
   margin-left: -62px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-partie-rouge-centre.jpg");
   background-repeat: x-repeat;
 }  
 
  .box-partie-bas-rouge
    {
   width: 266px;
   height: 13px;
   margin-left: -62px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   margin-top: 0px;
   background-image: url("images/corps/box-partie-rouge-bas.jpg");
   background-repeat: no-repeat;
 }

[°°° Zen-Spirit °°°]

Bonjour à tous.
Voilà, je continue à coder mon site et j’ai trois soucis.
1/ Lorsque je clique deux fois rapide sur le fichier index dans « Mes Documents », il ‘saffiche très bien, exactement comme je veux dans « INTERNET EXPORER ».
Par contre (toujours dans mes documents) lorsque que je clique deux fois rapide sur le fichier index sous « FIREFOX MOZILLA », il s’affiche différement avec des morceaux du design un peu partout.
2/ Le second problème c’est ceci : Comme je viens de dire ci-dessus il s’affiche bien sur « INTERNET EXPLORER » lorsqu’il n’est pas sur le net, mais dès que je mets mon site sur le net, il s’affiche plus pareille, même sous « INTERNET EXPLORER » il s’affiche mal et différement. C’est tout de même bizarre.

3/ Je vous laisse le lien de mon site pour voir ce que çà donne sous les 2 navigateurs, en sachant que même sous "INTERNET EXPLORER", il s'affiche pas pareil lorsqu'il est sur le net ou pas (et sous MOZILLA) c'est pire et aussi m’aider à corriger çà. car j'ai revu des tutos mais j'ai l'impression de faire ce qu'il faut, mais au final, je crois bien que je prends la mauvaise direction.
Visiter mon site
Mon fichier CSS se nomme : designs.css

MERCI