Posicionamiento conflictivo

Ekbrilo · #1 (**permalink**) 14/06/2008, 10:58

Hola, practicando un poco de CSS me he topado con el siguiente problema: al situar un elemento menor justo en una esquina de un div grande, observo que en IE queda correctamente emplazado, esto es, pegado al borde o límite de ese div mayor; en cambio, con Firefox aparece junto a ese límite pero en el lado opuesto, es decir, fuera del div grande. El código es:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">

* {
margin: 0;
padding: 0;
}

body {
background: gray;
margin-top: 74px;
margin-bottom: 99px;
}

#div {
width: 630px;
height: 700px;
background: white;
position: absolute;
top: 100px;
left: 281px;
margin-top: 60px;
margin-bottom: 240px;
padding-top: 30px;
padding-bottom: 42px;

#menor {
widht: 14px;
height: 10px;
position: absolute;
top: 753px;
left: 948px;
background: red;
}

</style>
</head>

<body>
<center>
<div>
</div>
</center>
<div id="menor">
</div>
</body>
</html>

¿Cómo se hace para que Firefox muestre el elemento menor en su posición correcta?

Un saludo.

DaChux · #2 (**permalink**) 15/06/2008, 11:08

tienes un par de cosas "raras"
Lo primero, si lo tienes por que quieres centrar una capa, deberias de poner en la capa un margin:0 auto para que te lo centrara.
Despues, en el css, tienes una declaracion con #div. El #nombre significa que esa declaracion se aplicará a lo que tenga coo id=nombre... quiza querias poner solo div a pelo, no se si me explico.
Aun asi, cuelga el ejemplo para ver exactamente que sucede.

Un saludo

Ekbrilo · #3 (**permalink**) 16/06/2008, 09:44

Cita:

Lo primero, si lo tienes por que quieres centrar una capa, deberias de poner en la capa un margin:0 auto para que te lo centrara.

En realidad no tengo problemas de centrado, lo que quiero hacer es que el elemento #menor quede exactamente en la esquina inferior derecha del #div. Con el posicionamiento absoluto que figura en el código, el efecto se consigue perfectamente; en cambio, en Firefox el elemento menor queda en el body, junto a #div pero fuera de él.

Cita:

Despues, en el css, tienes una declaracion con #div. El #nombre significa que esa declaracion se aplicará a lo que tenga coo id=nombre... quiza querias poner solo div a pelo, no se si me explico.

La verdad es que no entiendo eso muy bien; como ves, en el código de cabecera pongo #div por un lado y #menor por otro; en el html están indicados respectivamente como #div y #menor de nuevo. ¿Te refieres a que en el html ponga sólo div sin #? En cualquier caso no creo que sea cosa de mi equipo; aunque para cerciorarse de esto, si quieres puedes reproducir tú mismo el código y ver cómo te queda en IE (a mí bien) y en Firefox ( a mí, mal).

Un saludo.

Mikmoro · #4 (**permalink**) 16/06/2008, 09:58

Cita:

Iniciado por Ekbrilo

La verdad es que no entiendo eso muy bien; como ves, en el código de cabecera pongo #div por un lado y #menor por otro; en el html están indicados respectivamente como #div y #menor de nuevo. ¿Te refieres a que en el html ponga sólo div sin #? En cualquier caso no creo que sea cosa de mi equipo; aunque para cerciorarse de esto, si quieres puedes reproducir tú mismo el código y ver cómo te queda en IE (a mí bien) y en Firefox ( a mí, mal).

Un saludo.

Esto se refiere a que la forma # para llamar con un selector a un elemento desde la css, se refiere al identificador (id) de ese elemento. Por ejemplo:

<div id="menor">

CSS: #menor

Para llamar a un div sin identificador se usaría la etiqueta generíca

div {...

En tu caso, llamas desde la css:

#div {
width: 630px;
height: 700px;
background: white;
position: absolute;
top: 100px;
left: 281px;
margin-top: 60px;
margin-bottom: 240px;
padding-top: 30px;
padding-bottom: 42px;

Como si el div fuera: <div id="div">

Si no tiene ID deberías quitar el #, pero eso afectaría a todos los div.

Además tienes ese selector sin cerrar con }

¿Puedes poner una imagen de qué querrías hacer? No creo que sea demasiado difícil de conseguir lo que quieres.

Mikel.

Ekbrilo · #5 (**permalink**) 17/06/2008, 04:52

Cita:

Si no tiene ID deberías quitar el #, pero eso afectaría a todos los div

¿Significa eso que si quito el # también debería modificar el #menor?

En cualquier caso, el efecto que busco es de lo más simple: imagina un div de color blanco que contenga otro muy pequeño de color rojo, situado justo en su esquina inferior derecha; esto es, pegado al borde del div blanco grande, pero sin sobresalir de él al body.

Un saludo y tomo nota de tus indicaciones, a ver si hay suerte y damos con la solución.

Mikmoro · #6 (**permalink**) 17/06/2008, 05:08

En primer lugar no es recomendable que uses un genérico como div en la css, porque eso afectará a todos los div de tu página. Lo único que debes hacer es dar un ID o una clase al que llamas div "mayor", y listo.

Y el problema que citas, es muy sencillo, pero yo no te acababa de entender:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: gray;
margin-top: 74px;
margin-bottom: 99px;
}
#mayor {
width: 630px;
height: 700px;
background: white;
position: absolute;
top: 100px;
left: 281px;
margin-top: 60px;
margin-bottom: 240px;
padding-top: 30px;
padding-bottom: 42px;
}
#menor {
width: 14px;
height: 10px;
position: absolute;
bottom: 0px;
right: 0px;
background-color: red;
}
</style>
</head>
<body>
<div id="mayor">
<div id="menor">
</div>
</div>
</body>
</html>

Mikel.

Ekbrilo · #7 (**permalink**) 17/06/2008, 10:20

Gracias por la correción, Mikel; en cualquier caso, me chocaba que el código incluido en mi primer post funcionase con IE y no con Firefox. Probaré con el cambio que me indicas y ya postearé de nuevo, para confirmar si funciona en Firefox.

Un saludo.

Mikmoro · #8 (**permalink**) 17/06/2008, 10:32

Fíjate que el ejemplo que te he puesto tiene unas cuantas diferencias, no sólo lo del div.
A mi también me chocaba, entre otras cosas porque tenías un widht en lugar de width (t y h cambiadas de sitio), así que es sorprendente que funcionara como querías en IE.

Mikel.