Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3088 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Bloc qui bouge tout seul et qui ne devrait pas

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Bloc qui bouge tout seul et qui ne devrait pas

n°1273312
Bleuarff
pouet
Posté le 26-12-2005 à 15:22:52  profilanswer
 

Alors voila le problème : j'ai un beau petit menu sur mon site. Sous FF, ça marche nickel. Mais sous IE, c'est une autre paire de manches. D'une part au chargement de la page il est mal placé, mais en plus quand on passe le curseur sur un lien, le div conteneur se rétrécit et tout le menu se décale à gauche. Mais pas encore à la bonne place. Quelqu'un peut-il m'expliquer ce phénomène paranormal ?
 
la page : http://swingfiler.bleuarff-corp.info/test/index.php
le css : http://swingfiler.bleuarff-corp.in [...] design.css
 
la partie du css concernée :  

Code :
  1. #leftmenu{
  2. position : absolute;
  3. left : 0%;
  4. top : 0%;
  5. width : 16%;
  6. max-width : 16%;
  7. padding : 0.5% 0% 1% 3%;
  8. border : 1px solid red;
  9. }
  10. #leftmenu, .menuliste{
  11. font-size : medium;
  12. font-weight : bold;
  13. }
  14. .menuliste{
  15. width : 90%;
  16. list-style-image : none;
  17. list-style-type : none;
  18. padding-left : 0%;
  19. /* margin-right : 10%;*/
  20. border : 1px solid green;
  21. }
  22. .menuliste li{
  23. display: inline;
  24. }
  25. .menuliste a{
  26. color : black;
  27. display: block;
  28. text-decoration: none;
  29. }
  30. .menuliste a:visited{
  31. color : black;
  32. }
  33. .menuliste a:hover{
  34. background-color: orange;
  35. text-decoration: none;
  36. color : black;
  37. }


---------------
©2008 Bleuarff Corp.
mood
Publicité
Posté le 26-12-2005 à 15:22:52  profilanswer
 

n°1273540
CNeo
Posté le 27-12-2005 à 08:47:24  profilanswer
 

Je ne sais pas quel est le problème mais je pense que tu devrais éviter les pourcentages.

n°1273724
Bleuarff
pouet
Posté le 27-12-2005 à 14:52:10  profilanswer
 

Et tu proposes quoi d'autre pour faire un site élastique ?


---------------
©2008 Bleuarff Corp.
n°1273727
CNeo
Posté le 27-12-2005 à 14:59:06  profilanswer
 

Je pense que ton menu et tes news devraient avoir des tailles fixes.


Message édité par CNeo le 27-12-2005 à 14:59:17
n°1273728
Bleuarff
pouet
Posté le 27-12-2005 à 15:00:34  profilanswer
 

Je suis pas un expert mais ça va à l'encontre de tout ce que j'ai pu lire à ce sujet. Résolutions différentes, tout ça, taille fixe = pas bien.


---------------
©2008 Bleuarff Corp.
n°1273730
0x90
Posté le 27-12-2005 à 15:06:56  profilanswer
 

tu peut avoir un site d'une largeur élastique mais avec des menus/news de tailles fixes ( ou dumoins en em ). Ca s'adapte à la taille de la fenêtre sans jamais faire des menus trop larges et ca réduit les pb de compatibilité


---------------
Me: Django Localization, Yogo Puzzle, Chrome Grapher, C++ Signals, Brainf*ck.
n°1273739
Bleuarff
pouet
Posté le 27-12-2005 à 15:28:03  profilanswer
 

Jvais regarder ça, mais ça résoud pas mon problème. Est-ce que ça pourrait être un problème de marge dans IE qui ne la charge pas de la bonne taille et fasse un resize ?


---------------
©2008 Bleuarff Corp.
n°1273751
omega2
Posté le 27-12-2005 à 15:53:50  profilanswer
 

Bleuarff > En quoi ton menu est mal placé?  
Je sais pas si t'as fait exprés, mais la ligne "padding : 0.5% 0% 1% 3%;" est égale à  

Citation :

padding−top : 0.5%;  
padding−right : 0%;
padding−bottom : 1%;
padding−left : 3%;


 
PS : Pour les padding,margin ... utilise plustôt des em quand tu peux, ca rendra la page plus armonieuse dans de nombreux couples résolution d'écran/taille des caractéres.


Message édité par omega2 le 27-12-2005 à 15:54:48
n°1273753
Bleuarff
pouet
Posté le 27-12-2005 à 15:59:47  profilanswer
 

Oui c'est fait exprès, ça fait un css un peu plus court à scroller :o.
 
Ce n'est pas qu'il est mal placé mais sous IE il est trop large, et reviens à sa taille normale lorsque le curseur passe sur un lien du menu. Ce qui est assez moche.


---------------
©2008 Bleuarff Corp.
n°1273759
omega2
Posté le 27-12-2005 à 16:21:03  profilanswer
 

.menuliste li{ display: inline; }
.menuliste a{ display: block; }
 
Vu que t'as les liens dans les <li>, l'ordre des types ne me semble pas judicieux : un élément "en ligne" est censé ne pas contenir des blocks.
 
Personellement, vu le css, je vois rien qui explique ton probléme à part peut être la ligne en commentaire ( /* margin-right : 10%;*/ ) . Je ne sais pas comment IE gére les commentaires dans des css.


Message édité par omega2 le 27-12-2005 à 16:21:29
mood
Publicité
Posté le 27-12-2005 à 16:21:03  profilanswer
 

n°1273799
Bleuarff
pouet
Posté le 27-12-2005 à 17:18:05  profilanswer
 

J'ai trouvé ça sur le site Listamatic. J'ai pas très bien compris à quoi ça servait, mais ça a l'air de marcher.
Si j'enlève le display : block il va tenter d'afficher tous les liens sur la même ligne, ce qui est moche. Si je vire le display:inline, sous IE ça fait un grand espace entre les liens, c'est très moche. Et si je vire les 2, le changement de couleur du lien quand on passe dessus ne fait que la longueur du lien et n'est donc pas constant, ce qui est moche.
Dans tous les cas, ça reste W3C Compliant et ça ne change rien à mon problème de liste baladeuse sous IE.
 
Pour le commentaire, quand je le vire ça ne change absolument rien, donc IE doit les gérer correctement.
 
Je vais virer tous les éléments du menu et les remettre 1 par 1 pour voir quel élément fait bugger IE.


---------------
©2008 Bleuarff Corp.
n°1273806
Bleuarff
pouet
Posté le 27-12-2005 à 17:31:06  profilanswer
 

Bon alors j'ai résolu le problème du bloc div qui change de largeur : en précisant margin:0em* pour la liste, le bloc de gauche reste fixe. Par contre, la liste en ell-même continue de bouger à l'intérieur du bloc. Et ça je vois pas pourquoi ni comment le résoudre.
 
 
*:Je mets en application les conseils donnés :o.


---------------
©2008 Bleuarff Corp.
n°1273840
Bleuarff
pouet
Posté le 27-12-2005 à 18:29:07  profilanswer
 

Voila l'erreur : c'est la ligne background-color: orange qui fait décaler la liste en bousillant les marges et padding. Il suffit de la mettre en commentaire et tout s'arrange. Quant à savoir pourquoi, mystère. Et pour résoudre le souci, en plus mystère :/.


---------------
©2008 Bleuarff Corp.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Bloc qui bouge tout seul et qui ne devrait pas

 

Sujets relatifs
Bloc div qui bouge tout seul[css] Mise en place bloc div
[CSS] Problème hauteur d'un bloc dans IEJS : deux actions pour un seul click
plusieurs remplacements de chaînes de caractères ds un fic en une seulprobleme taille bloc en pourcentage
Menu qui ne bouge pas(css) bloc fixé sur IE
Plus de sujets relatifs à : Bloc qui bouge tout seul et qui ne devrait pas


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR