Duda con div e imagen

Le0 · #1 (**permalink**) 12/08/2009, 16:30

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>

txusweb · #2 (**permalink**) 12/08/2009, 18:30

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.

Le0 · #3 (**permalink**) 13/08/2009, 06:10

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>

willyfc · #4 (**permalink**) 13/08/2009, 07:57

no estoy seguro, pero pruebalo de esta manera:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1{ 
    background-image: url("../Titulo.png");
    background-repeat:repeat-x;
    color:#e6e6e7;  
    padding:3px;
    font-size:24px;
    margin:0;
    text-align:center;
    line-height:normal;
}
 
#barra {
    border: #0f3567 solid 2px;
    width: 500px;
    margin:15px auto;
}
 
#con_imagen{
    width: 550px;
    height: auto;       
    border: #ffffff solid 1px;
    margin: auto 75px;
    overflow:auto;
}
</style>
</head>
 
<body>
<div id="con_imagen">
    
<div id="barra">
<img src="Imagenes/fondo.jpg" width="50" height="60" style="float:left; position:relative; left:-15px; top:-15px" />
        <h1>Titulo Principal Con Imagen</h1>
  </div>
</div>
</body>
</html>

sugiero hacerlo en un archivo nuevo para evitar complicaciones.

Le0 · #5 (**permalink**) 13/08/2009, 08:20

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

kseso? · #6 (**permalink**) 13/08/2009, 08:48

Más sencillo?

Código css:

Ver originalh1{    
    background-image: url("titulo_files/Titulo.png");
    background-repeat:repeat-x;
    color:#e6e6e7;    
    padding:4px 0 4px 50px;
    font-size:18px;
    margin:0px auto 0px auto;
    text-align:center;
    line-height:normal;
}
 
#con_imagen{
    width: 550px;
    height: 90px;        
    border: #ffffff solid 1px;
    margin: 50px 75px 0 75px;
    position: relative;
}
 
.sobre {
position: absolute;
top:-30px;
}

Código html:

Ver original<div id="con_imagen">
  <h1>Titulo Principal Con Imagen</h1>
  <img class="sobre" src="titulo_files/libro.png" alt="Sumario"/>
</div>

La imagen la tuya. Ajusta los distintos valores de px a tus necesidades particulares.

willyfc · #7 (**permalink**) 13/08/2009, 08:54

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.

kseso? · #8 (**permalink**) 13/08/2009, 09:05

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

willyfc · #9 (**permalink**) 13/08/2009, 09:11

Cita:

Iniciado por kseso?

O expone completo o no exige una solución global.

Estoy de acuerdo, esperemos que aparezca para ver que hacemos.

Le0 · #10 (**permalink**) 13/08/2009, 09:16

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

kseso? · #11 (**permalink**) 13/08/2009, 09:46

Cita:

Iniciado por Le0

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<style>
h1{    
    background-image: url("titulo_files/Titulo.png");
    background-repeat:repeat-x;
    color:#e6e6e7;    
    padding:4px 4px 4px 50px;
    font-size:18px;
    margin:0px auto 0px auto;
    text-align:center;
    line-height:normal;
    border:2px solid #0F3567
}
#con_imagen{
    width: 550px;
    height: 90px;        
    border: #ffffff solid 1px;
    margin: 50px 75px 0 75px;
    position: relative;
}
.sobre {
float:left;
margin-top:-60px;
}
</style>
</head>
<body>
<div id="con_imagen">
  <h1>Titulo Principal Con Imagen</h1>
  <img class="sobre" src="titulo_files/libro.png" alt="Sumario"/>
</div>
</body>
</html>

Le0 · #12 (**permalink**) 13/08/2009, 09:53

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

).

Gracias.