Sujets similaires

Bonjour ABSOLUTE SUNSHINE (vache ce capslock) !

Et bien je dois avouer que j'avais raté ce code, du coup je m'excuse pour l'attente mais on va s'occuper de la procédure de validation dès à présent Wink

Alors, le code est direct et efficace donc rien à dire de ce côté, en revanche il n'est pas encore franchement correct et comporte pas mal de petites erreurs que nous allons corriger ensemble (je les repère et t'indique comment les corriger). L'idée c'est de proposer un code optimal aux membres et en profiter pour te donner des conseils et bonnes pratiques de codage à toi (le double effet Kiss Cool).

Bref, commençons donc avec le premier jet de corrections à apporter à ton code.

La description

Au lieu de mettre toutes les explications d'installation dans le petit carré dédié à la description, préfère plutôt les intégrer directement dans le code, quitte à rajouter une partie initiale <h3>Préambule</h3>.

Garde dans description uniquement la description de ton code (le résultat).

Le HTML

Au niveau du HTML, il faudrait commencer par indenter tout ça. Ca permet d'aérer le code, de le rendre plus lisible et plus maintenable sans faire de bétise. Ca permet également de repérer toutes les erreurs surtout celles de structure qui posent des problèmes compliqués parce-que le code est fouilli derrière.

Bref, j'ai pris ton code compressé et je me suis servi d'un beautifier (y'en a pleins sur Internet par exemple). Ca me donne :

Code:: <br />
<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css' />
<center>
<br />

<div class="point"></div>
<a href="#">
<span class="menu">règlement</span>
</a>
<img src="http://image.noelshack.com/fichiers/2012/44/1351879218-878748748.png" style="width:6px;height:2px;" />
<a href="#">
<span class="menu">présentation</span>
</a>
<img src="http://image.noelshack.com/fichiers/2012/44/1351879218-878748748.png" style="width:6px;height:2px;" />
<a href="#">
<span class="menu">partenariat</span>
</a>
<img src="http://image.noelshack.com/fichiers/2012/44/1351879218-878748748.png" style="width:6px;height:2px;" />
<a href="#">
<span class="menu">infos</span>
</a>
<img src="http://image.noelshack.com/fichiers/2012/44/1351879218-878748748.png" style="width:6px;height:2px;" />
<a href="#">
<span class="menu">autre ?</span>
</a>
<br /><br />

<table>
<tr>
<td>
<div class="blooc" style="width:230px;">
<center>
<div class="yoo">
<span class="titrepa">Le Staff</span>
</div>
</center><br />

<center>
<img src="http://25.media.tumblr.com/tumblr_mbsavepfqc1rga9u7o1_250.gif" class="staff" /><br />
pseudo â˜† <a href= "lien profil">profil</a> • <a href="lien mp">contacter</a><br />

<img src="http://24.media.tumblr.com/tumblr_mbsavepfqc1rga9u7o4_250.gif" class="staff" /><br />
pseudo â˜† <a href="lien profil">profil</a> • <a href="lien mp">contacter</a>
</center>
</div>
</td>

<td>
<div class="blooc" style="width:340px;">
<center>
<div class="yoo">
<span class="titrepa">Bienvenue !</span>
</div><br />

<div class="textepa">
texte de bienvenue ici
</div><br />
</center>
</div>
</td>

<td>
<div class="blooc" style="width:190px;">
<center>
<div class="yoo">
<span class="titrepa">Partenariat</span>
</div><br />

<div style="width:98%;height:150px;overflow:auto;">
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
</div>
<a href="#">les autres</a> • <a href="#">demande</a>
</center>
</div>
</td>
</tr>

<tr>
<td>
<div class="blooctwo" style="width:230px;">
<center>
<div class="yoo">
<span class="titrepa">Crédits</span>
</div>
</center><br />
<span style="font-size:10px;">Crédit ici<br />
Et ici aussi (ne pas retirer le logo du forum et mon pseudo svp)<br />
Page d'accueil réalisée par ABSOLUTE.SUNSHINE</span><br />

<center>
<a href="http://www.css-actif.com/"><img src="http://files.cssactif.com/logos/css-actif-8831.gif" border="0" /></a>
</center>
</div>
</td>

<td>
<div class="blooctwo" style="width:340px;">
<center>
<div class="yoo">
<span class="titrepa">Nouveautés</span>
</div>
</center>
00/00/00 • nouveauté ici<br />
00/00/00 • nouveauté ici<br />
00/00/00 • nouveauté ici<br />
00/00/00 • nouveauté ici<br />
00/00/00 • nouveauté ici<br />
00/00/00 • nouveauté ici<br />
<br />
</div>
</td>

<td>
<div class="blooctwo" style="width:190px;">
<center>
<div class="yoo">
<span class="titrepa">Top sites</span>
</div>

<div style="width:98%;height:135px;overflow:auto;">
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351880464-topsite98.png" class="tops" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351880464-topsite98.png" class="tops" />
</a>
<a href="#">
<img src="http://image.noelshack.com/fichiers/2012/44/1351880464-topsite98.png" class="tops" />
</a>
</div>un vote toutes les deux heures ~
</center>
</div>
</td>
</tr>
</table>
</center>

C'est déjà plus agréable non ? Smile

Au passage ça a corrigé les petites erreurs des balises orphelines (on ne met pas <br> mais <br /> par exemple).

Ensuite, il faudrait nettoyer tous les style="...". C'est simple, il ne doit pas y en avoir. Si tu as besoin de définir des propriétés CSS, tu les mets dans le CSS, quitte à créer des classes !

Enfin (pour le moment), <center> n'est pas valide du tout (mais alors pas du tout). Il ne faut jamais l'utiliser, c'est sale, moche et c'est pas bien pour tout un tas de raisons Razz

De plus, ForumActif dispose déjà d'une classe CSS .center par défaut. Autrement dit, il existe une méthode valide qui coûte pas plus cher à utiliser et qui fonctionne. <div class="center"> fais donc la même chose, mais est correct.

Le CSS

Au niveau du CSS ça va à peu près, tu utilise des classes et c'est une très bonne chose.

En revanche, ce serait pas mal de l'indenter également mais bon...

Cependant aussi, laisse tes crédits en commentaires. Je ne sais pas ce que tu tente de faire au début de ton code, mais ça, c'est pas valide et ça peut provoquer des erreurs :

Code:: .crédit {credit:absolutesunshine;}

Voilà pour un premier jet, apporte déjà ces petites corrections et on devrait être pas mal (il restera encore 2/3 optimisations mais ça devrait aller).

Quoiqu'il en soit merci de ta contribution et si tu as des questions, je suis là pour ça Wink

Coucouu ! (& oui, ça passe pas inaperçu :B) C'est vrai que là le code est beaucoup plus simple et aérer, je savais pas du tout ce qu'était un beautifier mais c'est efficace. Pour les br & center, je savais pas non plus, je ferai plus attention quand je coderai maintenant (: Donc voilà j'ai fais les modifications ; maintenant chaque catégorie à sa propre class ! Il ne reste plus de style & j'ai changé la description. Merci de ton aide et de tes explications Traitement code : Page d'accueil en trois colonne 577704309

Traitement code : Page d'accueil en trois colonne 577704309

j'espère que maintenant c'est mieux. :3

Et bien c'est déjà mieux en effet Smile

Par contre, il y a toujours tes balises <center> qui rôdent un peu partout dans le HTML, tu ne les as pas supprimé encore Wink

En ce qui concerne le CSS ce serait aussi une bonne idée de l'aérer pour avoir quelque chose dans ce goût là :

Code:: sélecteur {
propriété: valeur;
propriété: valeur;
}

Plutôt que :

Code:: sélecteur {propriété:valeur;propriété:valeur;}

Ah et tu peux laisser tes crédits dans le CSS si tu les commente, bien entendu Wink

Je les avais complètement zappé, je m'étais occupée uniquement de la première @@' mais voilà, c'est fait ! Ah oui, j'avais oublier de mettre les sauts de lignes pour le CSS, comme je fais tout sur mon forum test je les laisse en une ligne pour m'y retrouver plus rapidement -suis quelqu'un de mal organisée-, enfin bref, ça aussi c'est fait. (:

Aaaaaah ben c'est déjà pas mal.

Deux dernières remarques pour peaufiner et on est bon :

Il ne peut y avoir de balise <link /> dans le body de la page : ils doivent se placer exclusivement dans le head. Il faudrait donc retirer ça de ton HTML et rajouter une étape auparavant pour aller placer cette balise dans le template overall_header à l'endroit approprié si elle est vraiment nécessaire.
En ce qui concerne ton CSS, c'est bon pour moi à quelques détails près.

Tout d'abord, il faudrait placer la propriété générique transform en dessous des autres alternatives, car c'est elle qui doit être lue en dernier :

Code:

17 /* top sites aux formes automatiquement arrondis */
18 .tops {
19    width:60px;
20    height:60px;
21    transform: rotate(2deg) ;
22    -webkit-transform: rotate(2deg) ;
23    -moz-transform: rotate(2deg) ;
24    -o-transform: rotate(2deg) ;
25    -ms-transform: rotate(2deg) ;
26    border:2px solid #E4DED6;
...

Ensuite, tu utilise à plusieurs reprises la propriété-moz-box-shadow. Il faudrait rajouter également l'équivalent -webkit-box-shadow à chaque fois et également placer la propriété box-shadow en dernier

Voilà.
De mon côté je vais héberger ton screenshot sur CSSActif histoire qu'il soit toujours là et je ferais un dernier nettoyage/simplification du code une fois que tu aura apporté les 2 corrections ci-dessus Smile

Ouep, il est nécessaire sinon les titres risquent de ne pas s'afficher correctement ; j'ai ajouté une partie template. Le css a également été modifié & j'y ai mis les codes pour les ombres que j'avais oublié. Traitement code : Page d'accueil en trois colonne 577704309

Voilà j'espère n'avoir rien oublié. C:

J'ai fait quelques dernières corrections en raccourcissant un peu ton CSS (190 lignes au lieu de 260).

C'est suffisant pour moi, je vais donc valider ton code et le placer dans la section appropriée si tu n'y vois pas d'inconvénient. J'attends ta réponse pour savoir si tu as une remarque/question avant que je valide le code.

Merci encore Wink

Traitement code : Page d'accueil en trois colonne

La description

Le HTML

Le CSS

Traitement code : Page d'accueil en trois colonne

Sujets similaires

Sujets similaires

Partenaires Or