[Amateur] nouveau site sur l'Huile d'Olive d'Espagne 100% html5 et

Suite à vos conseils, j'ai abandonné Publisher 2007 et je me suis mis à apprendre la programmation en HTML et CSS, grâce à vos tutoriels très pratiques et efficaces.

J'ai donc élaboré le site:

http://www.huiledolivedespagne.fr/


Je pense que, cette fois, le code est plus propre.

Mais je sais que j'ai encore de nombreux progrès à faire et je souhaiterais que vous n'hésitiez pas à critiquer le code et le contenu et me donner des idées pour simplifer et rendre le code plus propre.

Merci d'avance

Modifié par JPOl (05 Sep 2014 - 13:10)

Il y a quelques points particuliers pour lesquels j'ai encore des problèmes et j'ai besoin d'avis éclairés:

1) menus déroulants et liens:
Mon menu principal comporte l'accueil avec un lien et 3 autres rubriques sans liens, mais avec des menus déroulants contenant des sous-menus qui ont des liens.
Je souhaitais que le texte des menus et sous-menus apparaissent en gris noir toujours et sans soulignement jamais. J'y suis arrivé.
Je souhaitais aussi, qu'au touché avec le curseur de la souris, le rectangle autour du texte apparaisse en jaune clair (ce qui fonctionne aussi) et que les textes avec liens (seulement ceux qui ont des liens) la police apparaisse en rouge (ceux sans liens restent gris noir).
Enfin, je souhaitais que, pour le menu, le fait d'avoir déjà clicqué sur un lien ne modifie pas l'apparence des textes dans les menus.
Or j'ai un petit problème: une fois qu'un menu avec lien ou un sous-menu avec lien a été clicqué, au touché avec le curseur de la souris, il n'apparait plus en rouge.
Comment règler ce problème?

J'ai aussi un problème d'apparence des liens dans sitemap.html.
Je ne comprends pas pourquoi les règles générales définies dans CSS sur les liens (directement sur a, a:hover et a:visited ne sont pas appliquées par défaut)?

Par ailleurs mon menu déroulant, utilisant des dl, dt, dd, li ul me parait un peu compliqué.
Mais je n'arrive pas au même résultat en essayant de simplifier. Connaissez-vous un code plus simple pour ce genre de menu? (qui en plus marcherait sur apple safari?)

Il y a t il une solution simple pour éviter de le réécrire à chaque page html?

2)menus déroulant et IPAD (Apple Safari)

Mes menus déroulants ne fonctionent pas sur IPAD / Apple Safari (ne se déroulent pas) et la navigation devient impossible.
Comment faire que cela puisse fonctionner?

En attendant, les seules solutions que j'ai trouvé sont:
* mettre un sitemap
* dans la page d'accueil permettre l'accès à toutes les pages via de petites icones

3) bandeau
J'utilise un bandeau (inspiré d'un tutoriel) que je fais changer tout au long du site (en mettant d'autres photos panoramiques). Je charge ces photos sur la page CSS en définissant des #bandeau1, #bandeau2,... #bandeau11 et dans les pages html je fais seulement appel à l'id qui correspond et qui diffère d'une page à l'autre.
Mais j'ai l'impression que cela ralentie le processus de chargement de l'image.
Qu'en pensez-vous?

4) em / tailles relatives ou absolues

Dans ce site, j'ai essayé au maximum de codifier en relatif, c'est à dire utilisant le plus possible em et % pour les font-size, width et height.
Mais au bout d'un moment cela ne marchait plus du tout et j'ai dû utiliser quelques px pour que cela fonctionne.

Avez-vous des suggestions pour variabiliser un peu plus mon code?

5) ordre des balises et des propriétés

Parfois, je ne sais pas trop dans quel ordre placer mes propriétés CSS pour une balise donnée.
Il y a t il une règle? (pourquoi mettre color avant float ou background avant font-size? ou l'inverse?)

Pareil pour les balises, dans le head, quand dois-je appeler la feuille CSS, avant ou après le script? avant ou après le titre? avant ou après les meta balises?
Il y a t il une règle?

Merci d'avance

La moulinette du W3C a identifié une erreur:

Error Line 32, Column 56: Element dl is missing a required instance of child element dd.
<dl><dt><a href="index.html">ACCUEIL</a></dt></dl>
Content model for element dl:
Zero or more groups each consisting of one or more dt elements followed by one or more dd elements, optionally intermixed with script-supporting elements.

je ne sais pas trop comment la résoudre.
Quelqu'un pourrait m'aider?

Les balises DL, DT, DD servent pour des listes de définitions. Remplace ces balises des des balises UL, LI

Merci, peux tu me donner un exemple plus concret de comment je peux l'adapter?
Par exemple sur un des éléments de menu?

<dl><dt>ZONES DE PRODUCTION</dt>
<dd><ul>
<li><a href="geographique.html">Répartition géographique</a></li>
<li><a href="AOP.html">Carte des variétés et AOPs</a></li>
<li><a href="poids.html">Poids des variétés</a></li>
</ul>
</dd>
</dl>

Tu fais quelque chose comme ça

<ul>
<li><a href="index.html">ACCUEIL</a></li>
<li>ZONES DE PRODUCTION<ul>
<li><a href="geographique.html">Répartition géographique</a></li>
<li><a href="AOP.html">Carte des variétés et AOPs</a></li>
<li><a href="poids.html">Poids des variétés</a></li>
</ul>
</li>
<li>VARIÉTÉS D'OLIVE
<ul>
<li><a href="picual.html">Picual</a></li>
<li><a href="cornicabra.html">Cornicabra</a></li>
<li><a href="hojiblanca.html">Hojiblanca</a></li>
<li><a href="picudo.html">Picudo</a></li>
<li><a href="arbequina.html">Arbequina</a></li>
<li><a href="empeltre.html">Empeltre</a></li>
</ul>
</li>
<li>RECETTES
<ul>
<li><a href="cuisineethuile.html">Une huile pour chaque plat</a></li>
<li><a href="papillotes.html">Papillotes de Loup</a></li>
<li><a href="filetmignon.html">Filet Mignon Ibérique</a></li>
<li><a href="glacehuiledolive.html">Glace à l'huile d'olive</a></li>
</ul>
</li>
</ul>

merci
je vois l'idée
mais, après, comme tu le gères en CSS?

dans la pratique cela marche avec les dl,dt,dd
même si w3c n'est pas content et que c'est compliqué de gérer les règles sur les liens après

Tu peux utiliser une classe au niveau de tes liens du menu.

merci, mais c'est le problème

j'ai essayé de les adapter, mais cela ne fonctionne pas

voici mes propriétés CSS:
/* MENU */
#menu ul{text-decoration: none; list-style: none; margin: 0px auto; padding: 0px; width: 57em; height: 40px; text-align: center; text-transform: none; font-family: "Trebuchet MS", Arial; font-weight: bold; display: block; position: relative; z-index: 7;}
#menu li {background: white; margin: 0px; padding: 0px; float: left; display: block;}
#menu li a {text-decoration: none; margin: 0px; padding: 0px; text-align: center; color: rgb(24, 24, 24); font-weight: bold; text-decoration: none;}
#menu li:hover {text-decoration: none; background: rgb(255, 255, 196); color: rgb(24, 24, 24);}
#menu li a:hover {text-decoration: none; background: rgb(255, 255, 196); color: rgb(255, 15, 15);}
#menu li:visited,#menu li a:visited {text-decoration: none; color: rgb(24, 24, 24);}
/* sous-menus */
#menu li ul li { background: rgb(255, 255, 196); margin: 0px; padding: 0px; display: block; z-index: 7;font-weight: normal;}
#menu li ul li {background: white; margin: 0px; padding: 0px; display: block; z-index: 7;}
#menu li ul li a {text-decoration: none; width: 14em; height: 30px; color: rgb(24, 24, 24); line-height: 30px; display: block; z-index: 7;}
#menu li ul li a:hover {text-decoration: none; background: rgb(255, 255, 196); color: rgb(255, 15, 15); z-index: 7;}
#menu li ul li a:visited {text-decoration: none; color: rgb(24, 24, 24); z-index: 7;}
#menu li ul li {display: none;}
#menu li:hover #menu li ul li { display: block;}

pour la couleur des liens dans les menus, la rêgle ligne 54 de ton css prend le dessus :

dd ul li a:visited {
text-decoration: none;
color: rgb(24, 24, 24);
z-index: 7;
}

donc une fois visité le lien redevient noir, deux solutions
1 - enlever cette rêgle

2 - modifier la rêgle 'hover'
dd ul li a:hover {
text-decoration: none;
background: rgb(255, 255, 196);
color: rgb(255, 15, 15);
z-index: 7;
}

en
dd ul li a:hover {
text-decoration: none;
background: rgb(255, 255, 196);
color: rgb(255, 15, 15) !important;
z-index: 7;
}

problème d'apparence des liens dans sitemap.html. :

les rêgles css pour les liens de tes pages principales ne s'appliquent pas aux liens du sitemap, tout simplement car tu as indiqué le chemin :

dd ul li a

, mais dans le sitemap les liens ne sont pas dans des balises dd, il faudrait reprendre tout ton css et remplacer tous les

dd ul li a

par

ul li a

problème du bandeau :

non le chargement n'est pas ralenti, mais différé, comme l'image est chargée après analyse du css, c'est quasiment le dernier fichier chargé, donc çà se voit !!

Merci Zebrou:

*Concernant le menu et comment faire que le texte se mettre en rouge entouré de jaune au passage du curseur et noir entourré de blanc sinon, et que cela ne change pas qu'il ait été clicqué, sélectionné déjà une ou plusieurs foirs:

solution1: le texte continue de se mettre en rouge entouré de jaune au passage du curseur
par contre, s'il a été cliqué une fois, il se transforme en vert et ne retrouve pas le gris noir originel

solution 2: le texte reste gris noir s'il a été cliqué 1 ou plusieurs fois, par contre
1) le texte se met en bleu (au lieu du rouge) entouré de jaune au passage du curseur
2) une fois qu'il a été sélectionné une fois, il ne change plus de couleur au passage de la souris

*concernant le sitemap: si je remplace mes dd ul li a par ul li a, je plante mon menu déroulant
Je pense qu'il faut que je rajoute une classe sitemap dans laquelle je redéfinisse les ul li a. J'essayais de trouver quelque chose pour l'éviter, mais je ne crois pas qu'il y ait d'autre solution?

*Concernant le bandeau, ok j'ai compris, logique

il reste des rêgles

a:visited

un peu partout dans le fichier css, ce sont ces rêgles là qui prennent le dessus, il faut les supprimer ou gérer les priorités.

voici une copie du site avec un CSS optimisé (pour la partie navigation)

http://boobiz.fr/huiledolive/sitemap.html

merci
je sais comment accèder au fichier html

mais, comment puis-je accèder au fichier CSS?

et bien tout simplement en allant chercher le fichier à son adresse, comme le fait ton navigateur :
http://boobiz.fr/huiledolive/style.css

Hello,

Suite à la remarque de Zebrou, je reprends le début de ton premier post sur ce fil :

JPOI a écrit :
Suite à vos conseils, j'ai abandonné Publisher 2007 et je me suis mis à apprendre la programmation en HTML et CSS, grâce à vos tutoriels très pratiques et efficaces.

Si tu ne peux accéder à ton fichier CSS, quel logiciel d'édition de code utilise-tu donc ?

merci Zebrou

A propos de la question de audrasjb
j'utilise Notepad++
mais je ne savais pas comment accèder au CSS sur un site qui n'est pas le miens (mais celui de Zebrou:boobiz.fr)
maintenant, je le sais, c'est une information intéressante qui me permettra d'accèder aux CSS d'autres sites et de comprendre comment ils fonctionnent
Partagé sur le forum, cela servira aussi à d'autres qui le suivent.

Je vois Zebrou:
tu as regroupé les propriétés CSS qui traitent des a et hover a dans la partie MENU et tu as simplifié les lignes de CSS du menu déroulant
rien d'autres?

ça marche impecable
je vais étudier en détail