Traitement code : Page d'accueil en trois colonne Bouton_activeTraitement code : Page d'accueil en trois colonne Bouton_hoverTraitement code : Page d'accueil en trois colonne Fb-hoverTraitement code : Page d'accueil en trois colonne Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Structure de Qui Est En Ligne (1)
Traitement code : Page d'accueil en trois colonne EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Traitement code : Page d'accueil en trois colonne EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Traitement code : Page d'accueil en trois colonne EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Traitement code : Page d'accueil en trois colonne EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Traitement code : Page d'accueil en trois colonne EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
Traitement code : Page d'accueil en trois colonne EmptyMar 07 Fév 2023, 08:40 par Oxtran

» Mettre votre © Copyright dans le footer de votre forum
Traitement code : Page d'accueil en trois colonne EmptyMar 07 Fév 2023, 07:35 par Oxtran

» Barre(s) Hitskinienne
Traitement code : Page d'accueil en trois colonne EmptyVen 03 Fév 2023, 17:22 par Krager

Le Deal du moment : -50%
-50% Baskets Nike Air Huarache
Voir le deal
64.99 €

Partagez
 

Traitement code : Page d'accueil en trois colonne

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Traitement code : Page d'accueil en trois colonne Empty
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
MessageSujet: Re: Traitement code : Page d'accueil en trois colonne   Traitement code : Page d'accueil en trois colonne EmptyMar 04 Déc 2012, 05:46
Revenir en haut Aller en bas
http://dreamymidnight.tumblr.com/
ABSOLUTE.SUNSHINE
ABSOLUTE.SUNSHINE
{ Membre }
{ Membre }

Féminin Messages : 8



Traitement code : Page d'accueil en trois colonne Empty
    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 j'espère que maintenant c'est mieux. :3
MessageSujet: Re: Traitement code : Page d'accueil en trois colonne   Traitement code : Page d'accueil en trois colonne EmptyMar 04 Déc 2012, 11:23
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Traitement code : Page d'accueil en trois colonne Empty
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
MessageSujet: Re: Traitement code : Page d'accueil en trois colonne   Traitement code : Page d'accueil en trois colonne EmptyMar 04 Déc 2012, 12:06
Revenir en haut Aller en bas
http://dreamymidnight.tumblr.com/
ABSOLUTE.SUNSHINE
ABSOLUTE.SUNSHINE
{ Membre }
{ Membre }

Féminin Messages : 8



Traitement code : Page d'accueil en trois colonne Empty
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. (:
MessageSujet: Re: Traitement code : Page d'accueil en trois colonne   Traitement code : Page d'accueil en trois colonne EmptyMer 05 Déc 2012, 14:29
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Traitement code : Page d'accueil en trois colonne Empty
Aaaaaah ben c'est déjà pas mal.

Deux dernières remarques pour peaufiner et on est bon :
  1. 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.

  2. 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 Wink



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
MessageSujet: Re: Traitement code : Page d'accueil en trois colonne   Traitement code : Page d'accueil en trois colonne EmptyJeu 06 Déc 2012, 05:22
Revenir en haut Aller en bas
http://dreamymidnight.tumblr.com/
ABSOLUTE.SUNSHINE
ABSOLUTE.SUNSHINE
{ Membre }
{ Membre }

Féminin Messages : 8



Traitement code : Page d'accueil en trois colonne Empty
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:
MessageSujet: Re: Traitement code : Page d'accueil en trois colonne   Traitement code : Page d'accueil en trois colonne EmptyJeu 06 Déc 2012, 10:13
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Traitement code : Page d'accueil en trois colonne Empty
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
MessageSujet: Re: Traitement code : Page d'accueil en trois colonne   Traitement code : Page d'accueil en trois colonne EmptyJeu 06 Déc 2012, 10:46
Revenir en haut Aller en bas
http://dreamymidnight.tumblr.com/
ABSOLUTE.SUNSHINE
ABSOLUTE.SUNSHINE
{ Membre }
{ Membre }

Féminin Messages : 8



Traitement code : Page d'accueil en trois colonne Empty
    Rien à ajouter c'est parfait comme ça ! Merci de ton aide & de la validation Traitement code : Page d'accueil en trois colonne 577704309
MessageSujet: Traitement code : Page d'accueil en trois colonne   Traitement code : Page d'accueil en trois colonne EmptySam 08 Déc 2012, 10:14
Revenir en haut Aller en bas
Contenu sponsorisé




Traitement code : Page d'accueil en trois colonne Empty
MessageSujet: Re: Traitement code : Page d'accueil en trois colonne   Traitement code : Page d'accueil en trois colonne Empty
Revenir en haut Aller en bas
 

Traitement code : Page d'accueil en trois colonne

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» onglet à droite du contenue (page daccueil)
» Page d'accueil en trois colonnes
» code pour fond de page
» Code pour une Page D'accueil
» Problème de code de page d'accueil

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Corbeille :: Archives de CSSActif :: Tutoriels & Codes-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit