Toujours du mal avec CSS

[Membre supprimé 2]

Bonjour,

Avec l'aide de Mfay, j'ai pu récupérer le template d'un menu réalisé avec CSS.


Le but est d'intégrer ce menu dans la colonne de gauche de mon index qui fait 136 pix de large.

J'ai donc réduit les marges du code CSS suivant en passant de 260 à 135 px pour le bloc de positionnement et de 241 à 130 px pour les blocs de cadre :

<style type="text/css">
   /* ---- Bloc de positionnement ---- */
   #BordGauche
   {  margin: 10px ;
      float: left ;
      width: 260px;
   }

   /* ---- Blocs de cadre ---- */
   div.MenuTest
   {  left: 10px ;
      float: left ;
      background: url(content.gif) repeat-y ;
   }
   div.TestHaut
   {  background: url(header.gif) no-repeat ;
      width: 241px ;
      height: 29px ;
      Padding: 8px 8px 6px 8px;
   }
   div.TestMilieu
   {  width: 241px ;
      Padding: 0px 7px 0px 7px;
   }
   div.TestBas
   {  background: url(bottom.gif) no-repeat ;
      width: 241px ;
      height: 18px ;
   }

</style>

Malheureusement, certaines images s'affichent mal et le résultat est décevant.
J'ai tenté d'étudier la doc d'Alsa créations, sans succès pour mon problème.

Une aide serait la bienvenue.

Merci

 

[Anonyme]

Salut
Je cerne pas trop le probléme mais je voulai savoir à quoi correspond MenuTest ? car l'image content.gif est affiché seulement au milieu, mais n'est pas écrite dans le TestMilieu ... suis-je net ?

Sinon, http://www.w3schools.com/css/

a+

 

[mfay]

En vérifiant dans le code, voila ce que j'avais fait :

Un bloc DIV qui encadre toute la partie gauche : "#BordGauche"

Un bloc DIV qui décrit un menu "MenuTest". C'est ce bloc qui contient le fond du menu pour éviter des problème d'affichage avec Explorer.
Dans ce bloc on retrouve les trois morceaux du menu :
TestHaut : Le haut du menu avec le fond d'en-tête.
TestMilieu : Le contenu du menu.
TestBas : Le bas du menu avec le fond de pied de page.

Après il faut faire des retouches.
La largeur des blocs "Test...." doit être strictement identique à l'image et inférieure ou égale au "BordGauche".
Le positionnement du bloc BordGauche ne doit pas poser de problème particulier.

Une erreur que j'ai laissé passé c'est la présence de Padding dans des blocs qui ont une "Width" et un "Height". Ca peut poser des problèles d'affichage avec Explorer sous windows. Il faudrait les enlever.

--- Petit ajout ---
Je viens de faire une petite modif. pour corriger et adapter ces menus.
C'est ici l'exemple !
Il faut en regarder le source (code CSS et XHTML).

 

[Membre supprimé 2]

Salut Mathieu

Serieux je sais pas comment te remercier.... Je suis en vacances a Londres jusqu au 7/01 et ne possede pas d editeur html avec moi, mais a premiere vue, ca a l air nikel.
Peux tu avoir la gentillesse de laisser cet exemple en ligne jusqu a mon retour ?

merci encore et bonne annee !!!!