ayuda con imagen en html

Tema destacado: Sigue las noticias más importantes de elhacker.net en twitter!

Foro de elhacker.net

Programación

Desarrollo Web

ayuda con imagen en html

0 Usuarios y 1 Visitante están viendo este tema.

Páginas: [1]

Autor

Tema: ayuda con imagen en html (Leído 400 veces)

young0320

Desconectado

Mensajes: 27

ayuda con imagen en html

« en: 15 Enero 2012, 01:52 »

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:

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


	En línea

drvy | BSM

Desconectado

Mensajes: 1.129

badstupidmonkey

Re: ayuda con imagen en html

« Respuesta #1 en: 15 Enero 2012, 02:01 »

Hola, no veo nada raro.

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

Saludos


	En línea

young0320

Desconectado

Mensajes: 27

Re: ayuda con imagen en html

« Respuesta #2 en: 15 Enero 2012, 02:16 »

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:

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%}


	En línea

drvy | BSM

Desconectado

Mensajes: 1.129

badstupidmonkey

Re: ayuda con imagen en html

« Respuesta #3 en: 15 Enero 2012, 02:22 »

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

padding:10px;

Código

display:block;

El css resultante sera:

Código

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 :silbar:

Saludos


« Última modificación: 15 Enero 2012, 02:31 por drvy \| BSM »	En línea

young0320

Desconectado

Mensajes: 27

Re: ayuda con imagen en html

« Respuesta #4 en: 15 Enero 2012, 02:28 »

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


	En línea

Páginas: [1]

Ir a:

Mensajes similares
	Asunto	Iniciado por	Respuestas	Vistas	Último mensaje
	HTML+IMAGEN+BOTON Desarrollo Web	NeRoFiLo	2	403	24 Marzo 2005, 06:37 por MinusFour
	ayuda con imagen en Html Desarrollo Web	scrngs	4	330	2 Octubre 2005, 21:44 por Leoj90
	Extraer url de imagen en codigo html PHP	octavioxd	2	2,037	14 Julio 2010, 20:54 por Shell Root
	Duda imagen HTML Desarrollo Web	Lecram	2	535	3 Agosto 2011, 07:58 por bomba1990
	Recortar o seleccionar una sección de una imagen en HTML Desarrollo Web	rolomo	3	547	8 Febrero 2012, 02:58 por rolomo