Foros del Web » Creando para Internet » CSS »

Duda con div e imagen

Estas en el tema de Duda con div e imagen en el foro de CSS en Foros del Web. Buenas tengo dos div uno dentro de otro y el de atras contiene una imagen que quiero que se superponga sobre el otro div, pero ...
  #1 (permalink)  
Antiguo 12/08/2009, 17:30
Le0
 
Fecha de Ingreso: agosto-2009
Mensajes: 6
Antigüedad: 8 años, 3 meses
Puntos: 0
Duda con div e imagen

Buenas tengo dos div uno dentro de otro y el de atras contiene una imagen que quiero que se superponga sobre el otro div, pero sólo la imagén no todo el div:

Pongo aqui el enlace de la image (sustituir la "phht" por "http") -> phht://img186.imageshack.us/img186/8903/aaaaro.png

El codigo que tengo es el siguiente:

Stilo:
Código:
h1{	
	background-image: url("../Titulo.png");
	background-repeat:repeat-x;
	color:#e6e6e7;	
	padding:4px;
	font-size:24px;
	margin:0px auto 0px auto;
	text-align:center;
	line-height:normal;
}

#barra {
	border: #0f3567 solid 2px;
	width: 500px;
}

#con_imagen{
	width: 550px;
	height: 90px;
	background-image: url(../libro.png);
	background-repeat: no-repeat;	
	border: #ffffff solid 1px;
}

#con_imagen #barra {
	margin:	25px auto 25px auto;
}
En el body:

Código:
<div id="con_imagen"><div id="barra"><h1>Prueba Titulo Principal</h1></div></div>

Última edición por Le0; 12/08/2009 a las 18:24
  #2 (permalink)  
Antiguo 12/08/2009, 19:30
 
Fecha de Ingreso: diciembre-2008
Mensajes: 56
Antigüedad: 9 años
Puntos: 1
Respuesta: Duda con div e imagen

2 Ideas
1º la mas sencilla, porque no creas una imagen con el libro y el rectagulo y luego la colacas de imagen de fondo.
2º en vez de colacar la imagen, de fondo colocala en el html y luego por css la pones por posición adsoluta donde quieras.

Un saludo.
  #3 (permalink)  
Antiguo 13/08/2009, 07:10
Le0
 
Fecha de Ingreso: agosto-2009
Mensajes: 6
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Duda con div e imagen

Con imagen no quiero, ya que lo quiero práctico y que se pueda utilizar en mucho sitios y la posición absolute no me sirve ya que aparecerá en varios sitios de la página.

He conseguido hacerlo más o menos el problema es que con Firefox se ve bien pero con IE no y no se cual puede ser el motivo.


Código:
h1{	
	background-image: url("../Titulo.png");
	background-repeat:repeat-x;
	color:#e6e6e7;	
	padding:4px;
	font-size:24px;
	margin:0px auto 0px auto;
	text-align:center;
	line-height:normal;
}

#barra {
	border: #0f3567 solid 2px;
	width: 500px;
	margin: auto 100px auto 99px;	
}

#con_imagen{
	width: 550px;
	height: 90px;		
	border: #ffffff solid 1px;
	margin: auto 75px auto 75px;
}

#con_imagen #barra {
	margin:	25px auto auto auto;
}
	
#con_imagen #barra h1{
	padding-right: 60px;
}

#con_imagen img{
	float: left;
}

Código:
<div id="con_imagen"><img src="../libro.png" alt="Sumario"/><div id="barra">
  <h1>Titulo Principal Con Imagen</h1>
</div></div>
  #4 (permalink)  
Antiguo 13/08/2009, 08:57
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Duda con div e imagen

no estoy seguro, pero pruebalo de esta manera:

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Untitled Document</title>
  5. <style type="text/css">
  6. h1{
  7.     background-image: url("../Titulo.png");
  8.     background-repeat:repeat-x;
  9.     color:#e6e6e7; 
  10.     padding:3px;
  11.     font-size:24px;
  12.     margin:0;
  13.     text-align:center;
  14.     line-height:normal;
  15. }
  16.  
  17. #barra {
  18.     border: #0f3567 solid 2px;
  19.     width: 500px;
  20.     margin:15px auto;
  21. }
  22.  
  23. #con_imagen{
  24.     width: 550px;
  25.     height: auto;      
  26.     border: #ffffff solid 1px;
  27.     margin: auto 75px;
  28.     overflow:auto;
  29. }
  30. </head>
  31.  
  32. <div id="con_imagen">
  33.    
  34. <div id="barra">
  35. <img src="Imagenes/fondo.jpg" width="50" height="60" style="float:left; position:relative; left:-15px; top:-15px" />
  36.         <h1>Titulo Principal Con Imagen</h1>
  37.   </div>
  38. </div>
  39. </body>
  40. </html>

sugiero hacerlo en un archivo nuevo para evitar complicaciones.
__________________
WFC
codigo82
  #5 (permalink)  
Antiguo 13/08/2009, 09:20
Le0
 
Fecha de Ingreso: agosto-2009
Mensajes: 6
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Duda con div e imagen

No es exactamente lo que quiero ya que la imagen quiero que este en el div de antes ya que es más grande que el div de dentro. En Firefox perfecto pero en IE se me queda la imgen arriba y la barra abajo.

Aqui se puede comprobar si lo abrimos con Firefox (que es como quiero que quede) o IE.

LINK -> fedmurcianamz.freehostia.com/titulo.html
  #6 (permalink)  
Antiguo 13/08/2009, 09:48
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Duda con div e imagen

Más sencillo?
Código css:
Ver original
  1. h1{    
  2.     background-image: url("titulo_files/Titulo.png");
  3.     background-repeat:repeat-x;
  4.     color:#e6e6e7;    
  5.     padding:4px 0 4px 50px;
  6.     font-size:18px;
  7.     margin:0px auto 0px auto;
  8.     text-align:center;
  9.     line-height:normal;
  10. }
  11.  
  12. #con_imagen{
  13.     width: 550px;
  14.     height: 90px;        
  15.     border: #ffffff solid 1px;
  16.     margin: 50px 75px 0 75px;
  17.     position: relative;
  18. }
  19.  
  20. .sobre {
  21. position: absolute;
  22. top:-30px;
  23. }

Código html:
Ver original
  1. <div id="con_imagen">
  2.   <h1>Titulo Principal Con Imagen</h1>
  3.   <img class="sobre" src="titulo_files/libro.png" alt="Sumario"/>
  4. </div>

La imagen la tuya. Ajusta los distintos valores de px a tus necesidades particulares.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 13/08/2009, 09:54
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Duda con div e imagen

Cita:
la posición absolute no me sirve ya que aparecerá en varios sitios de la página.
por esto no ofrecí un código como el tuyo Elías(un saludo) y me he complicado bastante.
__________________
WFC
codigo82
  #8 (permalink)  
Antiguo 13/08/2009, 10:05
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Duda con div e imagen

Hola Willyfc:
Cita:
la posición absolute no me sirve ya que aparecerá en varios sitios de la página.
La solución es fácil, si en otras partes de la página va a utilizar esa misma imagen, que le aplique otra clase diferente (<img class="¿?"... />)
O que en vez de position juegue con float para la clase y en vez de 'top' que use "margin-top:50px":
Cita:
.sobre {
float:left;
margin-top:-50px;
}
Pero eso de que no le sirve ahora porque en otras partes va a... como que no. O expone completo o no exige una solución global.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 13/08/2009, 10:11
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Duda con div e imagen

Cita:
Iniciado por kseso? Ver Mensaje
O expone completo o no exige una solución global.
Estoy de acuerdo, esperemos que aparezca para ver que hacemos.
__________________
WFC
codigo82
  #10 (permalink)  
Antiguo 13/08/2009, 10:16
Le0
 
Fecha de Ingreso: agosto-2009
Mensajes: 6
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Duda con div e imagen

Si, la verdad es que así se posiciona bien, pero al estar todo en un div pierdo el efecto del borde (de ahí que este utilizando dos), eso en conjunto no consigo hacerlo.

Lo de la posición absoloute olvidarlo, son paranoias mias ... la imagen va estar siempre en la misma posicion dentro del div xD

Última edición por Le0; 13/08/2009 a las 10:30
  #11 (permalink)  
Antiguo 13/08/2009, 10:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Duda con div e imagen

Cita:
Iniciado por Le0 Ver Mensaje
Si, la verdad es que así se posiciona bien, pero al estar todo en un div pierdo el efecto del borde (de ahí que este utilizando dos), eso en conjunto no consigo hacerlo.

Pues añádelo a h1 (el borde, digo)
Mira a ver si con este código no consigues lo mismo que en el enlace que publicaste:
fedmurcianamz.freehostia.com/titulo.html
excepto un pequeño ajuste del padding del h1
Código html:
Ver original
  1. h1{    
  2.     background-image: url("titulo_files/Titulo.png");
  3.     background-repeat:repeat-x;
  4.     color:#e6e6e7;    
  5.     padding:4px 4px 4px 50px;
  6.     font-size:18px;
  7.     margin:0px auto 0px auto;
  8.     text-align:center;
  9.     line-height:normal;
  10.     border:2px solid #0F3567
  11. }
  12. #con_imagen{
  13.     width: 550px;
  14.     height: 90px;        
  15.     border: #ffffff solid 1px;
  16.     margin: 50px 75px 0 75px;
  17.     position: relative;
  18. }
  19. .sobre {
  20. float:left;
  21. margin-top:-60px;
  22. }
  23. </head>
  24. <div id="con_imagen">
  25.   <h1>Titulo Principal Con Imagen</h1>
  26.   <img class="sobre" src="titulo_files/libro.png" alt="Sumario"/>
  27. </div>
  28. </body>
  29. </html>
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 13/08/2009, 10:53
Le0
 
Fecha de Ingreso: agosto-2009
Mensajes: 6
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: Duda con div e imagen

OK, perfecto. LLevo 3 días con css así que se me escapan muchas cosas que otros ven ya obvias ().


Gracias.
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 22:46.