Probleme menu flotant

[Sammuel]

Bonjour,

Je rencontre un problème sous IE pour faire flotter un menu par rapport au "contenu". Je vais imager le tout pour que ce soit plus clair :

Sous Firefox, cela affiche :

Comme vous pouvez le voir le menu en rouge est bien décalé sur la gauche, par rapport au "contenu".

Sous IE, cela affiche :

Le bord gauche du menu (le bloc rouge) est coupé, et n'est donc pas affiché entièrement.

Le code de la page se trouve ici :

http://votreguideweb.free.fr/modele15.htm

Auriez vous une solution pour que le menu de gauche (le bloc rouge) s'affiche correctement sous IE ? qu'il "flotte" correctement comme sur Firefox ?

Merci !

Modifié 2 Mars 2006 par Sammuel

[jeanpierre949]

IE ne sortira jamais le menu du conteneur meme evac un float

reste la solution du padding-left. avec des hacks si tu tiens a conserver l'affichage actuel sous FF

#gauche {
float:left;
background:red;
margin-left: -5px;
width: 143px;
padding-left:7px;
}

2eme solution un div supplementaire

#add{
position: relative;
background:red;
width: 150px;
}

code html

  <div id="gauche"><div id="add">
        <p>

          menu gauche
        </p>
        <p>
          largeur fixe : 150px avec utilisation de la propriété <code>float:left;</code>
        </p>
        <ul id="menugauche">
          <li>
            <a href="#">Menu 1</a>

          </li>
          <li>
            <a href="#">Menu 2</a>
          </li>
          <li>
            <a href="#">Menu 3</a>
          </li>
          <li>

            <a href="#">Menu 4</a>
          </li>
        </ul>
  </div>
      </div>

Modifié 3 Mars 2006 par jeanpierre949

[Bastien]

Bonjour,

Avant tout, je suis newbie, donc je n'ai probablement pas la solution parfaite!!! Et si quelqu'un trouve une erreur peut-être nous avertir!

j'ai essayé quelque chose (ce n'est malheureusement plus un float):

Pour ce qui est du menu de gauche, j'ai changé deux choses:

position: absolute;

left: inherit; (va prendre la valeur du parent pour l'alignement à gauche)

Et comme tu as un margin-left:-10px, ton menu est décalé de 10px vers la gauche

#gauche {
position: absolute;
left: inherit;
background:red;
margin-left:-10px;
width: 150px;
}

j'ai essayé avec IE et ça fonctionne...

Est-ce que tu voulais vraiment un menu float?

[Sammuel]

Salut,

Oui j'ai obligatoirement besoin d'utiliser float car c'est le menu de gauche qui fixe la hauteur du "contenu". Si j'utilise la balise absolute, ca va fonctionner tant que la hauteur du contenu va être supérieure à celle du menu. Dans le cas contraire, le menu va floter sur le site...

J'ai essayé avec la balise absolute et en définissant une hauteur fixe du contenu, mais c'est de la "bidouille" .

Bastien, rajoutes des lignes dans ton menu de gauche, tu veras que ton menu va "flotter" sur la page.

Je préfère trouver une solution plus normale...

J'en ai peut etre trouvé une ! Il faut que je face un test .

[jeanpierre949]

la solution du div rapporté en position relative est de loin celle qui donne les meilleurs resultats