Foros del Web » Creando para Internet » CSS »

Como sobreponer dos divs

Estas en el tema de Como sobreponer dos divs en el foro de CSS en Foros del Web. saludos, Quiesiera saber como hago para sobreponer dos divs. Por que estoy tratando de tener un div abajo con un fondo de una imagen con ...
  #1 (permalink)  
Antiguo 14/11/2008, 12:26
 
Fecha de Ingreso: enero-2007
Mensajes: 53
Antigüedad: 10 años, 10 meses
Puntos: 0
Pregunta Como sobreponer dos divs

saludos,
Quiesiera saber como hago para sobreponer dos divs.

Por que estoy tratando de tener un div abajo con un fondo de una imagen con un degradado vertical con un alto de 443px. y el de arriba otro div con con otro fondo que completa el degradado del otro si es que se extiende el texto hacia abajo.

Gracias de antemano si me pueden ayudar.

ME cree este codigo pero me deja otros 443px abajo de la pagina.
(Y este problema ya me ha pasado varias veces con posiciones relativas, les agradecería si saben como solucionar esto)

Código:
estilos.css

.wrapper {
	width: 100%;
	text-align: center;
}
.container {
	width: 739px;
	margin-left:auto;
	margin-right:auto;
}
.header {
	width: 100%;
	height: 49px;
	background-image:url(../imagenes/menu_sup.png);
	background-repeat: no-repeat;
}
.content {
	position:relative;
	top:-443px;
	width: 100%;
	height:443px;
	background-image:url(../imagenes/main_top.png);/*esta imagen es la que tiene 443px*/
	background-repeat: no-repeat;
}
.content2 {
	position:relative;
	width: 100%;
	background-image:url(../imagenes/main_mid.png);
	background-repeat: repeat-y;
	top: 443px;
}
.footer {
	margin-top:0px;
	width: 100%;
	background-image:url(../imagenes/main_bot.png);
	background-repeat: no-repeat;
}
body {
	margin-top: 20px;
	padding: 0px;
	background-attachment: scroll;
	background-image: url(../imagenes/Mplus_bkg.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	height:auto;
}
Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="header">&nbsp;</div>
<div class="content2">
  <div class="content">
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>asd</p>
    <p>das</p>
    <p>asd</p>
    <p>asd</p>
  </div>
</div>
<div class="footer">&nbsp;</div>
</div>
</div>
</body>
</html>
Y aquí esta la pagina de prueba http://imageboutique.us/prueba_div

Última edición por maryhanns; 14/11/2008 a las 13:57
  #2 (permalink)  
Antiguo 14/11/2008, 12:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como sobreponer dos divs

Cita:
Iniciado por maryhanns Ver Mensaje
Por que estoy tratando de tener un div abajo con un fondo de una imagen con un degradado vertical con un alto de 443px.
¿Y dónde está ese height de 443px? No lo veo en tu css por ninguna parte.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 14/11/2008, 13:00
 
Fecha de Ingreso: enero-2007
Mensajes: 53
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Como sobreponer dos divs

Mikmoro. Aqui le edite el codigo.
Código:
height:443px;
background-image:url(../imagenes/main_top.png);/*esta imagen es la que tiene 443px*/
  #4 (permalink)  
Antiguo 14/11/2008, 15:54
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Como sobreponer dos divs

No se si esto arregle tu problema, pero te recomiendo algo:

Con la poca experiencia que tengo trabajando con el CSS, te se decir que trabajes las paginas con una sola declaracion de tamaños, por ejemplo, si vas a trabajar con los "px" trabaja todos los divs con "px" y mas si va uno dentro de otro, esto te ayudara mucho. Y si trabajas con "%" trabaja todo con "%" porque asi tendras un mayor orden...

Espero que esto te sirva! Saludos!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #5 (permalink)  
Antiguo 14/11/2008, 16:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como sobreponer dos divs

Bueno, en este caso creo que lo más recomendable es cambiar un poco de estrategia:

- quitar el height
- quitar los deplazamientos
- eliminar la sombra de la imagen superior para que siempre se vea la del inferior y no se monten.
- dar una altura al pie igual a la altura de su imagen.

En definitiva, varias cosas. Mira este ejemplo:

http://www.araudi.net/forosdelweb/ma...maryhanns.html

A ver si te va bien.

P.D.: supongo que tendrás claro que estás usando imágenes PNG, que con IE6 no van a ser transparentes. Si usas fondo blanco en lugar de transparencia para la sombra, deberás volver a cambiar de estrategia.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 15/11/2008, 08:49
 
Fecha de Ingreso: enero-2007
Mensajes: 53
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Como sobreponer dos divs

Muchas gracias Mikmoro fuiste muy amable al facilitarme el ejemplo, asi ya resoví mi problema y aprendí como hacerlo
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 08:33.