Foros del Web » Creando para Internet » CSS »

Como estan haciendo esta tabla?

Estas en el tema de Como estan haciendo esta tabla? en el foro de CSS en Foros del Web. Hola, quiero replicar esto que tienen en esta web. Es una quiniela. http://www.sorteos.es/quiniela-de-futbol/ No entiendo como hacen el efecto de darle a cada columna un ...
  #1 (permalink)  
Antiguo 10/11/2010, 17:45
Avatar de triqui  
Fecha de Ingreso: diciembre-2008
Ubicación: Zaragoza(España)
Mensajes: 624
Antigüedad: 15 años, 3 meses
Puntos: 31
Como estan haciendo esta tabla?

Hola, quiero replicar esto que tienen en esta web. Es una quiniela.

http://www.sorteos.es/quiniela-de-futbol/

No entiendo como hacen el efecto de darle a cada columna un hover, que pasas por las columnas y se cambian de color...pero no es un hover, porque hago click derecho para ver la imagen...y no es una imagen...es un estilo, eso esta hecho con javascript + css?


Segun los inputs utiliza un tipo text... porque no utiliza <img> si yo veo imagenes o son css...

Tambien veo en su codigo mas abajo como que utiliza <map>...puede ser que utilize eso para hacer lo de las secciones.... podeis arrojarme un poco de luz para entenderlo..esta utilizando jquery + javascript...



este es el codigo de los inputs que tiene para crear esa quiniela.



Código HTML:
Ver original
  1. <tr>
  2.  
  3. <td>
  4.     <table>
  5.    
  6.     <tr>
  7.     <td>
  8.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row0a">
  9.     </td>
  10.     <td>
  11.  
  12.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row0b">
  13.     </td>
  14.     <td>
  15.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row0c">
  16.     </td>
  17.     </tr>
  18.    
  19.     <tr>
  20.     <td>
  21.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row1a">
  22.  
  23.     </td>
  24.     <td>
  25.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row1b">
  26.     </td>
  27.     <td>
  28.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row1c">
  29.     </td>
  30.     </tr>
  31.    
  32.     <tr>
  33.  
  34.     <td>
  35.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row2a">
  36.     </td>
  37.     <td>
  38.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row2b">
  39.     </td>
  40.     <td>
  41.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row2c">
  42.     </td>
  43.  
  44.     </tr>
  45.    
  46.     <tr>
  47.     <td>
  48.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row3a">
  49.     </td>
  50.     <td>
  51.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row3b">
  52.     </td>
  53.     <td>
  54.  
  55.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row3c">
  56.     </td>
  57.     </tr>
  58.    
  59.     <tr>
  60.     <td>
  61.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row4a">
  62.     </td>
  63.     <td>
  64.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row4b">
  65.  
  66.     </td>
  67.     <td>
  68.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row4c">
  69.     </td>
  70.     </tr>
  71.    
  72.     <tr>
  73.     <td>
  74.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row5a">
  75.     </td>
  76.  
  77.     <td>
  78.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row5b">
  79.     </td>
  80.     <td>
  81.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row5c">
  82.     </td>
  83.     </tr>
  84.    
  85.     <tr>
  86.     <td>
  87.  
  88.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row6a">
  89.     </td>
  90.     <td>
  91.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row6b">
  92.     </td>
  93.     <td>
  94.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row6c">
  95.     </td>
  96.     </tr>
  97.  
  98.    
  99.     <tr>
  100.     <td>
  101.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row7a">
  102.     </td>
  103.     <td>
  104.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row7b">
  105.     </td>
  106.     <td>
  107.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row7c">
  108.  
  109.     </td>
  110.     </tr>
  111.    
  112.     <tr>
  113.     <td>
  114.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row8a">
  115.     </td>
  116.     <td>
  117.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row8b">
  118.     </td>
  119.  
  120.     <td>
  121.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row8c">
  122.     </td>
  123.     </tr>
  124.    
  125.     <tr>
  126.     <td>
  127.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row9a">
  128.     </td>
  129.     <td>
  130.  
  131.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row9b">
  132.     </td>
  133.     <td>
  134.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row9c">
  135.     </td>
  136.     </tr>
  137.    
  138.     <tr>
  139.     <td>
  140.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row10a">
  141.  
  142.     </td>
  143.     <td>
  144.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row10b">
  145.     </td>
  146.     <td>
  147.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row10c">
  148.     </td>
  149.     </tr>
  150.    
  151.     <tr>
  152.  
  153.     <td>
  154.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row11a">
  155.     </td>
  156.     <td>
  157.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row11b">
  158.     </td>
  159.     <td>
  160.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row11c">
  161.     </td>
  162.  
  163.     </tr>
  164.    
  165.     <tr>
  166.     <td>
  167.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row12a">
  168.     </td>
  169.     <td>
  170.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row12b">
  171.     </td>
  172.     <td>
  173.  
  174.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row12c">
  175.     </td>
  176.     </tr>
  177.    
  178.     <tr>
  179.     <td>
  180.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row13a">
  181.     </td>
  182.     <td>
  183.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row13b">
  184.  
  185.     </td>
  186.     <td>
  187.     <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row13c">
  188.     </td>
  189.     </tr>
  190.    
  191.     </table>
  192. </td>
  193.  
  194. </tr>
__________________
La nueva red social de quinielas quiniela resultados
Cazaresultados Futbol base en directo

Última edición por triqui; 10/11/2010 a las 17:51
  #2 (permalink)  
Antiguo 12/11/2010, 09:58
 
Fecha de Ingreso: agosto-2010
Mensajes: 156
Antigüedad: 13 años, 7 meses
Puntos: 1
Respuesta: Como estan haciendo esta tabla?

Una vez hice algo similar y simplemente seria que cada cuadro gris es un LI, el cual tiene fondo gris y un hover blanco. Claramente flotando hacia la derecha.

Saludos
  #3 (permalink)  
Antiguo 15/11/2010, 10:52
Avatar de triqui  
Fecha de Ingreso: diciembre-2008
Ubicación: Zaragoza(España)
Mensajes: 624
Antigüedad: 15 años, 3 meses
Puntos: 31
Respuesta: Como estan haciendo esta tabla?

Cita:
Iniciado por rodomiro Ver Mensaje
Una vez hice algo similar y simplemente seria que cada cuadro gris es un LI, el cual tiene fondo gris y un hover blanco. Claramente flotando hacia la derecha.

Saludos
Cada cuadro gris?? te refieres a las columnas?,...no veo ningun cuadro gris..
__________________
La nueva red social de quinielas quiniela resultados
Cazaresultados Futbol base en directo
  #4 (permalink)  
Antiguo 15/11/2010, 14:00
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 9 meses
Puntos: 641
Respuesta: Como estan haciendo esta tabla?

Creo que se confundio, el hablaba de el menu gris, y yo veo que hablas de las columnas naranjas de la quiniela, bueno yo creo que es javascript, por no decir estoy seguro, busca informacion de GetElementById y eso, para manejar el css desde javascript. :D
  #5 (permalink)  
Antiguo 15/11/2010, 17:26
Avatar de Dansolo  
Fecha de Ingreso: junio-2007
Mensajes: 16
Antigüedad: 16 años, 9 meses
Puntos: 1
Respuesta: Como estan haciendo esta tabla?

Desglozando su codigo fuente :

Es una imagen y encima mapearon ( etiqueta <map> ) por coordenadas , y el efecto hover con javascript para cada columna


<map id="blocksMap" name="blocksMap">
<area class="blockSelect" href="javascript:void(0)" shape="rect" coords="211,0,269,229">
<area class="blockSelect" href="javascript:void(0)" shape="rect" coords="269,0,327,229"><area class="blockSelect" href="javascript:void(0)" shape="rect" coords="327,0,385,229">
<area class="blockSelect" href="javascript:void(0)" shape="rect" coords="385,0,443,229">
<area class="blockSelect" href="javascript:void(0)" shape="rect" coords="443,0,501,229">
<area class="blockSelect" href="javascript:void(0)" shape="rect" coords="501,0,559,229">
<area class="blockSelect" href="javascript:void(0)" shape="rect" coords="559,0,617,229">
<area class="blockSelect" href="javascript:void(0)" shape="rect" coords="617,0,675,229"></map>
  #6 (permalink)  
Antiguo 15/11/2010, 18:43
Avatar de triqui  
Fecha de Ingreso: diciembre-2008
Ubicación: Zaragoza(España)
Mensajes: 624
Antigüedad: 15 años, 3 meses
Puntos: 31
Respuesta: Como estan haciendo esta tabla?

Es lo que sospechaba,...habia visto elemenos map dentro de su codigo, pero no estaba realmente convencido de ello.

gracias !
__________________
La nueva red social de quinielas quiniela resultados
Cazaresultados Futbol base en directo

Etiquetas: tablas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:30.