Ascenseur sans passer par des frames?

Ascenseur sans passer par des frames? - HTML/CSS - Programmation

Marsh Posté le 17-09-2003 à 11:13:42    

exist-il une solution pour avoir un ascenseur dans une zone d'un tableau ,( je préfère les tableaux aux frames)
 
merci.

Reply

Marsh Posté le 17-09-2003 à 11:13:42   

Reply

Marsh Posté le 17-09-2003 à 11:15:41    

<div style="overflow: auto;">


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

Marsh Posté le 17-09-2003 à 11:20:17    

antp a écrit :

<div style="overflow: auto;">


 
ok merci je vais voir ca de plus près

Reply

Marsh Posté le 17-09-2003 à 11:23:44    

ca marcqhe que pour internet explorer?

Reply

Marsh Posté le 17-09-2003 à 11:27:02    

Saxgard a écrit :

ca marcqhe que pour internet explorer?  


 
Non, ça marche également pour Mozilla, mais la hauteur du div doit à ce moment-là être précisée et pas en %... (hélas).

Reply

Marsh Posté le 17-09-2003 à 11:34:10    

hmm je n'ai pas d'ascenseur :/
bon je fais des rechreches pour voir d'ou ca vient ;o)

Reply

Marsh Posté le 17-09-2003 à 11:39:28    

Saxgard a écrit :

hmm je n'ai pas d'ascenseur :/
bon je fais des rechreches pour voir d'ou ca vient ;o)


 
Div en absolute aussi...  :)

Reply

Marsh Posté le 17-09-2003 à 11:49:40    

Un peu d'auto-promo : http://www.alsacreations.com/articles/frames/ ;)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 17-09-2003 à 11:50:00    

Hermes le Messager a écrit :


 
Div en absolute aussi...  :)  


hmm c'esta dire?

Reply

Marsh Posté le 17-09-2003 à 12:14:48    

SIBELIUS a écrit :

Un peu d'auto-promo : http://www.alsacreations.com/articles/frames/ ;)


 
Et toi regarde ça !!!!!!! Je crois que cette fois j'ai trouvé ce que je cherchais depuis si longtemps :
 
Passe avec Ie 5.5+, Moz 1+ et opera 7+
 

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 xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  8. <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  10. <title>test</title>
  11.  <style type="text/css" media="screen"><!--
  12. html,body { margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: hidden }
  13. .tbl-test  { position: absolute; width: 100%; height: 100% }
  14. .cell1 { background-color: #6fc; height: 50px }
  15. .cell2   { background-color: #900; vertical-align: top; height: 100% }
  16. .cell3 { background-color: #6ff; height: 50px }
  17. .inter    { position: relative; height: 100% }
  18. .tst-div          { color: white; position: absolute; width: 100%; height: 100%; overflow: auto }
  19. --></style>
  20. </head>
  22. <body>
  24. <table class="tbl-test" cellspacing="0" cellpadding="0">
  25. <tr>
  26.  <td class="cell1">
  27.  </td>
  28. </tr>
  29. <tr>
  30.  <td class="cell2">
  31.  <div class="inter">
  32.  <div class="tst-div">
  33.  machin...<br />
  34.  machin...<br />
  35.  machin...<br />
  36.  machin...<br />
  37.  machin...<br />
  38.  machin...<br />
  39.  machin...<br />
  40.  machin...<br />
  41.  machin...<br />
  42.  machin...<br />
  43.  machin...<br />
  44.  machin...<br />
  45.  machin...<br />
  46.  machin...<br />
  47.  machin...<br />
  48.  machin...<br />
  49.  machin...<br />
  50.  machin...<br />
  51.  machin...<br />
  52.  machin...<br />
  53.  machin...<br />
  54.  machin...<br />
  55.  machin...<br />
  56.  machin...<br />
  57.  machin...<br />
  58.  machin...<br />
  59.  machin...<br />
  60.  machin...<br />
  61.  machin...<br />
  62.  machin...<br />
  63.  machin...<br />
  64.  machin...<br />
  65.  machin...<br />
  66.  machin...<br />
  67.  machin...<br />
  68.  machin...<br />
  69.  machin...<br />
  70.  machin...<br />
  71.  machin...<br />
  72.  machin...<br />
  73.  machin...<br />
  74.  machin...<br />
  75.  machin...<br />
  76.  machin...<br />
  77.  machin...<br />
  78.  machin...<br />
  79.  machin...<br />
  80.  machin...<br />
  81.  machin...<br />
  82.  machin...<br />
  83.  machin...<br />
  84.  machin...<br />
  85.  machin...<br />
  86.  machin...<br />
  87.  machin...<br />
  88.  machin...<br />
  89.  machin...<br />
  90.  machin...<br />
  91.  machin...<br />
  92.  machin...<br />
  93.  machin...<br />
  94.  machin...<br />
  95.  machin...<br />
  96.  machin...<br />
  97.  machin...<br />
  98.  machin...
  99.  </div>
  100.  </div>
  101.  </td>
  102. </tr>
  103. <tr>
  104.  <td class="cell3">
  105.  </td>
  106. </tr>
  107. </table>
  109. </body>
  111. </html>


 
Confirmez moi si vous avez un problème et tester avec firebird si vous l'avez !  :bounce:  :bounce:

Reply

Marsh Posté le 17-09-2003 à 12:14:48   

Reply

Marsh Posté le 17-09-2003 à 12:20:37    

Sur Firebird, ça fait une zone scrollable au milieu de la page. C'est ce que tu voulais ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 17-09-2003 à 12:23:11    

overflow ca marche pas  
 
exmeple:
<table align="center" width="640" height="480" valign="top" border="1">
  <tr valign="top" height="100">
  <td>
  <div style="overflow: auto;">
  <img src="images/test.gif" alt="logo" border="0"
       align=left valign=bottom >
  <h1>&nbsp;</h1>dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
  </div>
  </td>
  </tr>
 
une idée? je fais surement uen belle boulette mais je voix pas


Message édité par saxgard le 17-09-2003 à 12:23:55
Reply

Marsh Posté le 17-09-2003 à 12:31:36    

SIBELIUS a écrit :

Sur Firebird, ça fait une zone scrollable au milieu de la page. C'est ce que tu voulais ?


 
Oui, tout à fait, mais ce qui m'intéresse, c'est que cette zone se redimensionne en fonction de la taille de la fenêtre. Peut-tu me faire une capture que je vois ce qu'il en est ?  :)

Reply

Marsh Posté le 17-09-2003 à 12:34:26    

Saxgard a écrit :

overflow ca marche pas  
 
exmeple:
<table align="center" width="640" height="480" valign="top" border="1">
  <tr valign="top" height="100">
  <td>
  <div style="overflow: auto;">
  <img src="images/test.gif" alt="logo" border="0"
       align=left valign=bottom >
  <h1>&nbsp;</h1>dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
  </div>
  </td>
  </tr>
 
une idée? je fais surement uen belle boulette mais je voix pas


 
1) Apprend déjà à appliquer une classe à un div. (donc les class dans le head et ensuite : <div class="nom-de-la-classe">
 
2) Je t'ai dit que le div doit être en absolute. Il faut donc créer une class pour ton div et préciser une hauteur ainsi que le fait qu'il est en absolute. Difficile d'être plus clair.
 
Si tu ne comprends pas ces explications, il va falloir que tu apprennes certaines choses avant de pouvoir réaliser ce que tu veux faire. Donc, fais dans un premier temps quelques tutos sur les CSS et en particulier les positionnements de divs et les définitions de classes, et ensuite tu pourras faire ce que tu veux faire actuellement.  :)

Reply

Marsh Posté le 17-09-2003 à 12:43:19    

Hermes le Messager a écrit :


 
Oui, tout à fait, mais ce qui m'intéresse, c'est que cette zone se redimensionne en fonction de la taille de la fenêtre. Peut-tu me faire une capture que je vois ce qu'il en est ?  :)  


Voilà pour toi ;) http://www.alsacreations.com/divers/cap3.gif


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 17-09-2003 à 12:48:03    

SIBELIUS a écrit :


Voilà pour toi ;) http://www.alsacreations.com/divers/cap3.gif


 
C'est bien ce que je voulais !!!  :bounce:  :bounce:  
 
Si tu arrives à correctement resizer la fenêtre, cela signifie qu'on a enfin une solution crossbrowser pour faire ce qu'on pouvait faire uniquement avec des frames. (A savoir un design entièrement en % avec un haut et un bas fixe et un contenu scrollable !)  [:yaisse2]

Reply

Marsh Posté le 17-09-2003 à 12:53:29    

Tu as l'air content d'être heureux ;)
 
Sur quels navigateurs ça ne fonctionne pas, ça :
http://www.alsacreations.com/artic [...] frames.php ?


Message édité par sibelius le 17-09-2003 à 12:54:52

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 17-09-2003 à 13:05:52    

SIBELIUS a écrit :

Tu as l'air content d'être heureux ;)
 
Sur quels navigateurs ça ne fonctionne pas, ça :
http://www.alsacreations.com/artic [...] frames.php ?


 
ça fonctionne partout, mais le gros problème, c'est que la hauteur est DEFINIE. Hors, moi ce que je cherchais, c'est le moyen de réaliser l'histoire avec des bords en haut et en bas fixe, mais une hauteur centrale adaptable automatiquement sans passer par du JS.
 
 :hello:

Reply

Marsh Posté le 17-09-2003 à 13:11:19    

ah oui, bien joué ;)


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 17-09-2003 à 13:31:17    

SIBELIUS a écrit :

ah oui, bien joué ;)


 
 [:totozzz] Je trouve aussi... ça faisait juste plusieurs mois que je cherchais à le faire. Ya même eu un topic consacré à ce problème...  :)

Reply

Marsh Posté le 17-09-2003 à 13:31:26    

Avec les % ça a l'air de bien marcher aussi :  
http://www.alsacreations.com/artic [...] estest.php


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 17-09-2003 à 13:32:56    

SIBELIUS a écrit :

Avec les % ça a l'air de bien marcher aussi :  
http://www.alsacreations.com/artic [...] estest.php


Non, petit scarabé. ça ne marche pas.
 
Tes bords en haut et en bas sont en %, les miens ont une taille fixe.  [:totozzz]  [:yaisse2]  [:yaisse2]

Reply

Marsh Posté le 17-09-2003 à 13:39:39    

Hermes le Messager a écrit :


 
1) Apprend déjà à appliquer une classe à un div. (donc les class dans le head et ensuite : <div class="nom-de-la-classe">
 
2) Je t'ai dit que le div doit être en absolute. Il faut donc créer une class pour ton div et préciser une hauteur ainsi que le fait qu'il est en absolute. Difficile d'être plus clair.
 
Si tu ne comprends pas ces explications, il va falloir que tu apprennes certaines choses avant de pouvoir réaliser ce que tu veux faire. Donc, fais dans un premier temps quelques tutos sur les CSS et en particulier les positionnements de divs et les définitions de classes, et ensuite tu pourras faire ce que tu veux faire actuellement.  :)  


 
ok je te remercie  ,la tt me parait plus clair  ;o)

Reply

Marsh Posté le 17-09-2003 à 14:26:26    

Alors Sibelius, on calle ?  :whistle:  [:totozzz]


Message édité par Hermes le Messager le 17-09-2003 à 14:26:49
Reply

Marsh Posté le 17-09-2003 à 15:09:55    

Tiens un petit détail : Il faut corriger un bug d'IE qui 1/2 montre le scroll horizontal quand on redimensionne en ajoutant overflow-x : hidden;
 
 :sol:

Reply

Marsh Posté le 17-09-2003 à 15:35:02    

Hermes le Messager a écrit :


 
1) Apprend déjà à appliquer une classe à un div. (donc les class dans le head et ensuite : <div class="nom-de-la-classe">
 


 
ouais enfin le coup du style= c'est moi qui l'ai montré :D


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

Marsh Posté le 17-09-2003 à 16:36:13    

Hermes le Messager a écrit :

Alors Sibelius, on calle ?  :whistle:  [:totozzz]


Hey Grand-Maître, laisse-moi le temps de rentrer de l'entraînement ;)
... bon en effet, je m'incline une fois de plus...  :jap:


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 17-09-2003 à 16:36:31    

antp a écrit :


 
ouais enfin le coup du style= c'est moi qui l'ai montré :D


 
merci antp ;o)
c parceque je te faisai confiance vuq ue t le moderateur  alors j'ai pas douté de ta ligne  :D

Reply

Marsh Posté le 17-09-2003 à 19:33:10    

bah Hermes est encore plus extrémiste que moi pour le HTML :D


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

Marsh Posté le 18-09-2003 à 12:51:15    

j'ai surement pas tout compris hermes mais n'obtient-on pas le meme resultat en faisant comme ça:

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 xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  8. <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  9.  
  10. <title>test</title>
  11. <style type="text/css" media="screen"><!--
  12. html,body { margin: 0px; padding: 0px; width: 100%; height: 100%; overflow: hidden }
  13. .header{ position: absolute; top:0px; height: 100px; }
  14. .content{position: absolute; top:100px; bottom: 100px; overflow:auto }
  15. .footer{position: absolute; height: 100px; bottom: 0px}
  16. --></style>
  17. </head>
  18. <body>
  19. <div class="header">HEAD</div>
  20. <div class="content">CONTENT</div>
  21. <div class="footer">FOOTER</div>
  22. </body>
  23. </html>

Reply

Marsh Posté le 18-09-2003 à 13:16:45    

Non, si je rempli le content, il passe par dessus le footer...  [:totozzz]

Reply

Marsh Posté le 18-09-2003 à 15:08:46    

Pour l'instant j'ai une version qui passe sous Moz et Opera...

Reply

Marsh Posté le 18-09-2003 à 15:12:46    

fastclemmy a écrit :

Pour l'instant j'ai une version qui passe sous Moz et Opera...


 
C'est bien déjà. Montre là, qu'on voit ça.  :)

Reply

Marsh Posté le 18-09-2003 à 15:16:22    

Hermes le Messager a écrit :


 
C'est bien déjà. Montre là, qu'on voit ça.  :)  


 
http://fastclemmy.com/tests/defi1.htm

Reply

Marsh Posté le 18-09-2003 à 15:19:15    

fastclemmy a écrit :


 
http://fastclemmy.com/tests/defi1.htm


 
 
Félicitation, c'est déjà très bien.  :jap:  :jap:

Reply

Marsh Posté le 18-09-2003 à 15:47:00    

Solution pourrÿte (surtout au resize :D) IE only  [:fastclemmy]  
 
http://fastclemmy.com/tests/defi1_bis.htm


Message édité par fastclemmy le 18-09-2003 à 15:55:00
Reply

Marsh Posté le 18-09-2003 à 15:53:20    

Gizmo a déjà proposé ta soluce dans l'autre topic, et moi-même j'ai trouvé la soluce pour IE dans ce même topic.
 
Mais bravo quand même, parce que même pour arriver à ce résultat, c'est pas si simple.  ;)

Reply

Marsh Posté le 18-09-2003 à 15:58:06    

Joli fast clemmy.
 
Mais sur IE5 ça marche pas bien.


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le 18-09-2003 à 16:24:32    

Bon bah je jette l'éponge avec cette dernière tentative crossbrowser (testé OK sur IE6, FB0.6.1, Opera 7) mais avec un soupçon de JS dans la CSS pour IE + un petit hack. [:spamafote]
http://fastclemmy.com/tests/defi1_final.htm

Reply

Marsh Posté le 18-09-2003 à 18:35:10    

Moi j'ai fait ça au final, pas de js, pas hack, juste des selecteurs.
 
ça passe avec IE5, IE6 ( je crois ) et Mozilla
 
Opera ça je pense pas :) mais faut essayer...


---------------
mon blog : http://www.magnin-sante.ch/journal/
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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