Un elemento bajo otro sin position:absolute

patilanz · #1 (**permalink**) 10/10/2012, 03:16

Hola ncesito poner una div bajo otra pero que no tenga la propiedad position:absolute
Tengo el siguiente codigo:

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>Documento sin título</title>
<style type="text/css">
.logo{
    width:600px;
    height:180px;
    z-index:-1;
    float:center;
    border-radius:10px;
    background-color:white;
    border-width:thin;
    border:0px;
    border-color:#ccc;
    border-style:solid;
    border-right:none;
    border-bottom:none;
    color:#00CCFF;
    box-shadow:1px 1px 20px 1px #ccc;
    padding:1px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-style:italic;
    font-size:60px;
}
div.logo:hover{
    background-color:#CCCCCC;   
}
#apDiv1 {
    width:590px;
    height:180px;
    z-index:1;
    float:center;
}
</style>
</head>
 
<body>
<center>
<div id="apDiv1" onmouseover="document.getElementById('logo').style='background-color=#CCCCCC';"><img src="images/pass..GIF" width="580" height="170" style="z-index:1; float:center;" /></div>
<div class="logo" id="logo"><p style="font-size:5px"><p><div style="border:0px; border-style:solid; width:305px; border-radius:10px; height:70px; box-shadow:1px 1px 20px 1px #ccc; text-shadow: black 0.1em 0.1em 0.2em;">Forgoter</div></div>
</center>
</body>
</html>

Pero no lo consigo hacer...
Necesito sin esta propiedad porque se be diferente en cada navegador y en cada ordenador...

Saludos

flashmax · #2 (**permalink**) 10/10/2012, 06:04

tienes un problema aqui: <p style="font-size:5px"><p>

tendria que ser asi:

Código HTML:

<div id="apDiv1" onmouseover="document.getElementById('logo').style='background-color=#CCCCCC';"><img src="images/pass..GIF" width="580" height="170" style="z-index:1; float:center;" /></div>
<div class="logo" id="logo"><div style="border:0px; border-style:solid; width:305px; border-radius:10px; height:70px; box-shadow:1px 1px 20px 1px #ccc; text-shadow: black 0.1em 0.1em 0.2em;"><p style="font-size:5px">Forgoter</p></div></div>

patilanz · #3 (**permalink**) 10/10/2012, 12:08

Cita:

Iniciado por flashmax

tienes un problema aqui: <p style="font-size:5px"><p>

tendria que ser asi:

Código HTML:

<div id="apDiv1" onmouseover="document.getElementById('logo').style='background-color=#CCCCCC';"><img src="images/pass..GIF" width="580" height="170" style="z-index:1; float:center;" /></div>
<div class="logo" id="logo"><div style="border:0px; border-style:solid; width:305px; border-radius:10px; height:70px; box-shadow:1px 1px 20px 1px #ccc; text-shadow: black 0.1em 0.1em 0.2em;"><p style="font-size:5px">Forgoter</p></div></div>

EL problema no es este. Yo lo que quiero es poner apDiv1 y :

Código HTML:

Ver original<div style="border:0px; border-style:solid; width:305px; border-radius:10px; height:70px; box-shadow:1px 1px 20px 1px #ccc; text-shadow: black 0.1em 0.1em 0.2em; z-index:1;">Forgoter</div></div>

sobre "logo" sin usar position absolute... aunque le he puesto a apDiv1 position absute para hacer una prueba pero luego tengo que quitar lo... cuando ya se como hacer lo que necesito...

Hay alguna manera de hacer lo?

Saludos

mariogl84 · #4 (**permalink**) 10/10/2012, 13:52

No sé si entiendo bien el resultado que quieres conseguir, pero para que un elemento se coloque "encima" de otro, o está dentro de él (que esto ya lo tienes hecho con el div dentro del div #logo), o le tienes que quitar la posición estática. Eso se consigue dándole cualquiera de los otros valores (absolute, relative o fixed). Si no quieres absolute, puedes probar con relative, pero no sé si te servirá puesto que el hueco del elemento se sigue reservando, aunque le cambies la posición.

Y lo que te ha dicho flashmax es importante: si tu código html no está bien formado, lo más normal del mundo es que los diferentes navegadores te lo interpreten cada uno a su manera, y veas resultados distintos.

¿Cuál es el resultado visual que quieres conseguir? ¿Puedes montar una imagen para que nos hagamos una idea?

patilanz · #5 (**permalink**) 11/10/2012, 10:38

Cita:

Iniciado por mariogl84

No sé si entiendo bien el resultado que quieres conseguir, pero para que un elemento se coloque "encima" de otro, o está dentro de él (que esto ya lo tienes hecho con el div dentro del div #logo), o le tienes que quitar la posición estática. Eso se consigue dándole cualquiera de los otros valores (absolute, relative o fixed). Si no quieres absolute, puedes probar con relative, pero no sé si te servirá puesto que el hueco del elemento se sigue reservando, aunque le cambies la posición.

Y lo que te ha dicho flashmax es importante: si tu código html no está bien formado, lo más normal del mundo es que los diferentes navegadores te lo interpreten cada uno a su manera, y veas resultados distintos.

¿Cuál es el resultado visual que quieres conseguir? ¿Puedes montar una imagen para que nos hagamos una idea?

Gracias por tu respuesta. Poes aqui hize una imagen de como quiero que quede. Esto lo hize con position absolute aunque no del todo pero quiero hacer lo todo sin position absolute :

http://forgoter.16mb.com/ss.png

flashmax · #6 (**permalink**) 11/10/2012, 12:49

hola haber si así te funciona ..despues retoca tus estilos

Código HTML:

<!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" />
<head>

 
<style type="text/css">
 
.contenedor-logo {
    width: 600px;
    height: 180px;
    border-radius:10px;
    background-color:white;
    color:#00CCFF;
    box-shadow:1px 1px 20px 1px #ccc;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-style:italic;
    font-size:60px;
	}
    
.contenedor-logo[class] { 
    display: table;}
    
.centrado {
    position: absolute; 
    top: 50%;}
 
.centrado[class] {
    display: table-cell; 
    vertical-align: middle;
    text-align: center; 
    position: static;
    }
    
.logo{
    width: 305px;
    height:70px;
    background-color:white;
    border: 1px solid #ccc;
    border-width:thin;
    margin: 0 auto;
    position: relative;
    top: -50%; 
    width:305px; 
    border-radius:10px; 
    box-shadow:#ccc 1px 1px 20px 1px ; 
    text-shadow: black 0.1em 0.1em 0.2em;
    }
    
.contenedor-logo:hover{
    background-color:#CCCCCC;   
}
.apDiv1 {
    width:590px;
    height:180px;
}
</style>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<center>
<div class="apDiv1" onmouseover="document.getElementById('logo').style='background-color=#CCCCCC';"><img src="http://www.forosdelweb.com/f53/elemento-bajo-otro-sin-position-absolute-1017336/images/pass..GIF" width="580" height="170"/></div>

<div class="contenedor-logo">
    <div class="centrado">
        <div class="logo">Forgoter</div>
    </div>
</div>
</center>
</body>
 
</html>

patilanz · #7 (**permalink**) 12/10/2012, 01:37

Cita:

Iniciado por flashmax

hola haber si así te funciona ..despues retoca tus estilos

Código HTML:

<!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" />
<head>

 
<style type="text/css">
 
.contenedor-logo {
    width: 600px;
    height: 180px;
    border-radius:10px;
    background-color:white;
    color:#00CCFF;
    box-shadow:1px 1px 20px 1px #ccc;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-style:italic;
    font-size:60px;
	}
    
.contenedor-logo[class] { 
    display: table;}
    
.centrado {
    position: absolute; 
    top: 50%;}
 
.centrado[class] {
    display: table-cell; 
    vertical-align: middle;
    text-align: center; 
    position: static;
    }
    
.logo{
    width: 305px;
    height:70px;
    background-color:white;
    border: 1px solid #ccc;
    border-width:thin;
    margin: 0 auto;
    position: relative;
    top: -50%; 
    width:305px; 
    border-radius:10px; 
    box-shadow:#ccc 1px 1px 20px 1px ; 
    text-shadow: black 0.1em 0.1em 0.2em;
    }
    
.contenedor-logo:hover{
    background-color:#CCCCCC;   
}
.apDiv1 {
    width:590px;
    height:180px;
}
</style>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<center>
<div class="apDiv1" onmouseover="document.getElementById('logo').style='background-color=#CCCCCC';"><img src="http://www.forosdelweb.com/f53/elemento-bajo-otro-sin-position-absolute-1017336/images/pass..GIF" width="580" height="170"/></div>

<div class="contenedor-logo">
    <div class="centrado">
        <div class="logo">Forgoter</div>
    </div>
</div>
</center>
</body>
 
</html>

Gracias por tu respuesta pero el resultado no fue el esperado

Aqui tengo una foto del resultado:

http://forgoter.16mb.com/ss2.png

Si quieres ver el codigo fuente : de la pagina es esta :

http://forgoter.16mb.com/index.php

Aunque tiene mas cosas el codigo fuente se be (si tienes problema te lo puedo dar solo del logo)

Saludos

flashmax · #8 (**permalink**) 12/10/2012, 10:26

a bueno nuca me imagine que el div de arriba tendria que ir adrento con esa imagen para eso coloca la imagen como fondo del div principal, el ejemplo que te di esta orientado a centar el div verticalmente y horizontalmente.

Neuromanzer · #9 (**permalink**) 12/10/2012, 18:19

El problema que tienes no es con el CSS, sino con la organización de imágenes y el diseño en general.

Mira. La solución rápida sería poner todas esas imágenes en una sola y ponerlas directamente en el html como <IMG>, o como mucho como fondo de un <H1> por ejemplo, o de un <div id="titulo"> si lo prefieres.

La solución mas completa sería la siguiente:

Incluye una caja dentro de otra. A la que sirve de contenedor le pones una de las imágenes y a la caja interior le pones como fondo la que quieres que esté encima.

Olvidate del position:absolute y ese tipo de cosas, que es liar la madeja. Con backgrond-position sobra, y no guarreas el css.

De todas formas sigo pensando que tienes un error serio en el concepto de separación de esas dos imágenes. Te recomiendo hacer una única imagen como fondo de una única caja. O en todo caso, la imagen de base que contenga el borde exterior y las palabras de colores chillones, y otra imagen con el borde interior y su contenido.