Discussion :

[remus69]

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?

[pop_up]

Si tu mets ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#menu_horizontal {
    padding-left: 0;
}

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

[remus69]

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

J'avais pourtant déjà mis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#menu_horizontal ul
{
	padding:0px;
}

Pourquoi devoir refaire cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#menu_horizontal {
    padding-left: 0;
}

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

[desert]

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

#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 !

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

#menu_horizontal ul { ... }

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

[remus69]

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 :

   Sélectionner tout - Visualiser dans une fenêtre à part

   1
   2
   3
   4
   5
   6
   7
    
   body 
   {
   	padding: 30px;
   	font-family: Verdana, Geneva, sans-serif;
   	margin-bottom: 20px;
   }

[Macmillenium]

Bonsoir,

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.

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.

[remus69]

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...

[Macmillenium]

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

Specs css2
specs css2.1

[remus69]

Merci!

[remus69]

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?