26/08/2010, 16:26:57
Même avis que kraygoon qui est toujours d'aussi bon conseil à ce propos 
Vu que c'est ton premier site avec cmsms (ou premier site tout court ?) il ne faut pas prendre nos remarques comme des coups de couteau dans le dos mais bien comme autant d'avis de personnes qui en ont vu passer des vertes et des pas mures et te souhaitent d'éviter les erreurs qu'on a pu faire nous même par le passé
Voilà pour enrober la suite des évènements.
Graphiquement
Code couleur sympa, mais un peu vide puisqu'à part le fond et le header il n'y a aucune subtilité dans la déco. Mais sur ce point précis il faut se rappeler que les gouts et les couleurs ...
CSS
Aïe j'ai perdu deux rétines... si tu les retrouves préviens moi... c'est une boucherie comme rarement vu. Petit exemple de ce qui est fait et pas à faire
WTF ? une largeur à 101% ? une position à gauche ? mais c'est inutile .... idem pour position : inutile dans ton cas présent. il te faut installer Firebug sous firefox pour tester toi même la bonne combinaison CSS car en général tu utilise CSS comme on utilisait les <table> il y a 5 ans : tu ne gère pas le css naturellement, tu lui force la main en plaçant toi même les zones sur la plage plutôt que de les agencer intelligemment depuis le gabarit. La correction ne sera pas longue à faire mais il faut prendre le temps de bien étudier avant de te lancer. par exemple : div blocprincipal est en dessous graphiquement des div blocgauche et blocdroite alors que dans le code il est déclaré avant. Du coup tu te fait chier à configurer en css l'inversion : perte de temps et de code.
La règle en CSS est que tu configure toujours l'encadrant avant de configurer le contenu. Attache toi donc à faire une feuille de style vierge puis de commencer à gérer le <body> puis ensuite le <header> puis l'intérieur du header et ainsi de suite.
TU N'AS PAS A POSITIONNER DE left:0 OU DE position:relative POUR CHAQUE DIV ! (qu'on se le dise) c'est le statut normal pour une div de se caller en haut à gauche de toute manière
évite les margin-left : X & margin-right : Y, si tu veux centrer une div dans une autre tu utiliseras margin-left:auto + margin-right=auto. Et si c'est pas centré c'est que c'est ta div parent qui déconne ==> corrige là. (padding ? margin ? il doit y avoir une valeur qui traine et firebug te le dira.)
voilà pour le cimetière du css
Validation W3C
dsl j'ai pas pu tester, mon taff à un réseau de merde qui empêche d'y accéder (merci nordnet \o/)
Au cas ou : vérifie ici qu'il n'y a AUCUNE erreur Xhtml et très peu pour le CSS.
quelques erreurs grave déjà relevées :
ou encore l'entête Xhtml qui est surmontée de 5 retours à la ligne : pas bon !
Notes Yslow & PageSpeed
YSlow Grade:65%
Page Speed Grade: 67%
Page load time: 4.81s
Total page size: 931KB
Total number of requests: 49
http://gtmetrix.com/reports/www.gobetween.us/o61fBgyQ
Arg, un site à 1Mo mettra cent plombes à charger pour ceux qui n'ont pas une connexion rapide (et oui le modem 56K existe toujours) : il faut réduire tout ca soit en optimisant les photos présentes, soit en réduisant leur nombre en les combinant (regarde ce qu'est un sprite css) ou active le cache des fichiers ou active la compression Gzip... ou fait tout à la fois.
Tes notes sont mauvaises, suit mon tuto si tu souhaites y remédier et rendre ton site meilleur
voilà un florilège de point à re-travailler dans l'ordre : Xhtml > CSS > Optimisation images > Notes PageSpeed & Yslow
Je te souhaites un bon courage et surtout ne lâche pas l'affaire, faire un site est une chose, bien le faire en est une autre et c'est la partie la plus dur
Vu que c'est ton premier site avec cmsms (ou premier site tout court ?) il ne faut pas prendre nos remarques comme des coups de couteau dans le dos mais bien comme autant d'avis de personnes qui en ont vu passer des vertes et des pas mures et te souhaitent d'éviter les erreurs qu'on a pu faire nous même par le passé
Voilà pour enrober la suite des évènements.
Graphiquement
Code couleur sympa, mais un peu vide puisqu'à part le fond et le header il n'y a aucune subtilité dans la déco. Mais sur ce point précis il faut se rappeler que les gouts et les couleurs ...
CSS
Aïe j'ai perdu deux rétines... si tu les retrouves préviens moi... c'est une boucherie comme rarement vu. Petit exemple de ce qui est fait et pas à faire
Code :
#fondheader {
background:url("uploads/images/stripfond.PNG") repeat-x scroll 0 0 transparent;
height:143px;
left:0;
min-width:900px;
position:absolute;
width:101%;
}WTF ? une largeur à 101% ? une position à gauche ? mais c'est inutile .... idem pour position : inutile dans ton cas présent. il te faut installer Firebug sous firefox pour tester toi même la bonne combinaison CSS car en général tu utilise CSS comme on utilisait les <table> il y a 5 ans : tu ne gère pas le css naturellement, tu lui force la main en plaçant toi même les zones sur la plage plutôt que de les agencer intelligemment depuis le gabarit. La correction ne sera pas longue à faire mais il faut prendre le temps de bien étudier avant de te lancer. par exemple : div blocprincipal est en dessous graphiquement des div blocgauche et blocdroite alors que dans le code il est déclaré avant. Du coup tu te fait chier à configurer en css l'inversion : perte de temps et de code.
La règle en CSS est que tu configure toujours l'encadrant avant de configurer le contenu. Attache toi donc à faire une feuille de style vierge puis de commencer à gérer le <body> puis ensuite le <header> puis l'intérieur du header et ainsi de suite.
TU N'AS PAS A POSITIONNER DE left:0 OU DE position:relative POUR CHAQUE DIV ! (qu'on se le dise) c'est le statut normal pour une div de se caller en haut à gauche de toute manière
évite les margin-left : X & margin-right : Y, si tu veux centrer une div dans une autre tu utiliseras margin-left:auto + margin-right=auto. Et si c'est pas centré c'est que c'est ta div parent qui déconne ==> corrige là. (padding ? margin ? il doit y avoir une valeur qui traine et firebug te le dira.)
voilà pour le cimetière du css
Validation W3C
dsl j'ai pas pu tester, mon taff à un réseau de merde qui empêche d'y accéder (merci nordnet \o/)
Au cas ou : vérifie ici qu'il n'y a AUCUNE erreur Xhtml et très peu pour le CSS.
quelques erreurs grave déjà relevées :
Citation :<a href="index.php"><img src="uploads/images/logo.png" alt="logo gobetweeen>"</a>
ou encore l'entête Xhtml qui est surmontée de 5 retours à la ligne : pas bon !
Notes Yslow & PageSpeed
YSlow Grade:65%
Page Speed Grade: 67%
Page load time: 4.81s
Total page size: 931KB
Total number of requests: 49
http://gtmetrix.com/reports/www.gobetween.us/o61fBgyQ
Arg, un site à 1Mo mettra cent plombes à charger pour ceux qui n'ont pas une connexion rapide (et oui le modem 56K existe toujours) : il faut réduire tout ca soit en optimisant les photos présentes, soit en réduisant leur nombre en les combinant (regarde ce qu'est un sprite css) ou active le cache des fichiers ou active la compression Gzip... ou fait tout à la fois.
Tes notes sont mauvaises, suit mon tuto si tu souhaites y remédier et rendre ton site meilleur
voilà un florilège de point à re-travailler dans l'ordre : Xhtml > CSS > Optimisation images > Notes PageSpeed & Yslow
Je te souhaites un bon courage et surtout ne lâche pas l'affaire, faire un site est une chose, bien le faire en est une autre et c'est la partie la plus dur