Les Erreurs les plus courantes en codage
Combien de fois vous êtes-vous retrouvés à rager parce que votre code ne fonctionnait pas ? Pour la simple raison qu'il vient d'apparaître sous vos yeux un bug horrible. Combien de fois avez-vous secoué votre pc en souhaitant que cela ne soit qu'un rêve ? Et que tout redeviendra comme avant. Votre forum, votre PA, vos catégories, votre QEEL ou simplement votre template dont vous étiez si fier. Combien de fois vous êtes-vous dis que votre feuille de style css était lourde, trop trop grande ? Ou simplement que votre codage html est difficile à lire et indigeste ?
Beaucoup de fois je suppose et de nombreux cheveux perdus par poignée. Pourtant, je peux vous certifier une chose, la plupart du temps, si votre codage venait à foirer, c'est simplement une erreur. Une petite erreur d’inattention de votre part. Juste une mauvaise manipulation et tout le travail que vous avez effectué en plusieurs heures se trouve être réduit à néant.
Je vais prendre un peu de mon temps pour vous expliquez d'où elles peuvent venir. Mais aussi, les choses à ne pas faire. Quand vous faites vous même vos codages, cela arrive souvent que vous preniez de mauvaises habitudes. Croyez moi, certaines arrivent à nous faire sortir les yeux des orbites ou faire pleurer. Nous désignant bien sûr les codeurs ou ceux ci connaissant un maximum.
Pour votre codage, je peux vous assurer qu'avec un peu de finesse et de réflexion, vous arriverez à quelque chose de plus aéré, facilement lisible pour vous, vos administrateurs ou vos propres membres. Ce ne sera que de petits conseils d'une personne qui autrefois se posait les mêmes questions vis à vis de lui.
Commençons donc par le commencement.
1) Mon code ne s'affiche pas, plus ou qu'à moitié ou a du mal à s'afficher. Pourquoi ?
Si votre codage n'apparait pas ou qu'à moitié ou subit d'autres désagréments, cela ne peut être due à plusieurs choses. Je vais vous citer celles qui me viennent en tête.
La première, une mauvaise orthographe de votre css. Par exemple : letters-spacing à la place de letter-spacing. widht à la place de width. Etc. La moindre petite lettre en trop ou mal placée peut faire foirer. Il en est de même pour une virgule à la place d'un point virgule.
La deuxième, un espace. Un espace entre la fonction et le point virgule. Dans ce cas, même si l'orthographe est bonne, la fonction ne sera pas prise en compte. Vérifiez donc bien s'il n'y en a pas un petit caché là quelque part. L'espace ne pardonne pas.
Bon codage
- Code:
height: 35px;
Mauvais codage
- Code:
heigth: 35px ;
La troisième, un oubli des guillemets américains ou double quote : ". Elles doivent être impérativement au début et à la fin de votre html. C'est très important si vous voulez que cela fonctionne. Elles ne sont pas pour faire jolies.
Bon codage
- Code:
<div class="zero">
Mauvais codage
- Code:
<div class="zero>
La quatrième raison : une mauvaise balise ou une balise mal rangée. Par exemple si vous commencez avec une balise span et une balise font, il est évident que vous n'obtiendriez rien.
Exemple
- Code:
<div class="deux"><span class="trois"></div></span>
- Code:
<div class="deux"></span>
La cinquième, un préfixe manquant. Le code fonctionne.
Pour la question des préfixes apposés aux propriétés CSS3 (comme border-radius), il faut savoir qu'ils sont de moins en moins utiles, actuellement firefox, Chrome et compagnie ont implémenté border-radius et de ce fait -moz-border-radius n'est plus interprété par Firefox. Du coup, si vous ne mettez que ce dernier, il ne fonctionnera pas.
Il est important de noter également qu'il faut mettre la propriété CSS3 EN DERNIER quand on utilise les préfixes, donc par exemple : - Code:
-moz-border-radius : pour firefox
-webkit-border-radius : pour google chrome
border-radius : pour les navigateurs les plus récents
Le sixième point, un css vide. Un css "vide" bloque la suite de la feuille : si vous écrivez une ligne CSS ne comportant aucune propriété entre les accolades, la lecture du css se retrouve bloquée à cet endroit et la suite de votre feuille risque de ne pas être lue, ni interprétée par le navigateur.
- Code:
.exemple
{
}
Enlevez le code ou mettrez une propriété à l'intérieur.
Le septième point, un oubli de hauteur. Pour qu'une "div" apparaisse elle doit avoir une hauteur. Bien souvent on essaie de mettre des blocs et il arrive d'oublier de lui imposer une hauteur.
Le huitième point, l'ajout d'un caractère spéciaux dans les annotations de la feuille de style. Il est courant d'annoter le CSS si votre feuille est longue en mettant comme ceci :
- Code:
/* PAGE ACCUEIL */
Cela permet de délimiter et classer un peu votre css, bien utile s'il fait 2000 lignes... Mais attention, si vous mettez cela :
- Code:
/* PAGE D'ACCUEIL */
L'apostrophe bloque la lecture du css, tout ce qui se trouve après elle risque de ne pas être interprété !
Le dernier point, la mauvaise écriture de vos commentaires html. Les commentaires s'inscrivent comme ceci :
Pour le css
- Code:
/*navigation*/
Pour le html
- Code:
<!-- HTML -->
2) Mon codage fonctionne mais il englobe le reste. Pourquoi ?
La plupart du temps, si vous rencontrez ce problème pour vos profils, pour votre QEEL, votre page d'accueil, ça ne vient que de deux choses. Deux petites choses parfaitement ridicules qui peuvent vous faire perdre des heures de recherche si la solution ne vous vient pas immédiatement à l'idée.
Ces erreurs ci sont principalement dues à une balise ouverte. Il suffit d'une seule pour que le code du dessous soit imbriqué dans celle du dessus. Ce qui donne, dirons nous, un résultat assez bancal.
Vérifiez donc bien que vos balises soient fermées. Comme ceci
- Code:
<span></span>
Et surtout qu'elles vont par pair.
L'autre, le slash manquant. Le Slash ferme la balise.
Vous pourrez aussi avoir le cas où vous avez un mot suivit d'un > accolé.
- Code:
kiwi>
Ce simple petit détail possède le même effet.
Retirez le et le souci devrait être réglé.
3) Dans mon templates, il apparaît des écritures rouges. Est-ce normal ?
La réponse est oui et non. Les balises rouges sont un avertissement. Elles ne veulent pas forcément dire que c'est faux. Et la non présence de cette teinte ne veux pas dire que votre codage est juste. C'est un avertissement quand on croise les balises. Il faut donc le prendre avec des pincettes.
Je vous conseille donc de ne pas trop compter sur elle. Veillez juste que vos balises soient bien fermées. Qu'aucune balise ne soit par nombre impair. Et que celles-ci ne se croisent pas dans un mauvais sens.
Que votre tableau, si vous en avez rajouté des nouveaux, possède une structure bien construite qui se présente ainsi.
- Code:
<table border="0"><tr><td></td></tr></table>
4) Puis-je mettre du Css dans mon template ?
Ce n'est pas vraiment conseillé.
Pour la première raison, c'est une perte de temps. Imaginez, dans le cas où vous refaites votre design, vos fonctions sont dans le templates. Il vous faudra tester directement à l'intérieur. Et seulement vous. Vous devez modifier, accepter, éditer, modifier.
Pour la deuxième raison, la praticité. En mettant votre css dans le templates, de un, le code devient d'avantage lourd à comprendre. De deux, vous êtes le seul qui peut avoir accès à celui-ci. Les templates ne sont pas disponibles à vos administrateurs. Seul vous, le fondateur peut les voir. Ils ne pourront pas vous aider s'ils s'y connaissent un minimum.
Pour la troisième raison, la propreté. Lorsque vous demandez de l'aide ici, nous devons fouiller votre code de fond en comble. Ce qui, je peux vous le dire sincèrement, est difficile et lourd.
Pour vous faciliter la vie, préférez les class ou les id selon ce que vous souhaitez faire. Le css, quant à lui, dans votre feuille de style de css. Elle est là pour ça.
5) Puis-je mélanger les langages ?
Surtout pas !
C'est l'erreur la plus grosse et la plus courante.
Il ne faut pas mélanger les langages informatiques !!
Si vous commencez en [bbcode] poursuivez en [bbcode]. Ne venez pas subitement changer d'idée en rajoutant du html.
Pareillement, si vous codez avec des div class ne venez pas imbriquer du css dans votre codage. Où est là logique dans ce cas là ? De un, ça fait brouillon, de deux, vous ne vous y retrouverez pas. De trois, vous perdrez vos membres dans vos lignes de codage.
Prenez en compte que la plupart des cas, les personnes ne s'y connaissent pas. Vous aurez souvent vos fiches de présentation ou fiches de partenariat remplies d'erreurs pour une mauvaise manipulation. Minimisez les dégâts avec un codage réduit et propre.
Le langage informatique, pour les non initiés est difficile à lire. Prenez s'en compte.
Ensuite, le mélange peut tromper le parseur. Le parseur est ce qui analyse la syntaxe et traduit les lignes de code en commande.
Mauvais codage
- Code:
<div class="carotte">[color: blue][/color]</div>
- Code:
<div class="poischiche"><span style="color: white; border-bottom: 2px solid green"></span></div>
Bon codage
- Code:
<div class="haricot"><font class="verdure"></font></div>
6) Sémantiques fausses
Quand vous codez, faites gaffe à la sémantique. Vous avez parfois l'envie de faire des marges avec des blockquotes ou des lists. Mais, comment dire le premier ne convient qu'au citation, le deuxième lui, est utilisé pour les listes.
Pareil pour les titres. Ils se font en utilisant h1, h2 etc. Faites donc attention à ne pas vous tromper.
Exemple
- Code:
<h1 style="color: red; font-weight: bold; font-size: 15px;">Titre</h1>
7) Mon code de css me paraît long. Existe t-il une méthode pour l'alléger.
La réponse est Oui. Par contre, ce n'est pas une recette miracle.
Si vous utilisez dans votre css des propriétés similaires à divers blocs d'éléments, créez vous une class qui englobera celles-ci. Il est possible d'en mettre plusieurs. Cela évitera de les dupliquer un peu partout. Ce qui, à la longue, alourdit votre codage et ne vous facilite pas la tâche si dès le départ, vous n'avez pas eu l'ingéniosité de commenter chacune d'entre elles.
Exemple css + html avant
- Code:
.rectangle {height: 30px;
border: 1px dotted black;
background-color: #ffffff;
width: 80px;}
.carre {height: 30px;
border: 1px dotted black;
background-color: #ffffff;
width: 30px;}
- Code:
<div class="carre"></div><div class="rectangle"></div>
Exemple css + html après
- Code:
.bordure_fond {
border: 1px dotted black;
background-color: #ffffff;}
.rectangle {height: 40px;
width: 80px;}
.carre {height: 30px;
width: 30px;}
- Code:
<div class="bordure_fond rectangle"> ... </div>
<div class="bordure_fond carre"> ... </div>
En effet, il est possible de mettre plus d'une classe dans l'attribut class, sachant que si par exemple il y a une propriété à une certaine valeur dans la première classe, et que cette même propriété a une valeur différente dans la deuxième, c'est la dernière arrivée qui gagne.
Exemple
- Code:
.monbloc {
width:100px;
height:50px;
background:yellow;
}
.grand {
height:80px;
}
.vert {
background:green;
}
- Code:
<div class="monbloc">Un bloc normal</div>
<div class="monbloc grand">Un bloc normal mais un peu plus grand</div>
<div class="monbloc vert">Un bloc normal mais avec le fond vert</code>
Article rédigé par Angelusia, corrigé par Halloween/Neva et complété par 'Christa/Scavenger/Sparrow.
Dernière édition par Angelusia le Mer 6 Mar 2013 - 9:51, édité 7 fois
