Foros del Web » Creando para Internet » CSS »

Posicionamiento conflictivo

Estas en el tema de Posicionamiento conflictivo en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/06/2008, 11:58
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Posicionamiento conflictivo

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.
  #2 (permalink)  
Antiguo 15/06/2008, 12:08
 
Fecha de Ingreso: diciembre-2003
Mensajes: 204
Antigüedad: 14 años
Puntos: 2
Respuesta: Posicionamiento conflictivo

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
  #3 (permalink)  
Antiguo 16/06/2008, 10:44
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Respuesta: Posicionamiento conflictivo

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.
  #4 (permalink)  
Antiguo 16/06/2008, 10:58
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: Posicionamiento conflictivo

Cita:
Iniciado por Ekbrilo Ver Mensaje
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.
  #5 (permalink)  
Antiguo 17/06/2008, 05:52
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Respuesta: Posicionamiento conflictivo

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.
  #6 (permalink)  
Antiguo 17/06/2008, 06:08
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: Posicionamiento conflictivo

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.
  #7 (permalink)  
Antiguo 17/06/2008, 11:20
 
Fecha de Ingreso: junio-2007
Mensajes: 492
Antigüedad: 10 años, 6 meses
Puntos: 8
Respuesta: Posicionamiento conflictivo

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.
  #8 (permalink)  
Antiguo 17/06/2008, 11: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: Posicionamiento conflictivo

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.
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 19:13.