Emplacement de div avec CSS

Bonjour,

Je suis actuellement entrain de faire un site internet, mais j'ai quelques ressources qui me manquent en CSS.

J'ai préparé mon site sur Photoshop et j'ai découpé tout mes images pour constituer mon site sous Dreamweaver.

Je suis arrivé à le coder mon entête en CSS dans des div. sur Dreamweaver. Mais pour la partie en dessous où il y a un cadre et un pied de page, je ne suis pas arriver a reproduire ce que je voulait.

Je vous fais une petit explication sur une image et espérant que vous puissiez comprendre (Chaque couleur est un div. différent).

Pouvez-vous m'expliquer ce que je dois faire ?!?

Je vous laisse ce que j'ai déjà réussi à faire en HTML et CSS pour que vous y voyiez un peut plus clair.


En vous remerciant d'avance.
______________________________

Site design complet : Image
Site avec les différentes div. : Image
Site en HTML et CSS : Fichier

------------
Modifié par Flayks (09 Jun 2013 - 23:14)

Flayks a écrit :
A première vue, c'est assez, voir très mal fait...

Pas vu le contenu du RAR pour ma part (pas tenté de l'ouvrir... je veux une page directement accessible en ligne ou bien au revoir ). Mais le plan de découpage (deuxième image) me semble plutôt correct.

Flayks a écrit :
Rollover en JS, sans JS tu les a pas... J'aurais fais un rollover en CSS.

OSEF du rollover sans JS. Un rollover JS sur des liens images c'est le meilleur moyen pour faire un rollover accessible. Si le menu est bien structuré et que les images ont un texte alternatif pertinent, bien sûr. Donc non pour le rollover en CSS (pas accessible si le texte fait partie des images de fond).

Flayks a écrit :
De plus, faire deux images pour chaque lien, ça fait beaucoup. Il a des alternatives en CSS

Ces alternatives sont correctes uniquement si on garde le texte dans le code HTML, sans le remplacer par un texte écrit sur l'image de fond (problème d'accessibilité). Donc faire deux images différentes est un moindre mal dans bien des cas (à condition de faire un preload en JavaScript pour ces images).