Bonjour

Je viens soumettre a vos critiques (constructives ?) ce site :
www.legrm.com

Au niveau de code, normalement c'est valide, mais je n'ai verifié le rendu que sur IE6 SP2 et Firefox 1.5.
Les images et photos (sauf galerie) sont provisoires (et pas optimisées d'ailleurs!)

Merci pour vos différents commentaires, avis, critiques, etc...

_____________

PS: voici l'adresse de l'ancienne version (avec frames et tableaux) Smiley eek
Modifié par JRTprod (16 Jun 2006 - 14:38)
Je n'ai pas beaucoup de temps, donc cela sera rapide pour moi:

Je comprend pas ton code au niveau de ton menu.
<ul id="accueil">
	<li><a href="http://www.legrm.com/" onfocus="this.blur()" title="Acceuil"> </a></li>
</ul>
<ul id="acces">
	<li><a href="acces.html" onfocus="this.blur()" title="Accès"> </a></li>
</ul>
<ul id="galerie">
	<li><a href="http://www.legrm.com/galerie/" onfocus="this.blur()" title="Galerie"> </a></li>
</ul>
<ul id="contact">
	<li><a href="contact.html" onfocus="this.blur()" title="Contact"> </a></li>
</ul>
<ul id="village">
	<li><a href="village.html" onfocus="this.blur()" title="Le village"> </a></li>
</ul>
<ul id="liens">
	<li><a href="liens.html" onfocus="this.blur()" title="Liens"> </a></li>
</ul>


Je pense que cela serait mieux comme ça:


<ul>
	<li id="accueil"><a href="http://www.legrm.com/" onfocus="this.blur()" title="Acceuil"> </a></li>
	<li  id="acces"><a href="acces.html" onfocus="this.blur()" title="Accès"> </a></li>
	<li id="galerie"><a href="http://www.legrm.com/galerie/" onfocus="this.blur()" title="Galerie"> </a></li>
       <li id="contact"><a href="contact.html" onfocus="this.blur()" title="Contact"> </a></li>
	<li id="village"><a href="village.html" onfocus="this.blur()" title="Le village"> </a></li>
	<li id="liens"><a href="liens.html" onfocus="this.blur()" title="Liens"> </a></li>
</ul>
Smiley sweatdrop Je me suis inspiré d'un tutotriel de ce site.
Je l'ai modifié pour que dans chaque bloc ce soit un image différente.

J'ai essayé de simplifié le code html du menu

<ul id="accueil">
  <li><a href="http://www.legrm.com/" onfocus="this.blur()" title="Acceuil">&nbsp;</a></li>
</ul>
<ul id="acces">
  <li><a href="acces.html" onfocus="this.blur()" title="Accès">&nbsp;</a></li>
</ul>
<ul id="galerie">
  <li><a href="http://www.legrm.com/galerie/" onfocus="this.blur()" title="Galerie">&nbsp;</a></li>
</ul>
<ul id="contact">
  <li><a href="contact.html" onfocus="this.blur()" title="Contact">&nbsp;</a></li>
</ul>
<ul id="village">
  <li><a href="village.html" onfocus="this.blur()" title="Le village">&nbsp;</a></li>
</ul>
<ul id="liens">
  <li><a href="liens.html" onfocus="this.blur()" title="Liens">&nbsp;</a></li>
</ul>


et le CSS correspondant

ul {margin:0 0 10px 0; padding:0; list-style-type:none;}

li {margin:0 0 5px 0; padding:0;}
li a {display: block;  width: 130px; line-height: 43px; text-decoration: none; border:0;}
li a:hover {text-decoration: none; border:0;}


ul#accueil li a {background:url(images/boutons/accueil.gif) no-repeat 0 0;}
ul#accueil li a:hover {background:url(images/boutons/accueil.gif) no-repeat 0 -43px;}

ul#acces li a {background: url(images/boutons/acces.gif) no-repeat 0 0;}
ul#acces li a:hover {background: url(images/boutons/acces.gif) no-repeat 0 -43px;}

ul#galerie li a {background: url(images/boutons/galerie.gif) no-repeat 0 0;}
ul#galerie li a:hover {background: url(images/boutons/galerie.gif) no-repeat 0 -43px;}

ul#contact li a {background: url(images/boutons/contact.gif) no-repeat 0 0;}
ul#contact li a:hover {background: url(images/boutons/contact.gif) no-repeat 0 -43px;}

ul#village li a {background: url(images/boutons/village.gif) no-repeat 0 0;}
ul#village li a:hover {background: url(images/boutons/village.gif) no-repeat 0 -43px;}

ul#liens li a {background: url(images/boutons/liens.gif) no-repeat 0 0;}
ul#liens li a:hover {background: url(images/boutons/liens.gif) no-repeat 0 -43px;}


Il y a surement possibilité de faire plus simple mais je débute Smiley confused
Modifié par JRTprod (15 Jun 2006 - 23:50)
Bonsoir,

A première vue, je trouve que ca fait un peu vieillot, sur les couleurs, sur la typo, et aussi sur la mise en forme.

Je trouve que ca manque un peu d'une mise en page plus stricte, qui irait dans un sens de modernisme.
Avec ca, quelques couleurs un peu plus accueillante rendrait le site un peu plus attractif.
Le fond du site est un peu verdatre facon caca d'oie, auquel tu ajoute un fond blanc cassé très neutre, et tu finalise le tout avec un marron qui n'est pas particulièrement heureux.

Je trouve que de manière général la typo est trop grosse, menu y compris.

J'aime bien les photos que tu as mis en fond de plusieurs pages, mais soit on les voit trop, soit on les vois pas assez.
Quand je dis qu'on les vois trop, c'est surtout sur la page d'accès par exemple, ou le plan "autoroutier" est un peu noyé dessus. Sur la page lien, ils sont à cheval sur la photo. et il faut comprendre que la partie marron à gauche de la photo décrit le lien à droite de la photo... (quand je dis qu'il manque un peu de structure).
Quand je dis qu'on les vois pas assez, c'est que je pense qu'elle mériteraient d'être dans une gallerie annexe pour en profiter pleinement.

Je reproche à ton site de ne jamais me dire ou je me situe.. En effet, pas de lien actif, pas de reprise du titre du lien sur la page active... Bref y'a peu de pages, mais en faisant des tab entre ce message et le site, je sais jamais ou je suis.

Désolé d'être un peu négatif, mais je pense qu'il y'a encore à retravailler.

EDIT:

<ul id="accueil">
	<li><a href="http://www.legrm.com/" onfocus="this.blur()" title="Acceuil">&nbsp;</a></li>
</ul>
<ul id="acces">
	<li><a href="acces.html" onfocus="this.blur()" title="Accès">&nbsp;</a></li>
</ul>

<ul id="galerie">
	<li><a href="http://www.legrm.com/galerie/" onfocus="this.blur()" title="Galerie">&nbsp;</a></li>
</ul>
<ul id="contact">
	<li><a href="contact.html" onfocus="this.blur()" title="Contact">&nbsp;</a></li>
</ul>
<ul id="village">
	<li><a href="village.html" onfocus="this.blur()" title="Le village">&nbsp;</a></li>
</ul>
<ul id="liens">
	<li><a href="liens.html" onfocus="this.blur()" title="Liens">&nbsp;</a></li>
</ul>

Il ne faut pas refermer et rouvrir la balise <ul> entre chaque éléments de la liste. Tu ouvre une liste, tu ouvre un élément et le referme, recommence cette étape autant de fois que tu as de menus, et ensuite seulement tu referme la liste.


<ul><li>...</li>
      <li>...</li>
      <li>...</li>
      <li>...</li>
      ...
</ul>

Modifié par Mikachu (15 Jun 2006 - 23:55)
a écrit :

Il y a surement possibilité de faire plus simple mais je débute

Salut,
Tu peux simplifier pas mal ce code CSS en évitant de redéfinir à chaque fois dans li a:hover ce qui est déjà dans li a

Concrètement, puisque dans le second il n'y a que la position de l'image de fond qui change, plutôt que d'utiliser la propriété raccourcie "background" et répéter tout inutilement, autant utiliser "background-position".
Je sais bien que ce n'est pas comme ça dans le tuto, mais bon Smiley cligne
Par exemple
ul#accueil li a {background:url(images/boutons/accueil.gif) no-repeat 0 0;}

ul#accueil li a:hover {background-position: 0 -43px;}

(une fois la correction HTML faite, ça deviendra par exemple li#accueil a)

Et puisque que la position est à chaque fois la même pour tous les a:hover, encore une répétition inutile. Il suffit d'indiquer une fois pour toute en visant de manière plus générale :
#sommaire li a:hover {background-position: 0 -43px;}

Idem pour A, nul besoin de repriser à chaque fois "no-repeat 0 0" (surtout que 0 0 est par défaut...)

Donc la seule chose à préciser à chaque fois, c'est simplement quelle image correspond au lien (cette même image sera automatiquement la même pour a:hover)


#accueil a {background-image: url(images/boutons/accueil.gif)}
#acces a {background-image: url(images/boutons/acces.gif)}

Modifié par Alan (16 Jun 2006 - 07:29)
Salut,

Ton code comporte des erreurs (53 erreurs au validateur W3C).
La terminaison de tes balises meta doit être /> et non pas >.

Petit problème d'accessibilité : quand on désactive les css ou les images, il n'y a plus de menu.

Sinon question graphisme je ne déteste pas. Dans la page ''le village'', je trouve dommage que la photo soit si pâle et de plus collé au texte.

Bon courage pour tes corrections.
Le coté vieillot est souhaité, c'est un site d'antiquaire.
Pour la naviguation personellement je la préfére horizontale dans l'entete, mais le "proprio" voulait garder les boutons verticaux

a écrit :
Il ne faut pas refermer et rouvrir la balise <ul> entre chaque éléments de la liste. Tu ouvre une liste, tu ouvre un élément et le referme, recommence cette étape autant de fois que tu as de menus, et ensuite seulement tu referme la liste.
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
 ...
</ul>


Cela ne fonctionne pas dans mon cas, j'ai un background different pour chaque <ul>

Merci de m'avoir signalé l'erreure dans les balises META. Je m'etait trompé de fichier pour mon copié/collé.
Modifs effectuées et :"This Page Is Valid XHTML 1.0 Transitional!"
Modifié par JRTprod (16 Jun 2006 - 13:30)
Salut,

J'avais bien compris qu'il s'agit d'un antiquaire, mais il y'a vieillot et vieillot... Il y'a le site qui se veut dans une certaines tradition en étant malgré tout adapté à son temps, et celui qui reproduit le schéma stéréotypé du type:
antiquaire = typo de caractère avec empatements et arabesques, couleurs pales et ternes pour donner un cachet "vieilli par le temps", graphismes types parchemin, vieux bois, ferrures etc., photos en noir et blanc ou sepia..."
Personnellement, je me dis que de l'antiquité jusqu'au moyen-age, les hommes ont vécu dans le faste et la couleur, la richesse des motifs et des graphismes : les motifs en dentelles, les broderies et brocarts sur les tissus, les tapisseries, les enluminures même dans les ouvrages littéraires, les arabesques dans le mobilier, les mosaïques etc.
Il n'y a qu'à partir du XVIIIe siècle que les tendances ont commencé à changer, avec des couleurs plus ternes et des motifs plus discrets voire inexistant, le tout allant avec l'industrialisation naissante.
S'il te faut des exemples de ce que je dis, parcours des livres d'histoires, je pense que tu sera surpris de voir à quel point ces époques étaient bien plus riches visuellement que maintenant.
Après à toi de voir si tu veux conforter ce stéréotype "ancien=terne et triste" auprès de ton client, ou au contraire essayer de faire avancer les choses...
Personnellement un site comme ca me donne pas sincèrement envie d'y revenir.

---

Pour ton histoire de background derrière ton menu, il serait plus simple d'attribuer le background à chaque élément <a> contenu dans les <li> plutôt que de démultiplier les balises <ul>.
De plus, vu que ce background est le même pour chaque menu, ca te permettra même de ne le spécifier qu'une fois pour tes liens, au lieu de devoir le faire à chaque lien, et de mettre le nom de ce lien dans la css au lieu de le mettre dans l'image...

Je pense que sémantiquement (et les plus experts que moi pourront confirmer), il n'est pas logique d'utiliser plusieurs listes contenant un seul élément dans le but d'en faire une seule au final...
Pour le menu, je suis arrivé à cette simplification

Code html :
<div id="sommaire">
<ul>
 <li><a href="http://www.legrm.com/" class="bgaccueil" onfocus="this.blur()" title="Acceuil">&nbsp;</a></li>
 <li><a href="acces.html" onfocus="this.blur()" class="bgacces" title="Accès">&nbsp;</a></li>
 <li><a href="http://www.legrm.com/galerie/" class="bggalerie" onfocus="this.blur()" title="Galerie">&nbsp;</a></li>
 <li><a href="contact.html" class="bgcontact" onfocus="this.blur()" title="Contact">&nbsp;</a></li>
 <li><a href="village.html" class="bgvillage" onfocus="this.blur()" title="Le village">&nbsp;</a></li>
 <li><a href="liens.html" class="bgliens" onfocus="this.blur()" title="Liens">&nbsp;</a></li>
</ul>
</div>


et pour le CSS
#sommaire {position: absolute; left:10px; margin:0; padding:0; width:140px;}
ul {margin:0 0 10px 0; padding:0; list-style-type:none;}
li {margin:0 0 5px 0; padding:0;}
li a {display: block;  width: 130px; line-height: 43px; text-decoration: none; border:0; background: no-repeat 0 0;}
li a:hover {text-decoration: none; background-position: 0 -43px;}
.bgaccueil {background-image:url(images/boutons/accueil.gif);}
.bgacces {background-image:url(images/boutons/acces.gif);}
.bggalerie {background-image:url(images/boutons/galerie.gif);}
.bgcontact {background-image:url(images/boutons/contact.gif);}
.bgvillage {background-image:url(images/boutons/village.gif);}
.bgliens {background-image:url(images/boutons/liens.gif);}


Par contre avec cette solution, l'image d'arriere plan ne s'affiche pas dans les fichiers php


Pour ce qui est des couleurs et de la disposition c'est "le client" qui a choisi... Il trouvé que c'était sobre et classe, un peut anglais...
L'apparence générale du site, je suis d'accord avec toi (Mikachu), est plus celle de ce qui ce faisait il y a 5 ans.
Modifié par JRTprod (16 Jun 2006 - 15:17)
Ton menu n'étant présent qu'une seule fois par page, autant utiliser une id au lieu d'une class.

Dommage pour ton client concernant l'aspect de son site... Et dommage pour les internautes qui n'auront pas plus envie que ca de revenir sur le site. Et redommage pour ton client qui attirera moins l'attention sur son commerce que ce qu'il pourrait le faire...
En fait tu as repris exactement le même design enfin graphisme que l'ancien site, je trouve ça dommage, surtout qu'il n'est pas génial Smiley sweatdrop euh limite macabre Smiley lol , non sincerement, tu pourrais essayer de faire un graphisme plus chaleureux, plus moderne, tout en restant un style "retro" à l'ancienne, je te jure que c'est possible Smiley ravi

Je sais pas, regarde louis la brocante sur la 3 et inspire toi Smiley biggol

Bon courage

Smiley cligne
J'ai repéré une faute d'ortographe, dans la galerie de photos :

"mobilier d'apoint" il me semble qu'on écrit "mobilier d'appoint".

Salutations