But Article

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec blandit nunc id est. Nam mauris nisi, cursus et, viverra sed, imperdiet non, massa. Phasellus non justo. Suspendisse et neque eget elit sollicitudin iaculis. Integer dignissim. Praesent ac velit. Aenean neque. Quisque sit amet magna. Aliquam et lacus ac risus vestibulum semper. Nullam non mauris. Vestibulum auctor dolor sit amet dui. Duis rhoncus justo vel sem. Suspendisse orci arcu, dignissim id, volutpat non, ultricies quis, orci. Nulla volutpat orci ut mi. Nulla facilisi. Donec ullamcorper vulputate diam. Vestibulum quis mi. Suspendisse ligula diam, eleifend quis, nonummy eu, sodales non, nunc. Pellentesque adipiscing lectus ac turpis. Donec mollis, odio at cursus venenatis, purus purus volutpat risus, et tincidunt urna velit nec leo.

Titre interne article h3

Charte graphique

 808080 // Gris lien pied de page

 aaa // Liens modules

 bbb

 ccc // Texte module et pied de page

 ddd // bordure gauche et haute blog

 eee // fond lien:hover test01

 fff

 666 // Couleur texte général

 f2f2f2 // fond de blog (en remplacement du pattern)

 c33 // rouge PêUR

 446D87 // bleu PêUR

Test encart code CSS:

Test code encart HTML, avec ascenceur: 

Texte avec puce:

• volutpat orci ut mi. Nulla facilisi. Donec ullamcorper vulputate diam. Vestibulum quis mi. Suspendisse ligu nonummy eu, sodales non, nunc. Pellentesque adipiscing lectus ac turpis. Donec mollis, odio at cursus venenatis, purus purus volutpat risus, et tincidunt urna velit nec leo. lesquelles doivent pointer ces noms
• volutpat orci mollis, odio at cursus venenatis, purus purus volutpat risus, et tincidunt urna velit nec leo.
• volutpat orci ut mi. Nulla facilisi. Donec ullamcorper vulputate diam. Vestibulum quis mi. Suspendisse ligula diam, eleifend quis, nonummy eu, sodales non, nunc. Pellentesque adipiscing lectu.
• vulputate diam. Vestibulum quis mi. Suspendisse ligula diam, eleifend quis, nonummy eu, sodales non, nunc. Pellentesque adipiscing lectus ac turpis. Donec mollis, odio at cursus venenatis, purus purus volutpat risus, et tincidunt urna velit nec leo.

Ci-dessous le code CSS à insérer tout en bas de votre CSS (j'ai essayé de mettre des noms parlants aux classes afin de comprendre sur quelles parties elles influent :

Voici quelques explications pour comprendres le CSS ci-dessus:

• .menuIE : affichage du menu pour Internet Explorer, caché pour Firefox grâce à display:none !important; En effet le !important est interprété par Firefox et force ce dernier à utiliser cette propriété alors qu' Internet explorer ne l'interprète pas et prend la propriété suivante.
• a.boutonIE : style du bouton primaire pour Internet Explorer
• a.boutonIE:hover : style du bouton primaire au passage de la souris pour Internet Explorer
• a.boutonIE:hover table : style du tableau (boutons secondaires ou liste déroulante)  au passage de la souris pour Internet Explorer
• .boutonFF : style du bouton primaire pour Firefox - Affichage pour Firefox, caché pour Internet Explorer  grâce à display:block !important; En effet le !important est interprété par Firefox et force ce dernier à utiliser cette propriété alors que Internet explorer ne l'interprète pas et prend la propriété suivante.
• .boutonFF:hover : style du bouton primaire au passage de la souris pour Firefox
• a.SousMenu : affichage du sous-menu (liste déroulante ou boutons secondaires) aussi bien pour Firefox que pour Internet Explorer.

Ci-dessous le code HTML à insérer dans votre entête en mode source:

Voici quelques explications pour comprendre le code HTML ci-dessus:

• Il y a 2 pavés, le premier est le code HTML pour l'affichage sous Internet Explorer, le deuxième est le code HTML pour l'affichage sous Firefox. Cela implique que vous devez saisir 2 fois les noms des menus primaires, 2 fois les noms des menus secondaires et 2 fois les URLs vers lesquelles doivent pointer ces noms
• Vous devez remplacer #nogo par l'URL du lien que vous souhaitez.
• Seul sous Internet Explorer le menu primaire peut-être un lien. Si vous ne voulez pas qu'il pointe sur une adresse particulière, laisser #nogo

Soyez très attentif à la personnalisation de ce menu, en effet quand vous changez une propriété du CSS pensez à vérifier l'impact sous FF et sous IE car cette propriété peut se trouver à 1 endroit pour FF et à un autre pour IE.... soyez homogène. Quelques pistes pour vous aider:

• Changer la couleur de fond du bouton primaire : modifier background dans a.boutonIE ET .boutonFF
• Changer la couleur de fond du bouton primaire au passage de la souris: modifier background dans a.boutonIE:hover ET .boutonFF:hover
• Changer la couleur de fond du menu déroulant: modifier background dans a.boutonIE:hover table ET a.SousMenu
• Changer la couleur du lien survolé au passage de la souris dans le menu déroulant: modifier background dans  a.SousMenu:hover
• Si vous voulez changer la largeur des menus.... évitez! Sinon: changer la largeur des boutons primaires via la propriété width dans a.boutonIE ET .boutonFF + changer la largeur des menus déroulants via la propriété width:'largeur des boutons primaires'px !important pour FF et width:'largeur des boutons primaires - 2'px pour IE dans a.SousMenu (Hummmm, bon courage!!)
• Si vous voulez changer la hauteur du menu primaire.... évitez! Sinon, changer la hauteur des boutons via les propriétés height et line-height (qui doivent avoir la même valeur) dans a.boutonIE ET .boutonFF
• Si vous voulez changer la hauteur des différents boutons dans le menu déroulant.... évitez! Sinon, changer la hauteur des boutons via la propriété height dans  a.SousMenu
• Enfin, veillez à ce que la taille de la police soit inférieure à la taille des différents boutons: font-size inférieur à  height quelque soit la classe du CSS.

Pour finir, au niveau de l'intégration du menu dans l'entête, vous devez veiller à ce que la hauteur de l'entête soit suffisante pour contenir le "déroulement" du menu. En effet s'il n'est pas assez haut, sous FF, le menu déroulant apparaitra mais ne sera pas cliquable et sous IE le menu primaire sera "rogner"!!!! Pour augmenter la taille de votre entête vous pouvez rajouter la propriété height à l'identifiant de l'entête: 

200px est donné à titre d'exemple, en effet tout dépend du contenu de votre entête. Si vous n'avez pas d'idée de la hauteur à mettre, procéder par dichotomie: mettre 200px, et augmentez la taille progressivement jusqu'à le menu s'affiche correctement sous IE et FF.

Bon courage!!!!!!!!!!!!!!!!