CSS - Efecto estraño con css

   
Vista:

Efecto estraño con css

Publicado por mblascog (3 intervenciones) el 23/01/2013 17:12:38
Buenas,
Tengo una tabla. En cada celda visualizo una imagen con un borde delgado y un texto. Por css, implemento que al pasar por encima de una celda con el ratón,, el borde de la imágen sea más grande. Pero se da un efecto de movimiento que no me gusta. En el siguiente enlace se puede ver un ejemplo de lo que digo:
http://www.tepui.cat/cumer/enllacos.html

El código css es:
1
2
3
4
5
6
7
.taulaEnllacos  {width:1000px; height:500px; margin: 0px 0px 0px 0px; border:0px; }
.cellaEnllacos td {width:250px;  text-align: center; }
.cellaEnllacos td img { border: 1px solid #E87513 }
.cellaEnllacos td img:hover { border: 4px solid #E87513 }
.cellaEnllacos td a {font: 0.8em 'trebuchet MS', Arial, Helvetica; color: #000; }
.cellaEnllacos td a:hover {color: #000000; } 
.cellaEnllacos td a:visited {color: #000000; }


Y el código HTML és:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<table class=taulaEnllacos>
							<tr class="cellaEnllacos">
								<td><a href=http://www.herockworkwear.com/en/><img src='images/WebHerock.png' width='210' height='150'/></a><br/>
								    <a href=http://www.herockworkwear.com/en/>HEROCK® WORKWEAR</a>
								</td>
								<td><a href=http://www.roly.es/default.aspx/><img src='images/WebRoly.png' width='210' height='150'/></a><br/>
								    <a href=http://www.roly.es/default.aspx/>ROLY</a>
								</td>
								<td><a href=http://www.job-wear.com/anunciante/1_215/><img src='images/WebJobWear.png' width='210' height='150'/></a><br/>
								    <a href=http://www.job-wear.com/anunciante/1_215/>JOB WEAR - Magazine</a>
								</td>
								<td><a href=http://www.proteccion-laboral.com/ediciones/><img src='images/WebProteccionLaboral.png' width='210' height='150'/></a><br/>
								    <a href=http://www.proteccion-laboral.com/ediciones/>PROTECCI&Oacute; LABORAL – Magazine</a>
								</td>
							</tr>
							<tr class="cellaEnllacos">
								<td><a href=http://www.seguridad-e-higiene.com.ar/><img src='images/WebSeguridad.png' width='210' height='150'/></a><br/>
								    <a href=http://www.seguridad-e-higiene.com.ar/>SEGURIDAD E HIGIENE – Informaci&oacute;</a>
								</td>
								<td>&nbsp</td>
								<td>&nbsp</td>
								<td>&nbsp</td>
							</tr>
						</table>


Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Efecto estraño con css

Publicado por xve (349 intervenciones) el 23/01/2013 21:32:33
Hola, atetodo te agradezco que hayas puesto todo el codigo...

Creo que la solucion es sencilla, simplemente añadele un border blanco... de esta manera, unicamente cambias el color del borde al pasar el mouse por encima
1
.cellaEnllacos td img { border: 1px solid #E87513;border: 4px solid #fff;}

Espero que te sirva... coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Efecto estraño con css

Publicado por mblascog (3 intervenciones) el 23/01/2013 22:27:14
Gracias por tu respuesta Es una posible solución, aunque me gustaría tal como lo tengo planteado.
Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Efecto estraño con css

Publicado por xve (349 intervenciones) el 24/01/2013 07:10:33
Es que si agrandas una anchura de un borde, por algún otro lugar tienes que restarle esos píxeles, sino, siempre se te desplazarán el resto de capas.

Si encuentras otra manera, te agradecería que nos lo comentaras...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Efecto estraño con css

Publicado por mblascog (3 intervenciones) el 24/01/2013 17:29:13
Gracias por responder. Es verdad que agradando el tamaño de la imagen si incremento el borde. Pero resulta que esta imagen está dentro de una celda de tamaño superior, por lo que me da la sensación que no debería producirse dicho movimiento.
Me equivoco?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar