Foros del Web » Creando para Internet » CSS »

Posicionamiento con CSS

Estas en el tema de Posicionamiento con CSS en el foro de CSS en Foros del Web. Decidido finalmente a abandonar las tablas para siempre para el diseño, comencé a experimentar con CSS para posicionar. Ahora bien, ya empecé con dificultades con ...
  #1 (permalink)  
Antiguo 14/08/2004, 17:14
 
Fecha de Ingreso: julio-2002
Mensajes: 447
Antigüedad: 15 años, 4 meses
Puntos: 0
Posicionamiento con CSS

Decidido finalmente a abandonar las tablas para siempre para el diseño, comencé a experimentar con CSS para posicionar.
Ahora bien, ya empecé con dificultades con respecto a los distintos navegadores... estoy probando ahora solamente con IE 6 y el Mozilla Firefox 0.8.... el problema principal lo tengo en intentar posicionar diferentes divs y que se muestren de la misma forma en ambos. En mi ejemplono queda igual en ambos... en IE 6 quedan encimados... y en Firefox queda uno debajo del otro, tal como lo quiero... como hago para que quede igual en los 2? Muchas gracias...

<html>
<head>
<title>Prueba</title>
<style type="text/css">
#a1 {
border: solid 1px green;
margin: 0px;
width: 50px;
height: 100px;
}
#a2 {
border: solid 1px red;
position: absolute;
top: 110px;
}

</style>
</head>
<body>
<div id="a1">
Div 1
</div>
<div id="a2">
Div 2
</div>
</body>
</html>

Última edición por DeLaVega; 14/08/2004 a las 17:16
  #2 (permalink)  
Antiguo 14/08/2004, 18:23
Avatar de KnowDemon  
Fecha de Ingreso: julio-2004
Ubicación: Ciudad de México
Mensajes: 544
Antigüedad: 13 años, 5 meses
Puntos: 2
Cada navegador asigna diferentes valores por defecto a determinadas propiedades CSS. Para asegurar un comportamiento similar debes asignar por tí mismo esos valores que se muestran diferentes. En tu caso es el padding y margin del body:

Una solución a tu problema podría ser esta:

<html>
<head>
<title>Prueba</title>
<style type="text/css">
body{
margin: 0px;
padding: 10px;
}
#a1{
border: solid 1px green;
margin: 0px;
width: 50px;
height: 100px;
}
#a2{
border: solid 1px red;
width: 50px;
position: absolute;
top: 111px;
}
</style>
</head>
<body>
<div id="a1">
Div 1
</div>
<div id="a2">
Div 2
</div>
</body>
</html>


Como podrás darte cuenta siguen sin ser identicos, pero la diferencia es de 2 pixeles. Esto se debe a que IE calcula mal el tamaño de las cajas. Al tamaño de la caja se le debe sumar el tamaño de los bordes, pero no lo hace, coloca los bordes dentro de la caja. Cambia el tamaño de los bordes en el ejemplo para que puedas notar lo que digo.

Intenta no ser dependiente del posicionamiento absoluto, ni usarlo en exceso. Al menos no si usas bordes. Si puedes colocar a las cajas en su lugar utilizando el natural fluir del contenido es mejor...
__________________
Mi pequeño espacio en la web: VisiónE
"El cosmos es todo lo que es, todo lo que fue, y todo lo que será alguna vez."

Última edición por KnowDemon; 14/08/2004 a las 18:31
  #3 (permalink)  
Antiguo 21/08/2004, 16:44
Avatar de orochies  
Fecha de Ingreso: septiembre-2003
Ubicación: Guatemala
Mensajes: 259
Antigüedad: 14 años, 2 meses
Puntos: 2
Pues a my me parece que depender absolutamente del posicionamiento absoluto esta aun muy corta a usar ya que por la diferencia entre navegadores aun nos queda algo corto...

me parece que es una muy buena opcion seguir con el ordenamiento con tablas !!!Pero claro con uso moderado !!! Ya que eh tenido los mismos problemas con los posicionamientos en diferentes navegadores !!! O cuando nos estandarizaremos!!!

_Saludos
__________________
QMD...
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 11:19.