Div al costado de otro

Bocaz · #1 (**permalink**) 11/11/2009, 17:09

estimados, lamentablemente esto de los css me ha salido algo duro y no he tenido tiempo de leerme un manual y practicar...
asi que haré la del flojo y les preguntaré directamente a ver si me ayudan..

necesito, hacer un div que contenga una imagen cualquiera, pero que en el lado superior derecho de la imagen aparesca otro div más pequeño con otra imagen, como la X de "eliminar", la idea es generar un listado de imagenes en donde cada una tenga su X para eliminarla en su lado superior derecho.

Espero me puedan ayudar.

Christian, el bobo de los css..jajaja

Miguel_Mendez · #2 (**permalink**) 11/11/2009, 19:14

No es necesario agregar un div para cada objeto que vas a agregar te puedes ahorrar bastante codigo.

puedes utilizar una imagen con un identificador y darle las propiedades para que la imagen quede perfecta

img#cerrar{float:right}

<img src="close.png" alt="Cerrar Ventana" />

saludos

cristian_cena · #3 (**permalink**) 12/11/2009, 11:26

Hola tocayo, me parece que lo que quieres no se puede realizar solo con css, a lo mejor tendrás que manipular el dom de javascript para insertar elementos de modo dinámico. Lamento tirarte la pálida y no poder ayudarte pero hay un subforo de javascript que puedes visitar y a lo mejor ahí te den una mano.

kseso? · #4 (**permalink**) 12/11/2009, 11:57

Lo que no me ha quedado claro es qué necesita realmente.
O bien la interpretación de Cristian (un saludo) de generar automáticamente la imagen de "cierre" que es programación.
O de posicionar esa imagen de cierre sobre la imagen principal. Esto sí es posible (y recomendable) con css.

Ya nos aclaras, Bocaz.

Bocaz · #5 (**permalink**) 12/11/2009, 13:43

estimados..
lo que realmente quiero hacer es generar con php una gelería de imagenes...
en eso no hay problema

lo que quiero es que por cada imagen, mostrar una imagen pequeña, al borde superior derecho de cada imagen para que la hacerle click pueda eliminarla.

mi unico problema aqui es posiciona esa imagen con forma de X en la posición correcta, en el borde superior derecho de cada thumbnail de la galeria.

lo ideal es poder hacer que esta imagen x, que es aproximadamente de 50x15 px, quede como lo indico en la figura:

http://www.servidor-imagenes.com/sho...d8d13ebc53def1

kseso? · #6 (**permalink**) 12/11/2009, 14:18

Prueba este código a ver si te sirve de guía:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>kseso? jugando con css</title>
<style type="text/css">
* {margin: 0; padding: 0; border: 0; position: relative;}
* html, * body { height: 100%; overflow:auto;}
html, body {
background-color: #cdcdcd;
}
#container {
margin:10px auto;
width:480px;
}
#container img.principal {
left:0;
position:relative;
top:0;
}
.cierre {
background-color:red;
/*height:30px;*/
position:absolute;
right:-15px;
top:0;
width:15px;
}
</style>
</head>
<body> 
<div id="container">
<img class="principal" src="http://share.skype.com/sites/es/skype/skype32ready.jpg" alt="una imagen" />
<span class="cierre">X</span>
</div>
</body>
</html>

Bocaz · #7 (**permalink**) 20/11/2009, 15:12

excelente...muchas gracias. !:D