[HTML/CSS] width="100%" sous IE et Mozilla...

width="100%" sous IE et Mozilla... [HTML/CSS] - HTML/CSS - Programmation

Marsh Posté le 22-10-2003 à 11:34:42    

Je commence a en avoir ras le bol de ces differences entre Mozilla et IE. Rien ne fonctionne de la meme façon, chaque browser possede ses propres parametres par defaut et des qu'on veut utiliser les CSS on peut etre sur que des problemes vont apparaitre. :(
 
Bon, ça y est je suis soulagé.
 
Qqun pourrait me dire comment faire comprendre a IE que mes 2 DIV ('leftmenu' et 'content') doivent occuper toute la page (100%)? Mozilla comprend tres bien ça mais IE a du mal. Quand je lui dis que la largeur de 'content' doit etre de 100%, je veux bien sur dire que la largeur doit etre egale a 100% de la largeur restante et bien sur lui me mets une largeur de 100% = largeur de page ce qui fait que j'ai une scrollbar en bas de page. :o

Reply

Marsh Posté le 22-10-2003 à 11:34:42   

Reply

Marsh Posté le 22-10-2003 à 11:38:17    

Un div global de 100%
 
deux divs à l'intérieur de 50% ou encore : 20% et 80%
 

Reply

Marsh Posté le 22-10-2003 à 11:41:37    

J'ai essaye mais je vois pas comment faire pour englober dans des DIV sans tout casser. Il me faut une hauteur de 100% + une largeur de 100% + un header fixe et un menu a gauche fixe (quel merde d'ailleurs pour faire ça sous IE, a quand le support des position:fixed...).

Reply

Marsh Posté le 22-10-2003 à 12:02:27    

et ça c'est quoi ?  :sarcastic:  
 

Code :
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
  6. <title>index-test</title>
  7. <link href="test.css" rel="stylesheet" media="screen" />
  8. </head>
  9. <body>
  10. <div class="global">
  11. <div class="header">
  12. </div>
  13. <div class="gauche">
  14. menu<br />
  15. menu<br />
  16. menu<br />
  17. menu<br />
  18. menu<br />
  19. menu<br />
  20. menu<br />
  21. menu<br />
  22. menu
  23. </div>
  24. <div class="droite">
  25. contenu<br />
  26. contenu<br />
  27. contenu<br />
  28. contenu<br />
  29. contenu<br />
  30. contenu<br />
  31. contenu<br />
  32. contenu<br />
  33. contenu<br />
  34. contenu<br />
  35. contenu<br />
  36. contenu<br />
  37. contenu<br />
  38. contenu<br />
  39. contenu<br />
  40. contenu<br />
  41. contenu<br />
  42. contenu<br />
  43. contenu<br />
  44. contenu
  45. </div>
  46. </div>
  47. </body>
  48. </html>


 
la feuille de style :
 

Code :
  1. html,body
  2. {
  3. width : 100%;
  4. height : 100%;
  5. margin : 0px;
  6. padding : 0px;
  7. background-color : Silver;
  8. }
  9. .global
  10. {
  11. width : 100%;
  12. height : 100%;
  13. }
  14. .header
  15. {
  16. width : 100%;
  17. height : 100px;
  18. background-color : Olive;
  19. }
  20. .gauche
  21. {
  22. width : 200px;
  23. height : auto;
  24. left : 0px;
  25. background-color : Red;
  26. position : absolute;
  27. }
  28. .droite
  29. {
  30. width : auto;
  31. height : auto;
  32. margin : 0px 0px 0px 200px;
  33. background-color : Yellow;
  34. }


Message édité par Hermes le Messager le 22-10-2003 à 12:05:14
Reply

Marsh Posté le 22-10-2003 à 12:17:06    

Citation :

et ça c'est quoi ?  :sarcastic:  
...


 
C'est un truc qui marche tres bien quand t'as pas un 'header' et un 'gauche' fixe... :sarcastic:

Reply

Marsh Posté le 22-10-2003 à 12:21:16    

Comment ça fixe ? Mon header et mon gauche sont fixes ! Si tu n'es pas capable d'expliquer ce que tu veux exactement, je vois mal comment on pourra t'aider...

Reply

Marsh Posté le 22-10-2003 à 12:31:29    

Citation :

Comment ça fixe ? Mon header et mon gauche sont fixes ! Si tu n'es pas capable d'expliquer ce que tu veux exactement, je vois mal comment on pourra t'aider...


 
Tu ne connais pas position: fixed?
 
Exemple : le rectangle bleu est fixe sur ce site =>
http://www.mark.ac/help/sticky.html


Message édité par impulse le 22-10-2003 à 12:31:44
Reply

Marsh Posté le 22-10-2003 à 12:36:36    

cai trai mal ca  [:lacuna coil]

Reply

Marsh Posté le 22-10-2003 à 12:38:12    

Citation :

cai trai mal ca


 
Tu peux m'expliquer pourquoi?

Reply

Marsh Posté le 22-10-2003 à 12:41:51    

Si tu veux réaliser des frames sans frames en CSS, c'est bcp plus compliqué que cela. C'est comme ça que tu aurais du présenter ta question.
Il y a deux grandes possibilités :
 
1) Le javascript pour IE et les CSS pour Moz, puisque IE ne supporte pas le position fixe.
 
2) Les hack css, et t'imprégner des travaux que l'on a réalisé sur la question sempiternelle.
 
http://forum.hardware.fr/forum2.ph [...] h=&subcat=
 
et aussi ici :
 
http://forum.hardware.fr/forum2.ph [...] h=&subcat=

Reply

Marsh Posté le 22-10-2003 à 12:41:51   

Reply

Marsh Posté le 22-10-2003 à 12:42:25    

impulse a écrit :

Citation :

cai trai mal ca


Tu peux m'expliquer pourquoi?


c'est moche  [:spamafote]

Reply

Marsh Posté le 22-10-2003 à 12:46:13    

impulse a écrit :

Citation :

Comment ça fixe ? Mon header et mon gauche sont fixes ! Si tu n'es pas capable d'expliquer ce que tu veux exactement, je vois mal comment on pourra t'aider...


 
Tu ne connais pas position: fixed?
 
Exemple : le rectangle bleu est fixe sur ce site =>
http://www.mark.ac/help/sticky.html


 
Moi j y connais rien en HTML  :o , mais ton site quand tu surf en fenetrer il n y a pas de fin  :sweat: . tu peux faire scroler a l infinit. Le script arrete le scroll uniquement en plein ecran. Je trouve la navigation desagreable car le movement du menu de gauche est saccader. Bref techniquement c est interressant mais niveau conford c est nul  :na: .
 
Voila c est mon avis a moi tout seul et je le partage.
 
@++


---------------
The Only Way for Evils to Triumph is for Good Men to do Nothing @->-- Cours Réseaux@->-- Mon Site
Reply

Marsh Posté le 22-10-2003 à 12:53:36    

krzAramis a écrit :


Voila c est mon avis a moi tout seul et je le partage.


ben non t'es pas tout seul [:bisou]

Reply

Marsh Posté le 22-10-2003 à 12:56:45    

Urd-sama a écrit :


ben non t'es pas tout seul [:wormskiller]


 
Merci mais j ai pris trop de temps pour rediger mon message donc j ai pas vu que j etais pas seul. Desole!  :whistle:  
 
@++
 
Aramis trop lent le matin


---------------
The Only Way for Evils to Triumph is for Good Men to do Nothing @->-- Cours Réseaux@->-- Mon Site
Reply

Marsh Posté le 22-10-2003 à 13:47:58    

impulse : la faute en revien a IE, qui ne comprends pas bien la position en fixe.
Malheuresement il n'existe pas de solution facile.
Neanmoins je te conseille de lire cet article :
http://openweb.eu.org/articles/initiation_absolue/
 
De plus c'est un excelent site sur les CSS et le XHTML
 
krzAramis :
Les problemes que tu evoque ne concernent qu'IE, l'auteur de la page a du ruser afin d'obtenir le resultat voulu, il a du utiliser du javascript pour simuler une position en fixe. De plus le fait que tu puisse scroller jusqu'a l'infini, est "normal". Car si la fenetre n'est pas assez grande pour afficher le menu en entier, alors le navigateur veut scroller plus bas pour afficher le reste.
Mais lorsque tu scroll, le menu est repositionne, donc le navigateur le pourra jamais voir le bas du menu, donc scroll a l'infini.
La page fonctionne sans probleme sous Firebird 0.7 :P


Message édité par cerel le 22-10-2003 à 13:51:25
Reply

Marsh Posté le 22-10-2003 à 13:55:09    

<justecommeça>
Pourquoi ne pas faire un <div> en position absolue à gauche et un <div> à droite avec un overflow scroll ?
</justecommeça>

Reply

Marsh Posté le 22-10-2003 à 13:58:21    

Bon alors premierement j'ai trouvé une solution pour emuler la position fixe sous IE. Mon pb ne se situe pas la.
 
Deuxiemement pour ceux qui trouvent que les positions fixes sont inutiles/moches =>  
 
1. avec un vrai browser (Mozilla, Firebird et cie) il n'y a rien de "moche"
2. c'est tres utile pour une appli web (menu toujours visible par exemple). Faudrait peut etre comprendre qu'on a pas tous les meme besoins et que je suis pas forcement en train de faire un site perso
 
PS : j'ai utilisé la methode décrite sur ce site => http://devnull.tagsoup.com/fixed/


Message édité par impulse le 22-10-2003 à 13:59:27
Reply

Marsh Posté le 22-10-2003 à 14:00:17    

fastclemmy a écrit :

<justecommeça>
Pourquoi ne pas faire un <div> en position absolue à gauche et un <div> à droite avec un overflow scroll ?
</justecommeça>


 
Parce qu'il veut une hauteur en % ainsi qu'une largeur en % pour vraiment simuler des frames, comme dans le défit que j'avais lancé, souviens-toi. ;)
 
Si on veut fonctionner en % avec une partie avec des dimensions fixes, c'est la merde.  :)

Reply

Marsh Posté le 22-10-2003 à 14:00:50    

1. ouais mais ces browser sont minoritaires malheureusement :/
2. pas de prob, mais en général une page ne devrait pas être très haute, c'est pour ca que je trouve relativement inutile.
 
ps: je compattis si tu fais du boulot pour des tiers, du boulot à la con j'en ai chaque jour

Reply

Marsh Posté le 22-10-2003 à 14:06:30    

Citation :

1. ouais mais ces browser sont minoritaires malheureusement
2. pas de prob, mais en général une page ne devrait pas être très haute, c'est pour ca que je trouve relativement inutile.
 
ps: je compattis si tu fais du boulot pour des tiers, du boulot à la con j'en ai chaque jour


 
1. en fait mon appli doit etre utilisable sous IE 6.0, c'est plutot limité (tant mieux). Cependant j'utilise Mozilla et je ne veux pas dev un site qui ne fonctionne pas sous Mozilla (d'ailleurs je n'ai pas encore eu le moindre pb avec Mozilla, c'est IE qui pose pb a chaque fois).
 
2. tout a fait d'accord en ce qui concerne la taille de la scrollbar. Je me souviens d'ailleurs d'un prof de web qui me disait "les scrollbars ne devraient pas exister, si j'en vois une seule sur votre site je vous colle un zero". Seulement la je dois tout afficher sur une page (imagine la taille de la scrollbar quand j'affiche 2000 icones sur une page...).

Reply

Marsh Posté le 22-10-2003 à 14:08:49    

je m'incline :jap:
mais sans savoir tout ces détails on peut juger que tu te casse le cul pour rien :D

Reply

Marsh Posté le 22-10-2003 à 14:15:35    

Citation :

je m'incline :jap:
mais sans savoir tout ces détails on peut juger que tu te casse le cul pour rien :D


 
En fait j'ai presque reussi a obtenir ce que je veux au niveau de l'interface. Il me reste encore des trucs a regler mais ce sont des details. Le dev web c'est vraiment un truc a s'arracher les cheveux des fois (j'ose meme pas imaginer les pb que j'aurais si j'avais plus de contraintes genre support de Netscape, Lynx et cie...).

Reply

Marsh Posté le 22-10-2003 à 14:23:01    

impulse a écrit :

Citation :

je m'incline :jap:
mais sans savoir tout ces détails on peut juger que tu te casse le cul pour rien :D


 
En fait j'ai presque reussi a obtenir ce que je veux au niveau de l'interface. Il me reste encore des trucs a regler mais ce sont des details. Le dev web c'est vraiment un truc a s'arracher les cheveux des fois (j'ose meme pas imaginer les pb que j'aurais si j'avais plus de contraintes genre support de Netscape, Lynx et cie...).


 
Pas forcément en fait. Pour tout ce qui est Lynx et cie, il faut juste que toutes les infos soient bien dispos et placées hiérachiquement et logiquement dans la page.
 
C'est quand tu cherches à avoir le même résultat "graphiquement" entre plusieurs navigateurs récents que c'est compliqué. ;)
 
Pour avoir vraiment la même chose sous IE 5+, Moz 1+, Netscape 6+ et Opera 6+, c'est déjà coton dans certains cas.  :)

Reply

Marsh Posté le 22-10-2003 à 14:28:45    

Hermes > j'ai regarde ta solution (cf lien vers le topic que tu as donné) pour un header+footer fixes (avec taille fixe). Le seul probleme c'est que sous Mozilla 1.4/win la roulette ne fonctionne pas avec ton code (pas de pb sous IE)...

Reply

Marsh Posté le 22-10-2003 à 14:31:50    

impulse a écrit :

Hermes > j'ai regarde ta solution (cf lien vers le topic que tu as donné) pour un header+footer fixes (avec taille fixe). Le seul probleme c'est que sous Mozilla 1.4/win la roulette ne fonctionne pas avec ton code (pas de pb sous IE)...


 
Ca c'est un bug de Mozilla [:spamafote] (je crois résolu avec FB 0.7 et Mozilla 1.5 à confirmer)

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed