Foros del Web » Programando para Internet » Javascript »

div sobre una imagen

 Estas en el tema de div sobre una imagen en el foro de Javascript en Foros del Web. hola amigos estoy haciendo una galeria de imagenes [img=http://img232.imageshack.us/img232/5343/thmvq9.th.jpg] como puedo poner un div en el thumdnail en la parte de la esquina superior derecha ...
  #1 (permalink)  
Antiguo 12/10/2006, 14:39
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 20 años, 8 meses
Puntos: 21
Pregunta div sobre una imagen
hola amigos estoy haciendo una galeria de imagenes
[img=http://img232.imageshack.us/img232/5343/thmvq9.th.jpg]



como puedo poner un div en el thumdnail en la parte de la esquina superior derecha un div donde este una imagen de 16x16 indicando eliminacion
osea algo asi :


saludos espero sus comentarios

gracias
__________________
gerardo
  #2 (permalink)  
Antiguo 12/10/2006, 15:19
Avatar de reyesoft  
Fecha de Ingreso: abril-2006
Ubicación: San Rafael, Mendoza
Mensajes: 311
Antigüedad: 18 años
Puntos: 15
De acuerdo
¿podrías pasar el código HTML del div donde está la foto?

Así mismo intenté algo, cambia los valores hasta ajustar.

Código HTML:
<style type="text/css">
<!--
#contenedor 
{
    border:1px solid #333333;
    width:100px;;
    padding:5px;
    margin-left:200px;
}
#boton_eliminar 
{
    border:1px solid #FF0000;
    position:relative;
    width:20px;
    height: 21px;
    top:-80px;
    left:20px;
    margin-top:-40px;
    z-index:2;
}
-->
</style>
<div id="contenedor">
    <img src="thumb_foto.jpg" width="100" height="80">
    <img id="boton_eliminar" src="boton_eliminar.jpg" width="10" height="10">
</div>
Un saludo...
  #3 (permalink)  
Antiguo 12/10/2006, 16:51
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 20 años, 8 meses
Puntos: 21
pues mira aqui se imprimen las miniatura

<div id="contenedor">
<div class="alineamientos_fotos" id="1">
<script language="javascript">
document.write('<a href="img-000010.jpg" class="thickbox" rel="gallery-plants" title="imagen">');
document.write('<img src="prueba2.php?filename=img-000010.jpg&tiempo=054010&width=100&height=100" WIDTH="100" HEIGHT="100" VSPACE="8" class="thum" onmouseover="this.className=\'thum_sobre\';" onmouseout="this.className=\'thum_out\'" id="1thum">');
document.write('</a>');
document.write('<br>');
</script>
</div>
</div>


#contenedor
{
text-align:center;
margin:0 auto 0 auto;
}

.alineamientos_fotos
{
float: left;
margin:9px;
text-align:center;
border-style: solid;
border-color: #CCCCCC;
border-width: 1px;
}

.thum
{
background: #fff url('cargando.gif') no-repeat center center;
border-style: solid;
border-color: #9999CC;
border-width: 1px;
margin-left:9px;
margin-right:9px;
}


saludos probare tu codigo
gracias por responder y como podria buscar en san google
sobre esto como seria el tema
__________________
gerardo
  #4 (permalink)  
Antiguo 12/10/2006, 17:26
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 20 años, 8 meses
Puntos: 21
Pregunta
mira lo adapte a mis necesidades que opinas

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#contenedoruno
{
text-align:center;
margin:0 auto 0 auto;
}
#contenedor
{
border:1px solid #333333;
width:100px;;
padding:2px;
/* margin-left:100px;*/
}
#boton_eliminar
{
border:1px solid #FF0000;
position:relative;
width:20px;
height: 21px;
top:-100px;
left:40px;
margin-top:-40px;
z-index:2;
}
.alineamientos_fotos
{
float: left;
margin:9px;
text-align:center;
border-style: solid;
border-color: #CCCCCC;
border-width: 1px;
}
-->
</style>
</head>

<body>
<div id="contenedoruno">

<div class="alineamientos_fotos">
<div id="contenedor">
<img src="prueba2.php.jpg" width="100" height="100">
<img id="boton_eliminar" src="stop.png" width="10" height="10" onClick="alert('borrar')">
</div>
</div>

<div class="alineamientos_fotos">
<div id="contenedor">
<img src="prueba2.php.jpg" width="100" height="100">
<img id="boton_eliminar" src="stop.png" width="10" height="10" onClick="alert('borrar')">
</div>
</div>

</div>
</body>
</html>
__________________
gerardo
  #5 (permalink)  
Antiguo 12/10/2006, 17:36
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 20 años, 8 meses
Puntos: 21
buu solo hay un problema en condenado explorer me pone la imagen de borrado
mas arriba que firefox

que podre hacer para que cuando sea firefox tome cierto valor y cuando es explorer tome otro

aqui en esta class

#boton_eliminar
{
border:1px solid #FF0000;
position:relative;
width:20px;
height: 21px;
top:-100px;
left:40px;
margin-top:-40px;
z-index:2;
}

en el atributo
top:-100px; si es firefox

y

top:-80px; si es explorer

?? que puedo hacer

saludos
__________________
gerardo
  #6 (permalink)  
Antiguo 13/10/2006, 04:58
Avatar de reyesoft  
Fecha de Ingreso: abril-2006
Ubicación: San Rafael, Mendoza
Mensajes: 311
Antigüedad: 18 años
Puntos: 15
Chalchis, no hay forma de poner condiciones en CSS.

Pero te cuento cuál es el problema: el problema no es que uno mida de una forma y otro de otra.

Lo que pasa que para cada navegador hay valores predeterminado o a veces se desencadenan mal.

Por ejemplo, ambos toman el mismo margin, pero padding como no lo pusiste, firefox pone su predeterminado y explorer el suyo. Entonces es por eso que vos los ves corridos uno de otro.

Ahora pasemos a la solución del problema, siempre te recomiendo establecer todos los valores de padding y de margin.

cambiá:

margin-top:-40px;

por:

padding: 0px 0px 0px 0px;
margin: -40 0px 0px 0px;

Si el problema persiste, ponele al div la propiedad
background-color: #00DD00;
Al hacer eso, vas a ver que está corrido, si el padding, el margin o simplemente donde está anclado el div.

Si sigues sin poder solucionarlo, hacé una captura con el background establecido y postealo y te ayudo.

Saludos!
  #7 (permalink)  
Antiguo 13/10/2006, 10:13
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 20 años, 8 meses
Puntos: 21
Orale gracias men me sirvio
padding: 0px 0px 0px 0px;
margin: -40 0px 0px 0px;

y quedo asi look




Cita:
Iniciado por reyesoft Ver Mensaje
Chalchis, no hay forma de poner condiciones en CSS.

Pero te cuento cuál es el problema: el problema no es que uno mida de una forma y otro de otra.

Lo que pasa que para cada navegador hay valores predeterminado o a veces se desencadenan mal.

Por ejemplo, ambos toman el mismo margin, pero padding como no lo pusiste, firefox pone su predeterminado y explorer el suyo. Entonces es por eso que vos los ves corridos uno de otro.

Ahora pasemos a la solución del problema, siempre te recomiendo establecer todos los valores de padding y de margin.

cambiá:

margin-top:-40px;

por:

padding: 0px 0px 0px 0px;
margin: -40 0px 0px 0px;

Si el problema persiste, ponele al div la propiedad
background-color: #00DD00;
Al hacer eso, vas a ver que está corrido, si el padding, el margin o simplemente donde está anclado el div.

Si sigues sin poder solucionarlo, hacé una captura con el background establecido y postealo y te ayudo.

Saludos!
__________________
gerardo
  #8 (permalink)  
Antiguo 16/10/2006, 13:11
Avatar de chalchis  
Fecha de Ingreso: julio-2003
Mensajes: 1.773
Antigüedad: 20 años, 8 meses
Puntos: 21
proiblema
Hola reyesoft fijate quise hacer esto pero no me funciona me daje un espacio enorme en derecha de la imagen que sera


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<TITLE>Busqueda de Imagenes Publicadas</TITLE>
<META HTTP-EQUIV="Cache-Control" CONTENT ="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{margin:0;padding:0}
#wrapper{float:left;width:100%;}
#content{margin-left:200px;overflow:auto;}
#navigation{float:left;width:200px;margin-left:-100%;overflow: auto; background-color:#CCCCCC;}
#extra{clear:left;width:100%}

#contenedor
{
text-align:center;
margin:0 auto 0 auto;
}

.alineamientos_fotos
{
float: left;
margin:9px;
text-align:center;
border-style: solid;
border-color: #CCCCCC;
border-width: 1px;
}

.thum
{
background: #fff url('cargando.gif') no-repeat center center;
border-style: solid;
border-color: #9999CC;
border-width: 1px;
margin-left:9px;
margin-right:9px;
}


#contenedor_del
{
border:1px solid #333333;
width:100px;;
padding:5px;
margin-left:200px;
}
#boton_eliminar
{
border:1px solid #FF0000;
position:relative;
width:20px;
height: 21px;
top:-80px;
left:10px;
margin-top:-40px;
z-index:2;
}

</style>


</head>
<body class="body">
<div id="container">
<div id="wrapper">
<div id="content">
<form name="formulario" method="post" action="download_multiple.php" target="send">
<div id="contenedor">

<div class="alineamientos_fotos">
<div class="contenedor_del">
<a href="#">
<img src="prueba2.php.jpg" width="100" height="100" VSPACE="8" class="thum"></a>
<img id="boton_eliminar" src="del_thum.gif" width="16" height="16">
<br>
<input type="checkbox" name="down_imagen[]">
</div>
</div>

<div class="alineamientos_fotos">
<div class="contenedor_del">
<a href="#">
<img src="prueba2.php.jpg" width="100" height="100" VSPACE="8" class="thum"></a>
<img id="boton_eliminar" src="del_thum.gif" width="16" height="16">
<br>
<input type="checkbox" name="down_imagen[]">
</div>
</div>

<div class="alineamientos_fotos">
<div class="contenedor_del">
<a href="#">
<img src="prueba2.php.jpg" width="100" height="100" VSPACE="8" class="thum"></a>
<img id="boton_eliminar" src="del_thum.gif" width="16" height="16">
<br>
<input type="checkbox" name="down_imagen[]">
</div>
</div>

<div class="alineamientos_fotos">
<div class="contenedor_del">
<a href="#">
<img src="prueba2.php.jpg" width="100" height="100" VSPACE="8" class="thum"></a>
<img id="boton_eliminar" src="del_thum.gif" width="16" height="16">
<br>
<input type="checkbox" name="down_imagen[]">
</div>
</div>

<div class="alineamientos_fotos">
<div class="contenedor_del">
<a href="#">
<img src="prueba2.php.jpg" width="100" height="100" VSPACE="8" class="thum"></a>
<img id="boton_eliminar" src="del_thum.gif" width="16" height="16">
<br>
<input type="checkbox" name="down_imagen[]">
</div>
</div>

<div class="alineamientos_fotos">
<div class="contenedor_del">
<a href="#">
<img src="prueba2.php.jpg" width="100" height="100" VSPACE="8" class="thum"></a>
<img id="boton_eliminar" src="del_thum.gif" width="16" height="16">
<br>
<input type="checkbox" name="down_imagen[]">
</div>
</div>

<div class="alineamientos_fotos">
<div class="contenedor_del">
<a href="#">
<img src="prueba2.php.jpg" width="100" height="100" VSPACE="8" class="thum"></a>
<img id="boton_eliminar" src="del_thum.gif" width="16" height="16">
<br>
<input type="checkbox" name="down_imagen[]">
</div>
</div>

<div class="alineamientos_fotos">
<div class="contenedor_del">
<a href="#">
<img src="prueba2.php.jpg" width="100" height="100" VSPACE="8" class="thum"></a>
<img id="boton_eliminar" src="del_thum.gif" width="16" height="16">
<br>
<input type="checkbox" name="down_imagen[]">
</div>
</div>

<div class="alineamientos_fotos">
<div class="contenedor_del">
<a href="#">
<img src="prueba2.php.jpg" width="100" height="100" VSPACE="8" class="thum"></a>
<img id="boton_eliminar" src="del_thum.gif" width="16" height="16">
<br>
<input type="checkbox" name="down_imagen[]">
</div>
</div>

<div class="alineamientos_fotos">
<div class="contenedor_del">
<a href="#">
<img src="prueba2.php.jpg" width="100" height="100" VSPACE="8" class="thum"></a>
<img id="boton_eliminar" src="del_thum.gif" width="16" height="16">
<br>
<input type="checkbox" name="down_imagen[]">
</div>
</div>

<div class="alineamientos_fotos">
<div class="contenedor_del">
<a href="#">
<img src="prueba2.php.jpg" width="100" height="100" VSPACE="8" class="thum"></a>
<img id="boton_eliminar" src="del_thum.gif" width="16" height="16">
<br>
<input type="checkbox" name="down_imagen[]">
</div>
</div>




</div>
</form>
</div><!--wrapper -->
</div><!-- wrapper-->

<div id="navigation">
<table width="150" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

</div>

</div><!--container -->



</body>
</html>
__________________
gerardo
  #9 (permalink)  
Antiguo 06/09/2010, 10:39
 
Fecha de Ingreso: abril-2010
Mensajes: 17
Antigüedad: 14 años
Puntos: 5
Respuesta: div sobre una imagen
Cita:
Iniciado por chalchis Ver Mensaje
buu solo hay un problema en condenado explorer me pone la imagen de borrado
mas arriba que firefox

que podre hacer para que cuando sea firefox tome cierto valor y cuando es explorer tome otro

aqui en esta class

#boton_eliminar
{
border:1px solid #ff0000;
position:relative;
width:20px;
height: 21px;
top:-100px;
left:40px;
margin-top:-40px;
z-index:2;
}

en el atributo
top:-100px; si es firefox

y

top:-80px; si es explorer

?? Que puedo hacer

saludos
muchas gracias amigoss.. De foros del web esto...!!! Me ayudo bastante... Suerte a todos.......!!!!!!!!!!
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 13:21.