Problema con posicionamiento CSS
Hola, estoy haciendo una web y tengo un div de 800x600 px(al que llamo "cuerpo") donde va el contenido, y dentro de el hay otro div de 152x160 px (al que llamo "correo")con una imagen que será un enlace a mi correo.
Bueno, la cosa es que quiero que "correo" se situe abajo a la derecha dentro de "cuerpo" y pongo esto en el css:
<code>#cuerpo {
background-image:url(images/fondo.jpg);
background-repeat:no-repeat;
margin:auto;
width:800px;
height:600px;
border:1px solid #000;
}
#correo {
position:absolute;
right:0px;
bottom:0px;
width:152px;
height:160px;
border:1px solid #000;
}
</code>
y esto es el html:
<code>(div id="cuerpo")
(div id="logo")
(img src="images/logo.gif" width="258" height="247" alt="Diseño Gráfico y Web" /)
(/div)
(div id="correo")
(img src="images/correo.gif" width="152" height="160" alt="______@gmail.com" /)
(/div)
(/div)
</code>
Pero nada, no funciona, estoy consultando libros y webs, pero no encuentro solución. ¿Alguien puede echarme una mano?
Gracias :D
PD:Pongo () en lugar de <> para que se vea todo el codigo aquí
Freakme
¡muchas gracias a todos! ¡ya lo he solucionado gracias a vosotros!
un saludete :D
kemie
creo que te serviria:
<code>#cuerpo {
background-image:url(images/fondo.jpg);
background-repeat:no-repeat;
margin:auto;
width:800px;
height:600px;
border:1px solid #000;
position:relative;
}
#correo {
position:absolute;
right:0px;
bottom:0px;
width:152px;
height:160px;
border:1px solid #000;
} </code>
un contenedor con posicion relativa hace que sus hijos con posicion absoluta se posicionen con respecto a el (el contenedor padre)
hartum
freakme
el problema esta en el contenedor, mas concretamente en la "position" del contenedor, si al correo le dices que sea absolute pero al contenedor no le dices nada sacas a correo del flujo (let it flow men!!), ponle position:absolute al contenedor y se resolveran tus problemas.
;-)
p.d: como he visto que para centrar el cuerpo utilizas margin:auto, vas a tener que cambiar la tecnica al cambiar la posicion por absolute.
left:50%;
margin-left:-400px;
Usuario desconocido
Si, con un float:right para correo te vale.
Por cierto, mete las imágenes dentro de un párrafo, no las dejes sólo dentro del div y ya está...
Ya nos dices cómo te ha ido
leos
Freakme se me complica un poco entender lo que necesitas hacer, hablas de hacer una web pero el código que muestras es muy poco para organizarlo y hacerlo bien, me imagino que faltaran muchas cosas y sólo hablas de las primeras cosas que empezaste a armar.
Si vas a armar todo en CSS te recomiendo que uses id sólo para marcar jerarquías en las estructuras del sitio, por ejemplo: Encabezados (headers), cuerpo (body) y pie (footer) para las cosas dentro usa el class.
Las posiciones absolutas no las uses en todos los divs porque te volverás loco (lo digo por experiencia propia), diría que sólo en el div cuerpo si quieres, en los div internos usa Float que es una propiedad interesante de CSS. Simplemente los div flotan en base al div anterior y a sí puedes ir armando el sitio, pero igual busca en la Web que hay mucho material sobre esto.
Igualmente te paso el código de como me parece que podría ser, si es que te entendí bien. Igual el código no es muy ortodoxo que digamos, tuve que forzar correo con un margin para que baje, si hay algo entre logo y correo (por ejemplo contenido) será quien lo empuje hasta allí abajo.
Espero sirva.
<code><html>
<head>
<style>
#cuerpo {
background-image:url<images>;
background-repeat:no-repeat;
margin:auto;
width:800px;
height:600px;
border:1px solid #000;
}
#cuerpo .logo {
height:247px;
}
#cuerpo .correo {
float:right;
margin-top:193px;
width:152px;
height:160px;
border:1px solid #000;
}
</style>
<meta>
<title>Untitled Document</title>
</head>
<body>
(div id="cuerpo")
(div class="logo")
<img src="images/logo.gif" width="258" height="247" alt="Diseño Gráfico y Web">
(/div)
(div class="correo")
<img src="images/correo.gif" width="152" height="160" alt="______@gmail.com">
(/div)
(/div)
</body>
</html></code>