Foros del Web » Creando para Internet » CSS »

Div al costado de otro

Estas en el tema de Div al costado de otro en el foro de CSS en Foros del Web. 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é ...
  #1 (permalink)  
Antiguo 11/11/2009, 17:09
 
Fecha de Ingreso: octubre-2005
Mensajes: 95
Antigüedad: 12 años, 1 mes
Puntos: 1
Div al costado de otro

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
  #2 (permalink)  
Antiguo 11/11/2009, 19:14
 
Fecha de Ingreso: noviembre-2009
Mensajes: 17
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Div al costado de otro

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
  #3 (permalink)  
Antiguo 12/11/2009, 11:26
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Div al costado de otro

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.
  #4 (permalink)  
Antiguo 12/11/2009, 11:57
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div al costado de otro

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 12/11/2009, 13:43
 
Fecha de Ingreso: octubre-2005
Mensajes: 95
Antigüedad: 12 años, 1 mes
Puntos: 1
Respuesta: Div al costado de otro

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
  #6 (permalink)  
Antiguo 12/11/2009, 14:18
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Div al costado de otro

Prueba este código a ver si te sirve de guía:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>kseso? jugando con css</title>
  4. <style type="text/css">
  5. * {margin: 0; padding: 0; border: 0; position: relative;}
  6. * html, * body { height: 100%; overflow:auto;}
  7. html, body {
  8. background-color: #cdcdcd;
  9. }
  10. #container {
  11. margin:10px auto;
  12. width:480px;
  13. }
  14. #container img.principal {
  15. left:0;
  16. position:relative;
  17. top:0;
  18. }
  19. .cierre {
  20. background-color:red;
  21. /*height:30px;*/
  22. position:absolute;
  23. right:-15px;
  24. top:0;
  25. width:15px;
  26. }
  27. </head>
  28. <body>
  29. <div id="container">
  30. <img class="principal" src="http://share.skype.com/sites/es/skype/skype32ready.jpg" alt="una imagen" />
  31. <span class="cierre">X</span>
  32. </div>
  33. </body>
  34. </html>
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 20/11/2009, 15:12
 
Fecha de Ingreso: octubre-2005
Mensajes: 95
Antigüedad: 12 años, 1 mes
Puntos: 1
Respuesta: Div al costado de otro

excelente...muchas gracias. !:D
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




La zona horaria es GMT -6. Ahora son las 17:09.