28220 sujets

CSS et mise en forme, CSS3

Compatibilité IE/FF menu avec commentaire au survol

Bonjour à tous.
Nouveau venu sur ce forum riche en ressources, je vous soumets mon petit problème:

- J'ai créé un menu avec affichage de commentaire au survol des liens en utilisant une balise <span> : fonctionne dans Firefox mais problème de positionnement dans IE, le display: block s'affiche décalé !

La page en cause est visible ici: http://ideafil.perso.cegetel.net/

Une bonne âme pour un petit coup de pouce?
Salut !!!

J'ai un peu regardé ton code, et j'ai deux remarques à faire, il serait préférable de mettre tes liens dans une liste, ensuite tu as dû remarqué l'élément cliquable du lien sous IE n'occupe pas tout son conteneur, en mettant un display: block, cela serait sans doute plus logique.

Cela devrait, je pense, règler ton problème de positionnement de ton span.

Smiley cligne
Bonsoir Spirou!
Merci pour ta réponse.

J'ai bien noté pour la liste au lieu de span, je vais y penser...
J'ai mis en ligne la modif avec 2 div de même largeur : résultat=néant!

Testé aussi avec overflow hidden/visible -->rien

Je teste actuellement le Box Model Hack car je soupçonne des problèmes de boite : résultat actuel=re-néant! (pas mis en ligne à cette heure)

Fatigué
Dormir

Merci.
Merci encore.
Le code de la page que tu me suggères est en fait celui que j'ai utilisé (c'est très vilain, mais pourquoi réinventer l'eau tiède?).

En fait, cela marche parfaitement si la page est bien calée à gauche, par contre, quand celle-ci est centrée et que les <div> sont bien imbriqués, le display: block flotte (il suffit de réduire la fenêtre ou de baisser à 800x600) :
problème de positionnement trop difficile à résoudre pour moi, trop de temps déjà passé là-dessus. J'avoue mes limites.

3 lignes de javascript, nickel dans IE et FF, css bien allégée, et tant-pis pour l'élégance et la technicité.

Mais malgré tout, c'est quoi le truc?
textos a écrit :

Mais malgré tout, c'est quoi le truc?


Je sais pas si il y a un truc, je viens d'essayer ce style de menu, à part quelques problèmes de bordures avec IE, cela est faisable.

Voici le code si ça peut t'aider Smiley smile 

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-15">
  <title></title>
  <style type="text/css">
  body {margin: 0; padding: 0; background: darkblue;}
  #global {width: 760px; left: 50%; margin-left: -380px; position: absolute; border: 1px solid yellow}
  #tete {height: 100px; margin: 0; background: maroon}
  #centre {margin: 0; position: relative; height: 100%; width: 100%}
  #centreGauche {float: left; height: 500px; width: 150px; _width: 155px; background: #333333; border-right: 5px solid #f0f0f0}
  #pied {height: 60px; clear: both; background: maroon}
  #centreDroit {width: 605px; _width: 603px; float: left; height: 500px; background: #dddddd}
  #menu {list-style-type: none; width: 150px; margin: 0; padding: 0; top: 0; left: 0; position: absolute}
  #menu li {margin: 3px 0 0 0; padding: 0}
  #menu a {display: block; height: 30px; line-height: 30px; width: 100%; background: #666666; text-align: center; color: white; font-weight: 700; text-decoration: none}
  #menu a span {display: none}
  #menu a:hover {background: #999999; border-right: 5px solid #c0c0c0; _width: 155px}
  #menu a:hover span {position: absolute; margin: 0; padding: 0; top: 170px; left: 0; display: block; width: 150px; background: #666666; font-weight: 400; font-size: 0.8em}
  
  </style>
  </head>
  <body>
  
  
  <div id="global">
  
    <div id="tete"></div>
    
    <div id="centre">
      
      <div id="centreGauche">
      
        <ul id="menu">
          <li><a href="#">lien n°1<span>Ceci est le commentaire 1 OOOHHHHHHH !!!</span></a></li>
          <li><a href="#">lien n°2<span>Ceci est le commentaire 2 AAAHHHHHHH !!!</span></a></li>
          <li><a href="#">lien n°3<span>Ceci est le commentaire 3 EEEHHHHHHH !!!</span></a></li>
          <li><a href="#">lien n°4<span>Ceci est le commentaire 4 HHHIIIIIII !!!</span></a></li>
          <li><a href="#">lien n°5<span>Ceci est le commentaire 5  [lol]</span></a></li>
        </ul>
      
      </div>
      
      <div id="centreDroit"></div>
      
    </div>
    
    <div id="pied"></div>
    
  </div>

  </body>
</html>

Parce que le JS pour les menus, c'est pas trop le top.

Bon courage.
Bonjour Spirou, ou peut-être devrais-je dire "Maître"...

Je n'ai qu'un mot à dire : "Royal!"

Je pensais à une modification mineure et ce bougre là il me refait tout en un temps record!

Il ne me reste plus qu'à assimiler le pourquoi et le comment de cette nouvelle conception.

Merci encore et chapeau bas, belle leçon de conception qui justifierait quasiment un tutorial.

Humblement

Textos
C'est très gentil de ta part, mais maître c'est vraiment très très exagéré, j'en suis très loin, apprenti serait plus proche Smiley lol

J'ai quand même mit pratiquement une demi-heure à faire ce style de mise en page. Smiley biggol

En plus je n'avais pas testé avec opera, ce que je viens de faire, et il y a encore un petit problème de largeur à règler.

Enfin merci pour tes compliments, ça fait toujours plaisir Smiley smile

Bonne continuation.
Bonsoir à tous, voici des nouvelles du front:

Le code "Spirou" s'affiche bien dans FF mais la Div "centredroit" fait des siennes dans IE : Pb facilement résolu.
Cette Div n'est absolument pas necessaire mais l'idée de pouvoir utiliser z index pour planquer du contenu me séduit.

Au passage j'ai modifié la dimension la dimension du global a 780 afin que l'affichage demeure correct dans un écran de 15 pouces en 800x600. (Hé oui il en existe encore beaucoup!).

Par contre le code "Spirou" crée un dommage collatéral (c'est joli ça) : si on réduit la fenêtre pour par exemple, avoir le bloc note ou une seconde fenêtre le site glisse à gauche et la navigation devient impossible car plus d'accès au menu!

J'ai bien l'impression qu'il va falloir faire des compromis.

Textos

Ps :correction effectuée en modifiant :

html, body {
width:100%;
margin:0;
padding: 0;
background: darkblue;}
#conteneur {
width:850px;
margin:0 auto 0 auto;
}

mais dans les 2 cas "centredroit"=absent de plus "centre"=absent dans IE
Modifié par textos (25 Oct 2005 - 00:44)
Ce que j'ai fait était simplement pour l'exemple du menu, je n'ai pas du tout travaillé la page, sinon je n'aurais pas mis de taille fixe et n'aurais certainement pas utilisé le positionnement en flottant pour les colonnes.

En général, j'utilise toute la largeur de la fenêtre pour ma page, mais c'est vrai que la page devrait être rognée par la droite et non par la gauche, je vois pas trop Smiley ohwell
Il n'y a que opéra qui redimensionne automatiquement la page, j'espère que la prochaine version de FF le fera aussi.

Quand tu dis que tu as redimmensionné à 780px, à mon avis c'est trop, ça fait 782px avec les bordures, le scroll apparaîtra, à mon avis.

J'ai pas trop bien compris ça :
textos a écrit :

#conteneur {
width:850px;
margin:0 auto 0 auto;
}

#conteneur remplace #global ?
Pourquoi 850px ?
Modifié par spirou (25 Oct 2005 - 17:25)
Bonsoir,
tu as tout à fait raison, voici ce que j'ai mis:
body {
margin: 0;
 padding: 0;
text-align: center;
background: darkblue;
}

#global {
width: 780px;
margin-right: auto;
margin-left: auto;
text-align: left;
}


idée extraite de :
Centrer les éléments ou un site web en CSS

Rectificatif : avec cette modification et sans toucher autre chose, lorsque l'on écrit dans le pied de page, on crée un décalage dans FF entre le "tete" et le "centre", effet neutre dans IE

A plus tard
Modifié par textos (26 Oct 2005 - 02:20)
Bonjour à tous,

@Textos

L'utilisation des codes adéquats pour présenter des codes dans le forum est toujours d'actualité et à respecter: Mise en forme générale des messages. Smiley cligne

Merci d'avance pour votre diligence à respecter les règles du forum.
Modifié par Igor (26 Oct 2005 - 01:14)
Sujet clos
Aller à