Je commence à CODER mon site

Version imprimable

02/04/2008, 16h01
°°° Zen-Spirit °°°

Je commence à CODER mon site

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 :

Citation:

*
{
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à :

Citation:

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

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

Merci. ;)
02/04/2008, 16h54
Erwan31
Citation:

Envoyé par °°° Zen-Spirit °°°

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:

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.

Citation:

Envoyé par °°° Zen-Spirit °°°

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.
02/04/2008, 19h27
niklaus

Citation:

Envoyé par Erwan31

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 :D
Niklaus

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:

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;
 }

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:

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;
 }

03/04/2008, 23h25
°°° 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
04/04/2008, 08h17
Deallyra

Bonjour,

Cela peut venir de ton hebergeur. As-tu des nom de fichiers qui correspondent, casse incluse?
Sinon tes chemins d'accès sont absolus ou relatifs?

Salut MimiCracra44 !
Merci de vouloir m'aider.
j'ai quelques petites questions.
1/ est qu'une balise "class" peut contenir une balise "id" ?
2/ Quelqu'un m'a parlé de " mon doctype, donc l'interprétation par ie est modifié car il passe en mode Quirks " mais je n'ai rien compris. Il m'a aussi conseillé de passer du mode "STRIC" au mode "TRANSITIONNAL", mais çà n'a rien changé à mon problème.
3/ je ne comprends pas trop ce que tu veux dire par

Citation:

casse incluse?
Sinon tes chemins d'accès sont absolus ou relatifs?

Merci.
Là je suis de tout recommencer à zéro.

En fait pour en revenir à cette balise, en fait le corps est coupé en trois.
le haut (avec bordure arrondie), le centre et le bas (avec bordure arrondie).
Moi je veux mettre mes infos dans la partie centre du corps.
Avec des boites de dialogue. Est que le

Code:

<div class="corps-central">

peut contenir un

Code:

<div id="cadre-photo"> </div>

Je vous l'exmple :
Code:

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 <div id="corps"> <div class="corps-haut"> </div> <div class="corps-central"> <div id="cadre-photo"> <div class="cadre-photo-haut-blanc"> </div> <div class="cadre-photo-centre-blanc"> <img src="images/corps/images-box-photo/om-stade-velodrome10.jpg" class="stade-velodrome" alt="stade-velodrome" title="stade-velodrome"/> <p class="paragraphe1"> La victoire face à Lorient a regonflé le moral des Olympiens. Cette semaine, ils se préparent pour affronter, dimanche, l’Olympique Lyonnais. Un match de prestige en pleine course-poursuite pour la troisième place du championnat.<br> Eric Gerets a confirmé mercredi le forfait de Mathieu Valbuena pour la réception dimanche de Lyon au Vélodrome. </p> </div> <div class="cadre-photo-bas-blanc"> </div> </div> </div> <div class="corps-bas"> </div> </div>

Merci c'est bon, pour l'espacement, j'ai réussi, il fallait juste mettre tout à plat au début du fichier CCS:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 * { 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; }
l'espace n'y est plus.
Merci.

Cependant lorsque je crée un 2ème cadre juste à coté ( pour mettre des infos ), sous FIREFOX, il s'affiche bien, mais sous IEXPLORER il me décale le cadre vers la droite. Ici
Je n'arrive pas à résoudre ce problème. J'ai essayé plein de modification dans mon code, mais çà marche pas. Si par exemple je fais un :

Code:

margin-left: -10px;

ou

Citation:

un padding-left: -10px;

Il me décale tout le cadre noir vers la gauche mais c'est plus bon, car du coup sous FIREFOX aussi il me le décalle vers la gauche et donc le cadre noir se colle avec le cadre blanc.
Voici, le code des deux cadre dont je vous parle :
Pour le cadre blanc :

Citation:

#cadre-photo
{
float: left;
}

.cadre-photo-haut-blanc
{
width: 350px;
height: 44px;
margin-left: 23px; /* 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-haut.jpg");
background-repeat: no-repeat;
}

.cadre-photo-centre-blanc
{
width: 350px;
margin-left: 23px; /* 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: repeat-y;
}

.cadre-photo-bas-blanc
{
width: 350px;
height: 44px;
margin-left: 23px; /* 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;
}

Pour le cadre noir :
Code:

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 #cadre-noir { float: left; } .cadre-noir-partie-haute { width: 266px; 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-haut.jpg"); background-repeat: no-repeat; } .cadre-noir-partie-centre { width: 266px; height: 420px; /* 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; } .cadre-noir-partie-basse { width: 266px; 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; }

05/04/2008, 19h29
°°° Zen-Spirit °°°

Bonjour à tous ! :cry:
Y a personne pour m'aider à corriger ce problème de décalage avec Internet Explorer alors que sous Mozilla çà s'affiche très bien !
Je galère vraiment depuis 2 voir 3 jours sur ce détails là et j'avance pas. J'ai beau lire des forums ou tutos sur internet, mais je n'arrive pas à corriger ce soucis. :(
je vous laisse l'adresse pour voir ce que çà donne sous les 2 navigateurs : Voir Ici

Merci à vous.
05/04/2008, 19h59
Candygirl

Citation:

Envoyé par °°° Zen-Spirit °°°

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.

Ton hébergeur rajoute un script tout en haut de ton document, avant le doctype, cela a un impacte sur IE qui interprète alors ta page en mode quirks, sans compter sur le propogue xml qui fait aussi passer IE6 en mode quirks...

En local, vu que tu n'as rien avant le doctype (enfin, à part la déclaration xml), ton site est interprété en mode presque standard par IE7 d'où un résultat plus proche des autres navigateurs.

Tu devrais commencer par héberger ta page ailleurs ;)
05/04/2008, 20h07
Erwan31

Bon ben CandyGirl à répondu à ma place :)

Même remarque donc, je te conseil vivement de changer d'hébergement et d'en choisir un qui évitera d'afficher des pus de partout, ça fait fuir pas mal de visiteurs.

Le mode Quirks est la première chose à éviter si tu veux éviter les prises de s
têtes inutiles et des différences d'affichage parfois difficilement anticipables surtout quand on débute.
Le passage en mode standard resoudra par exemple ton problème de
centrage de la page sous IE.

je te conseil d'utiliser un doctype xHTML transitionnal en ayant si possible préalablement appris les règles syntaxique du xHTML.
05/04/2008, 20h11
°°° Zen-Spirit °°°

Salut Cadygirl !
1/ Merci de m'avoir donné une réponse tant attendue.
2/ Sinon, tu penses qu'il n'y a aucune autre solution que de changer d'hébergeur ?
Il n'y a pas un code qui permet de rectifier çà sous IEXPLORER ?
3/ Aussi, avec FREE, tu sais si çà peut coder le même soucis ou pas ?
Merci encore.
Au moins j'ai eu une réponse. car qu'est ce que j'ai galéré et perdu du temps.
Jamais je n'aurai trouvé çà tout seul. ;)
05/04/2008, 20h14
°°° Zen-Spirit °°°

Citation:

Envoyé par Erwan31

Bon ben CandyGirl à répondu à ma place :)

Merci quand même Erwan.
Donc pour récapituler, mon codage CSS et HTML est correct, c'est juste un problème de d'hébergeur ?
Tu me le confirmes !
Comme çà maintenant je vais pouvoir continuer.
Je pousse un grand Ouf ! Car après 3 jours ou je n'ai pas avancé du tout, je vais enfin continuer.
Un grand Merci à vous. ;)
05/04/2008, 20h20
12monkeys

Citation:

Envoyé par °°° Zen-Spirit °°°

3/ Aussi, avec FREE, tu sais si çà peut coder le même soucis ou pas ?

Si, comme j'ai compris, le problème vient du code intégré à ta page par ifrance, alors chez free tu n'auras pas ce souci étant donné que chez free ils n'intègrent pas de code dans tes pages...
05/04/2008, 20h25
°°° Zen-Spirit °°°

Merci 12Monkeys !
J'ai pris note. ;)

JE vais maintenant continuer mon petit site.
Par contre je me réserve le droit de revenir vers vous si d'autres besoins d'info devaient intervenir. :king:
++
05/04/2008, 20h26
Erwan31
Pour info, j'ai édité mon message précédent.

Citation:

Envoyé par °°° Zen-Spirit °°°

Merci quand même Erwan.
Donc pour récapituler, mon codage CSS et HTML est correct, c'est juste un problème de d'hébergeur ?
Tu me le confirmes !

Non tes problèmes d'affichage viennent en partie du fait que l'absence de Doctype faisait basculer les navigateurs récents en mode de rendu Quirks
(non standard et propriétaire) qui favorise des différences d'affichages entre navigateurs.

Pour partir d'une bonne base, je te conseil l'outil squelettor
Code:

1 2 3 4 5 * { margin: 0; padding: 0; }
Pour le reset CSS tu peux commencer par t'en tenir à ce code pour mais cela représente certains inconvénients, relis mon premier message ;)

Oublies tout le reste et passe font-family: Verdana, Arial, serif, sans-serif; dans le body