ayuda con imagen en html

[young0320]

Buenas,

Estoy haciendo mi primera página estática con html, css y js. Entonces quiero mostrar una imagen que al hacerle click se abra en una nueva ventana esa misma imagen. Para ello he puesto el código que indico a continuación

Código [Seleccionar] Expandir

<p><a href="http://www.../motogp1.jpg" target="_blank"><img src="velocidad/images/motogp/motogp1.jpg" width="380px" height="180px"></a></p>

Con esto el resultado es positivo pero no completamente, debido a que el link se me sale de la imagen, es decir si hago click a la derecha o izquierda de la imagen pero fuera de la misma pues también se me abre.

A ver si alguien puede hacer el favor de indicarme qué sucede o alguna pista para apañarlo,

Muchas gracias

[#!drvy]

Hola, no veo nada raro.

Utilizas CSS ? Si es así, muéstranos lo para a ver que tienes puesto ahí.


Saludos

[young0320]

Te comento que he tomado una plantilla de los layout gala, es muy simple vienen con etiqueta style y yo he copiado el contenido en un css externo y lo he enlazado. El contenido del css es el siguiente

Código [Seleccionar] Expandir

html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
  padding-left:10px;background: #FF0000;color: #000000}
div#container{text-align:center}
div#content p{line-height:1.4}
div#navigation{background: #32CD32}
div#extra{background:#32CD32}
div#footer{background: #32CD32;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#container{width:1350px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-1350px}
div#extra{float:left;width:150px;margin-left:-150px}
div#footer{clear:left;width:100%}

[#!drvy]

Hola,

Al parecer, en el CSS el elemento a (enlace), tiene definida la propiedad padding como 10.

Eso significa, que todo elemento dentro de un enlace, llevara un margen en el cual tambien sera posible hacer click..

Adicionalmente, también tiene display:block;. Esto significa que pondrá todo enlace en una linea nueva, cosa que puede resultar problemática.


Para resolver esto, elimina lo siguiente  del elemento a en tu CSS.

Código (css) [Seleccionar] Expandir

padding:10px;

Código (css) [Seleccionar] Expandir

display:block;

El css resultante sera:

Código (css) [Seleccionar] Expandir

html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{color: #981793;}
div#header h1{height:80px;line-height:80px;margin:0;
 padding-left:10px;background: #FF0000;color: #000000}
div#container{text-align:center}
div#content p{line-height:1.4}
div#navigation{background: #32CD32}
div#extra{background:#32CD32}
div#footer{background: #32CD32;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#container{width:1350px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-1350px}
div#extra{float:left;width:150px;margin-left:-150px}
div#footer{clear:left;width:100%}


Edit: Correcciones hechas. Andaba un poco ido de la cabeza   

Saludos

[young0320]

Es lo que iba a comentarte, acabo de ver que el enlace es en esa línea completa, te lo agradezco mucho.

Lo que no entiendo es por que iba a querer alguien enlazar una línea completa, y sobre todo por defecto.

Muchas gracias,
Saludos