Bonjour,
Voici quelques remarques, un peu dans le désordre, pardon ; je le dis comme je le trouve.
POUR TOUT CE QUI EST BALISAGE/CSS:
Dans ton fichier CSS :
.total {
margin-top : -15px;
position: relative;
}
Tu as mis ça pour remonter ton div général (total) qui contient la page : pourquoi ? Parce que sans ça, il n'est pas aligné en haut de l'écran.
Re-pourquoi ? Parce que les navigateurs ont des marges par défaut appliquées sur body : pour éviter ça :
body{
margin: 0;
paddig: 0;
}
Concernant total : tu l'utilise comme classe (.total - <div class='total'>), alors qu'il ne revient qu'une fois par page : tu devrais t'en servir avec une ID : #total, <div id="total">.
(Remarque : le texte ALT de ton logo : l acceuil (petite faute au passage) : tu n'as pas mis d'apostrophe car elle poserait problème : tu devrais utiliser des guillemets pour le balisage à la place des apostrophes :
<a href='index.html'><img src='logo.jpg' class='logo' alt='retournez a la page d acceuil'/></a>
->
<a href="index.html"><img src="logo.jpg" class="logo" alt="retournez a la page d'accueil" /></a>
Comme l'a dit AymericJ :
Les navigateurs respectueux des standards de recommandations du W3C n'affichent pas le texte alternatif des élements ALT associés aux images, car ce texte doit servir à fournir un contenu de remplacement si on désactive les images.
On associe donc, un "ALT" pour le cas des images désactivées, et un "title" pour avoir une infobulle si besoin :
<img src='images/articles/cassoulet.jpg' class='imga' alt='un cassoulet' />
->
<img src="images/articles/cassoulet.jpg" class="imga" alt="Un cassoulet" title="Un cassoulet" />
Avec ceci :
Firefox : affiches une infobulle par le "title". (Si tu mets title="", firefox n'affiche rien au survol.)
IE : ne gère pas le title, il va lire l'ALT de l'image et afficher une infobulle avec.
Pour alléger un fichier CSS :
On peut imbriquer, regrouper certains éléments :
border-style : solid;
border-top-width : 0;
border-bottom-width : 0;
border-left-width : 4px;
border-right-width : 4px;
border-color : #a1b28c;
=
border-left: 4px solid #a1b28c;
border-right: 4px solid #a1b28c;
(Ici, comme les bordures top et bottom sont nulles, tu n'as pas besoin de les préciser.)
Je vais faire de la pub, mais bon : on trouve un résumé pratique de tout ça dans le memento CSS de Raphaël
Je viens de me rendre compte que beaucoup de tes éléments CSS manquent d'un ";" sur le dernier élément - sauf erreur.
a écrit :
-les boites de login sont déstabilisantes car on ne les reconnait pas au premier coup d'oeil.
Il n'a pas tort. Ce n'est pas toujours une bonne chose, mais ici, il faudrait mettre en relief cette "boîte" : avec un cadre léger, un fond, une image, etc.
(Si cette boîte n'est destinée qu'à l'administration du site, pas besoin de la laisser en haut... quoi que, je vois "s'inscrire" dans "l'association", donc, elle est destinée à tout le monde ?)
Tu as utilisé des titres de niveau 3 pour les titres de champs (login, pseudo), un simple <p> peut suffir ici. De même que le bouton d'envoi n'a rien à faire entre <h3> et </h3>
<h2>Login</h2>
<h3>Nom : <input type="text" name="pseudo" /></h3>
<h3>Mot de passe : <input type=[#red]"text"[/#] name="pwd" /></h3>
<h3><input type='submit' value="Connecter" class='inbouton' />/h3>
->
<h3>Login</h3>
<p>Nom : <input type="text" name="pseudo" /><br />
Mot de passe : <input type=[#orange]"password"[/#] name="pwd" /></p>
<p><input type='submit' value="Connecter" class='inbouton' /></p>
Partie en rouge : si tu utilise un type "text" pour un mot de passe, tout le monde peut le lire "par dessus l'épaule" de la personne qui le tape, car il s'affiche en clair à l'écran : utilise plutôt
type="password" (qui affichera des étoiles).
(Pas la peine d'aller si loin pour le moment, mais si tu veux prendre en compte l'accessibilité : tu peux utiliser un élément "label" : si on clique sur le titre d'un champ, ça envoi le curseur directement dans la case "input" associée. Pour ça, on attribue un "id" identique au titre du champ (avec
label for="" et à la balise "input" du champ.
<h3>Login</h3>
<p>[#orange]<label for="nick">[/#]Nom : <input [#orange]id="nick"[/#] type="text" name="pseudo" />[#orange]</label>[/#]<br />
[#orange]<label for="pass">[/#]Mot de passe : <input [#orange]id="pass"[/#] type="password" name="pwd" />[#orange]</label>[/#]</p>
<p><input type='submit' value="Connecter" class='inbouton' /></p>
Dans le DIV1 :
<a href= (...) title='retournez a la page d acceuil'>[#red]/>[/#]</a>
Une petite coquille, ceci est en trop.
POUR LE RESTE :
Les graphismes sont quelque chose de subjectif, mais il y a des petits trucs utiles, pour faciliter la clarté ou la lisibilité d'un document.
Dans l'ensemble, je trouve la page très claire (peut-être un peu trop aérée). Les "boîtes" sondage et "login" sont un peu grandes je trouve, et ne ressortent pas assez : je réduirais un peu la taille de texte et j'utiliserais un léger cadre d'1 px ; "solid" ou "dashed", dans une couleur claire.
Les textes sont justifiés : l'espacement entre les mots est important du coup. C'est particulièrement visible sur le dernier paragraphe.
J'ai l'impression que les couleurs choisies ne sont pas en accord avec l'objet du site ; le tout manque un peu de "punch".
Tu devrais mettre un S à "article" dans le menu, puisque tu en donnes plusieurs.
Si on désactive javascript, ton menu ne fonctionne plus.
Concernant le sondage, je ne sais pas si c'est une forme d'humour, mais avec que des possibilités "positives", peu de gens iront répondre : ils aiment avoir le choix, même s'ils vont dire que ton site est superbe.
Je reviens sur le problème du centrage de la page : je n'ai pas trouvé ce qui cloche pour le moment (car ce que tu as mis me semble bon) :
-> text-align dans le body pour les vieux IE
-> margin left et right en auto pour "total" (je n'ai pas fait de test en utilisant "total" comme ID et non comme classe)
On peut tester autre chose, à la place des marges auto :
.total {
position: absolute;
left: 50%;
margin-left: -xxxpx
xxxpx = moitié de la largeur du conteneur total. Normalement, ça permet de centrer quelque chose sur la plupart des navigateurs.
Je trouve que tout ça part bien déjà, bon courage pour la suite !
Modifié par 
(08 Apr 2006 - 16:00)
Rajoute-ça au début des css :
)