Design avec menu horizontal et menu gauche

Bonjour,

je suis en train de réaliser un design en CSS disponible à cette adresse.

Vous pourrez trouver toutes les sources sur ce lien.
J'ai réalisé ce design avec plusieurs fichiers css :

• Design de la boite=ce qui contient le contenu
• Design du menu horizontal
• Design générale
• Design du menu gauche

J'ai mis volontairement des bordures de couleur pour bien différencier chaque bloc.
Rouge = centre
Violet = boite_menu_horizontal
Jaune = boite

Je n'arrive pas à bien positionner le menu horizontal... :( En effet, j'aimerai aligner mon cadre le plus à gauche ("Tarquinio") avec le cadre de la boite.

Pourriez vous m'aider à faire cela?

Si tu mets ceci :

Code:

---

1 2 3 4

#menu_horizontal { padding-left: 0; }

---

ça te positionne ton menu horizontal à gauche. C'est ce que tu veux ?

Oui j'avais essayé cela ! Mais sa buggue sur Internet Explorer!

J'avais pourtant déjà mis :

Code:

---

1 2 3 4

#menu_horizontal ul { padding:0px; }

---

Pourquoi devoir refaire cela :

Code:

---

1 2 3

#menu_horizontal { padding-left: 0; }

---

Et comment résoudre le problème sous Internet Explorer?

L'id menu_horizontal est appliqué à la balise ul principale.
En écrivant ceci :

Code:

---

#menu_horizontal ul { ... }

---

tu désignes les sous-menus et non le menu en lui-même.
Tu dois donc appliquer un margin ET un padding de 0px à ton menu (#menu_horizontal) pour ne plus avoir de décalage. Tu peux laisser le padding:0 sur les sous-menus par contre.

EDIT: je viens de me rendre compte que tu n'as pas de sous-menus en fait ! :aie:

Code:

---

#menu_horizontal ul { ... }

---

n' a donc pas d'utilité dans ce cas sauf si tu décides d'en rajouter.

Ok merci! Je comprends mieux !

Encore 2 petites questions :

1. Comment enlever le petit espace entre le menu horizontal et la boite de mon contenu ?

1. Pourquoi le pied de page est collé au bas du navigateur alors que j'ai mis les propriétes css suivantes :
   
   
   Code:

   ---

   1 2 3 4 5 6 7

   body { padding: 30px; font-family: Verdana, Geneva, sans-serif; margin-bottom: 20px; }

   ---

Bonsoir,

Citation:

---

Envoyé par remus69

1. Comment enlever le petit espace entre le menu horizontal et la boite de mon contenu ?

---

Réduit un peu la valeur top de #boite, 63px devrait suffire.

Citation:

---

Pourquoi le pied de page est collé au bas du navigateur alors que j'ai mis les propriétes css suivantes :

---

Applique le margin-bottom directement sur #pied_de_page et ajoute un overflow:hidden pour éviter la fusion des marges.

Ok merci! J'avais déjà essayer de mettre le margin-bottom au pied de page, mais sans mettre le overflow:hidden. Je ne connais pas trop cette notion de fusion de marge... Il y a t'il un tuto là dessus?

C'est parfait sur Firefox, mais cela ne change rien sur IE...

Citation:

---

Envoyé par remus69

Il y a t'il un tuto là dessus?

---

Specs css2
specs css2.1

Merci!

J'ai modifié mon html et mon css en ajoutant un div global, ce qui permet de centrer le design.;)

J'aimerai également placer mon menu gauche en faisant un float: left;

Mais voici les nouveaux problèmes:

1. Comment placer le menu gauche correctement?
2. Comment éviter que le texte de mon contenu se décale lorsque l'on clique sur le "+" du menu?
3. Pourquoi il y a t'il une marge entre le côté gauche de ce menu et la bordure violette?
4. Pourquoi est ce que le rendu est catastrophique sur Internet Explorer?:(