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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [TABLE/CSS] Tableau avec ascenseur !

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[TABLE/CSS] Tableau avec ascenseur !

n°1213488
nato29
Posté le 03-10-2005 à 12:37:47  profilanswer
 

Bonjour @ tous,
 
Je vous expose mon pb, j'ai actuellement un bouton web ecrit avec un tableau :

Code :
  1. <table border="1" id="bouton1" tabindex="1" onkeypress="if (window.event.keyCode==13){null;};" style="display: inline;" cellpadding="0" cellspacing="0">
  2.   <tbody>
  3.     <tr>
  4.       <td><img src="images/Bouton_Form_Gauche.gif" id="bouton1ImgGch" height="20" width="9" alt="" /></td>
  5.       <td id="bouton1TD" class="cssBoutonFormLibelle" height="20" nowrap="nowrap" valign="middle">VALIDER</td>
  6.       <td><img src="images/Bouton_Form_Droite.gif" id="bouton1ImgDrt" height="20" width="9" alt=""/></td>
  7.     </tr>
  8.   </tbody>
  9. </table>


 
et maintenant je veux faire le meme bouton avec des DIV et du CSS.
du genre :

Code :
  1. <div>
  2.        <div id="bouton1ImgGch" ></div>
  3.        <div id="bouton1C"><a href="#">VALIDER</div>
  4.        <div id="bouton1ImgDrt"></div>
  5. </div>


 
si vous avez deja fait ca ou des idee, je suis preneur.
 
Merci d'avance


Message édité par nato29 le 04-10-2005 à 16:25:32
mood
Publicité
Posté le 03-10-2005 à 12:37:47  profilanswer
 

n°1213568
gatsusat
Posté le 03-10-2005 à 13:57:41  profilanswer
 

on va faire simple :
 
tu peux nous montrer la page ou apparait ce bouton
 
car à mon avis, sajs utiliser 50 div,  
rien qu'avec <a href="#">texte</a>  
on fait la même chose. tu as une copie d'écran de la chose ?

n°1213595
nato29
Posté le 03-10-2005 à 14:19:57  profilanswer
 

voila les captures d'ecran correspondant au bouton :
 
http://glb.gysmo.org/ecrire/up/bouton1.png
 
et voila ce que j'ai fait mais cela ne marche pas sous IE, mais sur Opera, Netscape et FF.
 
http://glb.gysmo.org/ecrire/up/bouton2.png

Code :
  1. <script language="javascript" type="text/javascript">
  2. function trouvestyle(idf) {
  3. if (document.getElementById) {
  4.   return document.getElementById(idf).style;
  5. } else if (document.all) {
  6.   return document.all[idf].style;
  7. } else if (document.layers) {
  8.   return document.layers[idf];
  9. } else return null
  10. }
  12. function downBouton (g,c,d) {
  13. var stylc=trouvestyle(c);
  14. var stylg=trouvestyle(g);
  15. var styld=trouvestyle(d);
  16. if(stylc) 
  17.  stylc.backgroundImage='url(images/Bouton_Forme_enfonce_Fond.gif)';
  18. if(stylg) 
  19.  stylg.backgroundImage='url(images/Bouton_Form_enfonce_Gauche.gif)';
  20. if(styld) 
  21.  styld.backgroundImage='url(images/Bouton_Form_enfonce_Droite.gif)';
  23. }
  25. function upBouton (g,c,d) {
  26. var stylc=trouvestyle(c);
  27. var stylg=trouvestyle(g);
  28. var styld=trouvestyle(d);
  29. if(stylc) 
  30.  stylc.backgroundImage='url(images/Bouton_Forme_Fond.gif)';
  31. if(stylg) 
  32.  stylg.backgroundImage='url(images/Bouton_Form_Gauche.gif)';
  33. if(styld) 
  34.  styld.backgroundImage='url(images/Bouton_Form_Droite.gif)';
  35. }
  37. //-->
  38. </script>
  39. [...]
  40. <div align="center" onmousedown="downBouton('g3','c3','d3');" onmouseup="upBouton('g3','c3','d3');" onmouseout="upBouton('g3','c3','d3');">
  41. <a href="http://localhost" class="gauche" id="g3"></a><a href="http://localhost" class="bouton" id="c3">VALIDER</a><a href="http://localhost" class="droite" id="d3"></a>
  42. </div>
  44. [...]
  45. a.bouton {
  46. display: inline;
  47.   color: white;
  48.   height : 20px;
  49.   background-image: url(../images/Bouton_Forme_Fond.gif);
  50.   background-repeat: repeat-x;
  51.   font-size: 11px;
  52.   font-family: Arial, Helvetica, sans-serif;
  53.   text-decoration: none;
  54.   #position:absolute;
  55.   text-align: top;
  56.   padding: 3px;
  57. }
  59. a.bouton:hover {
  60.   background-image: url(../images/Bouton_Forme_enfonce_Fond.gif);
  61. }
  63. .droite {
  64.   font-size: 11px;
  65.   height : 20px;
  66.   width: 20px;
  67.   background-image: url(../images/Bouton_Form_Droite.gif);
  68.   background-repeat: no-repeat;
  69.   text-decoration: none;
  70.   text-align: top;
  71.   padding: 3px;
  72. }
  74. .gauche {
  75.   text-decoration: none;
  76.   height : 20px;
  77.   width: 20px;
  78.   background-image: url(../images/Bouton_Form_Gauche.gif);
  79.   background-repeat: no-repeat;
  80.   font-size: 11px;
  81.   text-align: top;
  82.   padding: 3px;
  83. }

n°1213658
nato29
Posté le 03-10-2005 à 15:04:03  profilanswer
 

Up ;-)

n°1213663
gatsusat
Posté le 03-10-2005 à 15:10:21  profilanswer
 

on va faire simple :  
POURQUOI 3 images alors qu'une seule SUFFIT !!!! ???????
a {  
background: url(monimage.jpg) no-repeat;
padding:2px 6px;
}
a:hover,a:active {
background-image:url(monimagehover.jpg);
}

n°1213665
masklinn
í dag viðrar vel til loftárása
Posté le 03-10-2005 à 15:12:55  profilanswer
 

[:pingouino]
 
C'est bouleversifiant [:pingouino]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°1213685
plainsofpa​in
Pingouino's lover
Posté le 03-10-2005 à 15:29:31  profilanswer
 

http://test.roane-irkana.net/bouton_lien_style.html
 
Dingue ce qu'on peut faire sans tables et sans cochonneries :o
 
A mort les tables pour autre chose que l'affichage de données tabulaires ! A mort les gens qui utilisent les <div> comme les <tables> sans rien comprendre au principe !
 
PS : J'exagère mais si c'est pour utiliser les div à la place des tables, c'est pas utile d'avoir changé, vu que ton code est crade aussi ...
 
Va voir les premiers liens de ma signature pour plus d'infos :)


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
n°1213713
nato29
Posté le 03-10-2005 à 15:58:03  profilanswer
 

PQ un bouton avec 3 elements car tout simplement je re-utilise ce code pour tous les boutons. Il faut que le bouton suive la taille du libelle.
 
ca y ai j'ai la soluce :
 
Le code XHTML

Code :
  1. <div class="bouton" onmousedown="buttonDown(this);" onmouseup="buttonUp(this);" onmouseover="overlib('toto');" onmouseout="buttonUp(this); nd();" onclick="">
  2. <div class="g"></div>
  3. <div class="c">VALIDER</div>
  4. <div class="d"></div>
  5. </div>


 
Le code CSS  

Code :
  1. .bouton {
  2. cursor: pointer;
  3. cursor: hand;
  4. }
  5.  
  6.  
  7. .g {
  8.     background: url("images/gauche.gif" ) no-repeat left;
  9.  float: left;
  10.  width: 9px;
  11.  height: 20px;
  12.  margin: 0;
  13.  padding: 0;
  14. }
  16. .gb {
  17.     background: url("images/enfonce_gauche.gif" ) no-repeat left;
  18.  float: left;
  19.  width: 9px;
  20.  height: 20px;
  21.  margin: 0;
  22.  padding: 0;
  23. }
  25. .d {
  26.     background: url("images/droite.gif" ) no-repeat top right;
  27.  width: 9px;
  28.  height: 20px;
  29.  margin: 0 5px 0 0;
  30.  padding: 0 0px 0 0;
  31.  float: left;
  32. }
  35. .db {
  36.     background: url("images/enfonce_droite.gif" ) no-repeat top right;
  37.  width: 9px;
  38.  height: 20px;
  39.  margin: 0 5px 0 0;
  40.  padding: 0 0px 0 0;
  41.  float: left;
  42. }
  44. .c {
  45.     color: White;
  46.     text-decoration: none;
  47.     background: url("images/fond.gif" ) repeat-x;
  48.     height: 20px;
  49.     margin: 0 0 0 0;
  50.     padding: 2px 0 0 0;
  51.     font-weight: normal;
  52.     font-size: 11px;
  53.     font-family: Arial, Helvetica, sans-serif;
  54. float: left;
  55. }
  57. .cb {
  58.     color: White;
  59.     text-decoration: none;
  60.     background: url("images/enfonce_fond.gif" ) repeat-x;
  61.     height: 20px;
  62.     margin: 0 0 0 0;
  63.     padding: 2px 0 0 0;
  64.     font-weight: normal;
  65.     font-size: 11px;
  66.     font-family: Arial, Helvetica, sans-serif;
  67. float: left;
  68. }


 
Le code Js pour le comportement d'un bouton

Code :
  1. // Gestion des boutons
  2. function buttonDown(button) {
  3. for (i = 0; i < button.childNodes.length; i++)
  4. {
  5.  switch(button.childNodes[i].className) {
  6.   case 'g':
  7.    button.childNodes[i].className = 'gb';
  8.    break;
  9.   case 'c':
  10.    button.childNodes[i].className = 'cb';
  11.    break;
  12.   case 'd':
  13.    button.childNodes[i].className = 'db';
  14.    break;
  15.  }
  16. }   
  17. }
  19. function buttonUp(button) {
  20. for (i = 0; i < button.childNodes.length; i++)
  21. {
  22.  switch(button.childNodes[i].className) {
  23.   case 'gb':
  24.    button.childNodes[i].className = 'g';
  25.    break;
  26.   case 'cb':
  27.    button.childNodes[i].className = 'c';
  28.    break;
  29.   case 'db':
  30.    button.childNodes[i].className = 'd';
  31.    break;
  32.  }
  33. } 
  34. }

Message cité 1 fois
n°1213730
plainsofpa​in
Pingouino's lover
Posté le 03-10-2005 à 16:10:36  profilanswer
 
n°1213806
nato29
Posté le 03-10-2005 à 17:19:36  profilanswer
 

plainsofpain a écrit :

OMG [:pingouino]


je suis ouvert a toute proposition. Si tu as mieux pour avoir le meme resultat je suis preneur.

mood
Publicité
Posté le 03-10-2005 à 17:19:36  profilanswer
 

n°1213873
plainsofpa​in
Pingouino's lover
Posté le 03-10-2005 à 19:02:59  profilanswer
 

Je me demande pourquoi tu t'acharnes avec du js pour faire le rollover :o


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
n°1213877
masklinn
í dag viðrar vel til loftárása
Posté le 03-10-2005 à 19:04:22  profilanswer
 

nato29 a écrit :

PQ un bouton avec 3 elements car tout simplement je re-utilise ce code pour tous les boutons. Il faut que le bouton suive la taille du libelle.


Mais c'est stupide comme justification [:pingouino]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
n°1214128
gatsusat
Posté le 04-10-2005 à 10:15:39  profilanswer
 

tiens mon petit, voila une reponse toute simple :  
 
avec une seule image et sans code javascript je fais le rollover
 
cette image ressemble à ca :  
http://gatsu.ftp.free.fr/html/testbouton/fondbouton.png
c'est une seule et même image
 
et le code : (je colle une page HTML entiere (code HTML et CSS)
Ca à l'air d'un gros bordel comme ca, mais j'ai utilisé les defaut des IE, mais comme FF est presque sans défauts pour les standards, j'ai utilisé les pseudos-éléments :after et :before
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <style>
  7. a.bouton, a.bouton * {
  8.  background-image: url(fondbouton.png);
  9.  background-repeat: no-repeat;
  10. }
  11. a.bouton {
  12.  /*Pour Tout les navigateurs*/
  13.  text-decoration: none; /*On vire l'effet souligné*/
  14.  /*Pour les vrais navigateurs*/
  15.  background-position:  center top;
  16.  /*Pour IE (hack IE ou on reecrit certaines propriétés*/
  17.  _background-position: left top; /*On lui assigne l'image de fond, en haut a gauche*/
  18.  _display:inline-block;
  19.  _width:20px;
  20.  _line-height: 20px;/*Hauteur de ligne pour centrer le texte verticalement*/
  21. }
  22. /*Ne marche que sous les vrais navigateurs*/
  23. a.bouton:before { content: ""; background:  url(fondbouton.png) no-repeat left top; width:15px;padding-left:15px;}
  24. a.bouton:after { content: "" ; background:  url(fondbouton.png) no-repeat right top; width:15px;padding-right:15px;}
  26. a.bouton span{
  27.  /*Pour Tout les navigateurs*/
  28.  color:white;
  29.  font: 10px Verdana;
  30.  background:none;
  31.  /*Pour IE*/
  32.  _background: url(fondbouton.png) no-repeat right top; /*On lui assigne l'image de fond, en haut a droite*/
  33.  _display:block; /*display block afin qu'il prenne toute la largeur par defaut*/
  34.  _margin-left:15px; /*Marge minimal gauche de 15 pixels afin d'afficher le bord rond sur le block A*/
  35.  _height:20px; /*hauteur*/
  36.  _line-height: 20px;/*Hauteur de ligne pour centrer le texte verticalement*/
  37.  _vertical-align: middle; /*centrage vertical*/
  38.  _padding-right:15px;/*Margin interieure droite afin que le texte n'aille pas trop au bord*/
  39.  _white-space:nowrap; /*On force le texte à rester sur une ligne, ca permet au passage d'élargir les blocs*/
  40. }
  42. /*Effet Hover*/
  43. a.bouton:hover, a.bouton:hover span { cursor: pointer; }/*On corrige le curseur doigt, apparament il disparait a cause du span*/
  45. a.bouton:hover span {background-position: right bottom;}
  46. a.bouton:hover:before {background-position: left bottom;}
  47. a.bouton:hover:after {background-position: right bottom;}
  48. a.bouton:hover {background-position: left bottom; }/*On affiche le fond a partir du bas (image hover)*/
  50. </style>
  51. </head>
  52. <body>
  54. <a href="#" class="bouton"><span>Ok</span></a>
  55. <a href="#" class="bouton"><span>Text ultra supra mega long qui nique tout</span></a>
  57. </body>
  58. </html>


 
On a peut etre un code lourd au niveau des CSS, mais il ne sera téléchargé qu'une seule fois.
Et au final on garde un code HTML propre, et pas tout pourri comme tu l'as fait
 
pour avoir le code commenté, il suffit d'afficher le code source de la page suivante
un exemple est visible ici : http://gatsu.ftp.free.fr/html/testbouton/bouton.html


Message édité par gatsusat le 04-10-2005 à 11:01:39
n°1214167
gatsusat
Posté le 04-10-2005 à 11:02:23  profilanswer
 

up!
Partie CSS sans commentaires (c'est plus lisible :D)
 

Code :
  1. a.bouton, a.bouton * {
  2.  background-image: url(fondbouton.png);
  3.  background-repeat: no-repeat;
  4. }
  5. a.bouton {
  6.  /*Pour Tout les navigateurs*/
  7.  text-decoration: none;
  8.  /*Pour les vrais navigateurs*/
  9.  background-position:  center top;
  10.  /*Pour IE (hack IE ou on reecrit certaines propriétés*/
  11.  _background-position: left top;
  12.  _display:inline-block;
  13.  _width:20px;
  14.  _line-height: 20px;
  15. }
  16. /*Ne marche que sous les vrais navigateurs*/
  17. a.bouton:before { content: ""; background:  url(fondbouton.png) no-repeat left top; width:15px;padding-left:15px;}
  18. a.bouton:after { content: "" ; background:  url(fondbouton.png) no-repeat right top; width:15px;padding-right:15px;}
  20. a.bouton span{
  21.  /*Pour Tout les navigateurs*/
  22.  color:white;
  23.  font: 10px Verdana;
  24.  background:none;
  25.  /*Pour IE*/
  26.  _background: url(fondbouton.png) no-repeat right top;
  27.  _display:block;
  28.  _margin-left:15px;
  29.  _height:20px;
  30.  _line-height: 20px;
  31.  _vertical-align: middle;
  32.  _padding-right:15px;
  33.  _white-space:nowrap;
  34. }
  36. /*Effet Hover*/
  37. a.bouton:hover, a.bouton:hover span { cursor: pointer; }
  39. a.bouton:hover span {background-position: right bottom;}
  40. a.bouton:hover:before {background-position: left bottom;}
  41. a.bouton:hover:after {background-position: right bottom;}
  42. a.bouton:hover {background-position: left bottom; }


Message édité par gatsusat le 04-10-2005 à 11:09:58
n°1214243
sircam
I Like Trains
Posté le 04-10-2005 à 12:08:27  profilanswer
 

Plus fondamentalement, les boutons sous forme d'image... NO GOOD. Et généralement tout ce qui est sous forme d'image / de Flash pour la navigation.
 
Par pitié.
 
My two cents. [:pingouino]


---------------
Now Playing: {SYNTAX ERROR AT LINE 1210}
n°1214251
nato29
Posté le 04-10-2005 à 12:13:49  profilanswer
 

ok dac !
j'ai bien note ton exemple !
 
mais comment fait ton en CSS pour l'evement keypress ?
c a d que je voudrais avoir le rollover que lorsque l'on clique sur le bouton


Message édité par nato29 le 04-10-2005 à 12:20:29
n°1214263
Beral2
Posté le 04-10-2005 à 12:22:50  profilanswer
 

Bon, si j'ai bien compris, les 3 images c'est parce que 3 boutons (en fait cela ne se voit que très mal sur ton 2ème post (faudrait séparer visuellement les (précédent/index/suivant" ).
 
Pas besoin de javascript mais de 3 images contenant chacune la version "normale" et la version "rollover", à mettre en image de background et à décaler en hover.
Pas besoin de Div (ou une seule pour séparer la nav du reste). Des "a" à la suite suffisent.

n°1214264
plainsofpa​in
Pingouino's lover
Posté le 04-10-2005 à 12:24:56  profilanswer
 

nato29 > remplace les :hover par des :active dans le css de gatsu et t'auras plus d'effet au survol mais au clic.

Message cité 1 fois

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
n°1214267
nato29
Posté le 04-10-2005 à 12:28:40  profilanswer
 

plainsofpain a écrit :

nato29 > remplace les :hover par des :active dans le css de gatsu et t'auras plus d'effet au survol mais au clic.


ok merci,
 
....
mais ca marche pas


Message édité par nato29 le 04-10-2005 à 12:30:19
n°1214272
gatsusat
Posté le 04-10-2005 à 12:30:44  profilanswer
 

la pseudoclasse :active n'est valable que pour les éléments A et non les éléments <span> et autres et si vous testez ca ne marchera pas.
 
Alors soit on fait dans le bloat, mais ca pourrai fonctionner mais alors on va partir loin dans la folie.


Message édité par gatsusat le 04-10-2005 à 12:30:58
n°1214274
plainsofpa​in
Pingouino's lover
Posté le 04-10-2005 à 12:32:20  profilanswer
 

http://test.roane-irkana.net/bouton_lien_style.html
 
L'effet au moment ou tu appuies est fait par active. Si ton navigateur le supporte pas, c'est pas ma faute :o


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
n°1214287
nato29
Posté le 04-10-2005 à 12:40:15  profilanswer
 

ouia mais il me faut un code portable sur l'ensemble des browsers
ca marche sous FF/Opera 8.5/netscape 8


Message édité par nato29 le 04-10-2005 à 12:43:46
n°1214290
plainsofpa​in
Pingouino's lover
Posté le 04-10-2005 à 12:42:09  profilanswer
 

Sur IE il n'y aura pas l'effet au clic, mais comme ca dure 3 dixième de secondes c'est stupide de faire des montagnes de code juste pour ça :o
 
Et sous tous les autres navigateurs (sauf ceux qui sont des surcouches basées sur IE comme avant browser ou maxthon), t'auras l'effet au clic.


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
n°1214304
gatsusat
Posté le 04-10-2005 à 12:53:28  profilanswer
 

un effet hover avec la souris en forme de doigt, c'est plus explicite pour 99,99% des utilisateurs, qu'un bouton qui fait rien du tout lors du survol de la souris. surtout que l'effet active il sert pas à grand chose, puisque lorsque tu clique ta page se barre aussitot pour etre changée par une autre.

n°1214305
plainsofpa​in
Pingouino's lover
Posté le 04-10-2005 à 12:55:25  profilanswer
 

Bah il peut aussi mettre le css pour un effet au survol, mais ce que je comprend pas c'est pourquoi il s'acharne à vouloir du js pour avoir un effet très peu visible sur un seul navigateur :o


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
n°1214314
gatsusat
Posté le 04-10-2005 à 13:15:42  profilanswer
 

pour faire bloat

n°1214379
nato29
Posté le 04-10-2005 à 14:05:27  profilanswer
 

mais qu'est ce qui vous fait croire que je foutre absoluement du JS !
j'suis pas un fan de JS, et moins j'en ai mieux je me porte !
je cherche juste avoir un lien qui se comporte comme un boutton sur un max de navigateur.
Je dois pas etre le seul a vouloir un tel comportement.

n°1214382
plainsofpa​in
Pingouino's lover
Posté le 04-10-2005 à 14:07:37  profilanswer
 

Non, mais l'effet au clic du bouton perso je fais pas gaffe
 
L'effet au survol est plus expressif :o


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
n°1214391
nato29
Posté le 04-10-2005 à 14:16:44  profilanswer
 

toi tu fait peut etre pas gaffe, car t'as l'habitude et tu sais comment ca marche mais pour un utilisateur lambda si ca n'a pas le meme comportement, ca le bloque et apres il te fait un caca nerveux d'1h pour avoir ce putain d'effet a la con qui sert a rien et qu'il faut ce faire chier pour le faire !

n°1214394
plainsofpa​in
Pingouino's lover
Posté le 04-10-2005 à 14:17:44  profilanswer
 

Avec un effet de survol, ca m'étonnerait qu'il sache pas que c'est un bouton :o


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
n°1214454
nato29
Posté le 04-10-2005 à 14:46:06  profilanswer
 

je vais encore rajouter une couche, mais bon au point ou j'en suis :
 
Je souhaite afficher un tableau avec ascenseur, mais en gardant l'entete du tableau hors de l'ascenseur, le pb c'est que dans ce cas je perds mon alignement entre l'entete et le corps du tableau
 

Code :
  1. <table cellpadding="2" cellspacing="1" id="tableau4" border="1">
  2. <thead>
  3.    <tr>
  4.     <th width="33%" id="nom">NOM</a></th>
  5.     <th width="33%" id="prenom">PRENOM</th>
  6.     <th width="33%" id="mail"> MAIL </th>
  7.    </tr>
  9.        </thead>
  10.  <tbody style="overflow: auto; height: 70px">
  11.   <tr>
  12.    <td style="width:33%;" headers="nom">TITI</td>
  13.    <td style="width:33%;" headers="prenom">toto</td>
  14.    <td style="width:33%;" headers="mail">mail@adresse.com</td>
  15.   </tr>
  16.   <tr>
  17.    <td style="width:33%;" headers="nom">Moreau</td>
  18.    <td style="width:33%;" headers="prenom">Jeanne</td>
  19.    <td style="width:33%;" headers="mail">titi@tata.com</td>
  20.   </tr>
  21.   <tr>
  22.    <td style="width:33%;" headers="nom">Minus</td>
  23.    <td style="width:33%;" headers="prenom">Cortex</td>
  24.    <td style="width:33%;" headers="mail">minux@warner.com</td>
  25.   </tr>
  26.   <tr>
  27.    <td style="width:33%;" headers="nom">Olivier</td>
  28.    <td style="width:33%;" headers="prenom">Mine</td>
  29.    <td style="width:33%;" headers="mail">olivier@interville.com</td>
  30.   </tr>
  31.   <tr>
  32.    <td style="width:33%;" headers="nom">H</td>
  33.    <td style="width:33%;" headers="prenom">Bombe</td>
  34.    <td style="width:33%;" headers="mail">bomb@h.com</td>
  35.   </tr>
  36.   <tr>
  37.    <td style="width:33%;" headers="nom">More</td>
  38.    <td style="width:33%;" headers="prenom">Oiseau</td>
  39.    <td style="width:33%;" headers="mail">titi</td>
  40.   </tr>
  41.  </tbody>
  42. </table>


 
le pb c'est que cela ne passe que sur les navigateurs Gecko ! et pas sur les autres.
Vous avez des idees ?


Message édité par nato29 le 04-10-2005 à 16:17:53
n°1214877
nato29
Posté le 04-10-2005 à 18:51:10  profilanswer
 
mood
Publicité
Posté le   profilanswer
 


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

  [TABLE/CSS] Tableau avec ascenseur !

 

Sujets relatifs
tableau htmlVariable PHP fait exploser un tableau :(
delete[] & tableau de pointeurs[c] recuperer infos sur la table de routage
Redimensionnement, CSS & JavaScript ;)CSS : positionner une image ou un bloc en bas d'un autre bloc
Css, séparer une boite en 2, imbrication ?comment transformer un fichier xml en un tableau
[CSS] IE n'aime pas mon code...sql tableau
Plus de sujets relatifs à : [TABLE/CSS] Tableau avec ascenseur !

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.179 secondes

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