Opera - Probleme

Opera - Probleme - HTML/CSS - Programmation

Marsh Posté le 06-08-2003 à 08:52:04    

Voila une petite colle.
 
J'experimente un peu les possibilite pour realiser un site base sur des %.
 
Plusieurs problemes se posent. En effet, en XHTML 1.1, on doit mettre le body en absolute et a 100% de largeur et de hauteur pour pouvoir ensuite par exemple mettre un div a 100% de hauteur.
 
Avec IE et Moz, aucun souci. (A noter d'ailleur que c moz qui impose le body en absolute, car sinon, un div de 100% de hauteur n'a aucun sens pour lui.
 
Avec Opera, le probleme est le suivant : Comme il existe a la base des marges impossible a enlever (je n'ai jamais reussi a faire un div occupant toute la surface du nav autrement qu'en utilisant des frames), il se trouve bien embete pour afficher un div de 100% de large et de haut et se met a bugger lamentablement.
 
Ma question est simple :
 
Existe-t-il en XHTML 1.1 une maniere de realiser un div occupant 100% de la largeur et de la hauteur du navigateur de maniere que cela passe sur IE 5+, Moz 1+ et Opera 7+ ?  :whistle:  
Sinon, quelqu'un a-t-il une solution pour faire disparaitre cette marge dans Opera sans utiliser de Frames...  :whistle:

Reply

Marsh Posté le 06-08-2003 à 08:52:04   

Reply

Marsh Posté le 06-08-2003 à 09:36:59    


<body style="margin: 0px; padding: 0px;">
<div style="width: 100%; height: 100%; background-color: #123456;"> </div>
</body>


 
chez moi ça remplit tout l'espace :??: (bon, Opera laisse juste une bande blanche à droite pour la scrollbar :D, mais c'est pas grave quand même ?)
 
edit:
ha non quand on fout du texte ça foire [:jofission]
 


<body style="margin: 0px; padding: 0px;">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #123456;"><p>test</p></div>
</body>


y a un bord blanc en bas aussi dans Opera :heink: bizarre.


Message édité par antp le 06-08-2003 à 09:39:38

---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 06-08-2003 à 10:12:48    

Reply

Marsh Posté le 06-08-2003 à 15:41:25    

fastclemmy a écrit :

Ca marche ça non ?
http://www.fastclemmy.com/tests/test_height.htm
 
Basé sur :
http://www.xs4all.nl/~ppk/css2tests/100percheight.html


 
Mes felicitations et merci.  :jap:  
 
J'ignorait que "html" etait un element modifiable avec les css.  :ouch:  

Reply

Marsh Posté le 06-08-2003 à 17:19:53    

Bien, maintenant que ce probleme est resolu, je vous propose une colle :
 
Regardez ce code (et essayez le)
 

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">
  4. <html>
  6. <head>
  7. <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  9. <style>
  10. <!--
  12. html,body   { margin: 0; padding: 0; overflow: hidden }
  13. html,body { height: 100% }
  15. .tbl  { position: relative; width: 100%; height: 100% }
  16. .td1 { background-color: blue; position: relative; height: 50px }
  17. .td2 { background-color: green; position: relative }
  18. .td3 { background-color: yellow; position: relative; height: 50px }
  19. .test { position: relative; z-index: 1; height: 100%; overflow: auto }
  20. -->
  21. </style>
  23. </head>
  25. <body>
  27. <table class="tbl" cellspacing="0" cellpadding="0">
  28.  <tr>
  29.   <td class="td1"></td>
  30.  </tr>
  31.  <tr>
  32.   <td class="td2">
  33.   <div class="test">
  34.   ssdfvddvfdvkkfkkfk kfkbk fkbfkbkfb<br />
  35.   ssdfvddvfdvkkfkkfk kfkbk fkbfkbkfb<br />
  36.   ssdfvddvfdvkkfkkfk kfkbk fkbfkbkfb<br />
  37.   ssdfvddvfdvkkfkkfk kfkbk fkbfkbkfb<br />
  38.   ssdfvddvfdvkkfkkfk kfkbk fkbfkbkfb<br />
  39.   ssdfvddvfdvkkfkkfk kfkbk fkbfkbkfb<br />
  40.   ssdfvddvfdvkkfkkfk kfkbk fkbfkbkfb<br />
  41.   ssdfvddvfdvkkfkkfk kfkbk fkbfkbkfb<br />
  42.   ssdfvddvfdvkkfkkfk kfkbk fkbfkbkfb<br />
  43.   ssdfvddvfdvkkfkkfk kfkbk fkbfkbkfb<br />
  44.   ssdfvddvfdvkkfkkfk kfkbk fkbfkbkfb<br />
  45.   ssdfvddvfdvkkfkkfk kfkbk fkbfkbkfb<br />
  46.   ssdfvddvfdvkkfkkfk kfkbk fkbfkbkfb<br />
  47.   ssdfvddvfdvkkfkkfk kfkbk fkbfkbkfb<br />
  48.   ssdfvddvfdvkkfkkfk kfkbk fkbfkbkfb
  49.   </div>
  50.   </td>
  51.  </tr>
  52.  <tr>
  53.   <td class="td3"></td>
  54.  </tr>
  55. </table>
  57. </body>
  59. </html>


 
Sous IE et Opera 7, pas de probleme.
 
Par contre Mozilla ne veut pas en entendre parler, car le div fait 100%, et non une taille fixe.  ;)  
Une idee ??  :whistle:

Reply

Marsh Posté le 06-08-2003 à 17:30:29    

Firebird 0.6.1, je vois pas le souci ? (je suis en 1024*768)

Reply

Marsh Posté le 06-08-2003 à 17:32:52    

fastclemmy a écrit :

Firebird 0.6.1, je vois pas le souci ? (je suis en 1024*768)


 
tst tst  tst...  [:totozzz]  
 
Reduit ta fenetre avec IE, et tu verras une jolie barre de scroll apparaitre (div scrollable ;) )
 
Par contre, avec Moz, point de scroll, c ca qui m'embete ;)
 

Reply

Marsh Posté le 06-08-2003 à 20:18:35    

Mozilla 1.4 , pas de scroll non plus.
 
J'ai déjà eu ce problème quand je mets mes DIV en position relative, par contre en absolute, je revois la barre de scroll (il suffit de la mettre sur la class test dans ton exemple).


Message édité par Mjules le 06-08-2003 à 20:19:13

---------------
Celui qui pose une question est idiot 5 minutes. Celui qui n'en pose pas le reste toute sa vie. |  Membre du grand complot pharmaceutico-médico-scientifico-judéo-maçonnique.
Reply

Marsh Posté le 07-08-2003 à 15:27:29    

Oui, le scroll apparait, mais :
 
1) le div bouffe la derniere cellule de la table, et 2) Opera ne scroll plus du tout, lui du coup.  :sweat:  
 
Donc, a l'heure actuelle, et malgre la sortie d'opera 7 qui prend en charge les div scrollables, pas de soluce en vue pour crossbrowser les divs scrollables dont la taille est exprimee en % ??  :whistle:

Reply

Marsh Posté le 07-08-2003 à 19:47:35    

:bounce:

Reply

Sujets relatifs:

Leave a Replay

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