Foros del Web » Creando para Internet » CSS »

Subcapa hace desplazar la Capa principal

Estas en el tema de Subcapa hace desplazar la Capa principal en el foro de CSS en Foros del Web. Buenas Foreros!! Tengo una duda en CSS, llevo tiempo intentando buscar una respuesta clara.. aver si pueden ayudarme. Primero el ejemplo en concreto. Código: body{ ...
  #1 (permalink)  
Antiguo 01/12/2007, 09:44
 
Fecha de Ingreso: mayo-2007
Mensajes: 29
Antigüedad: 10 años, 6 meses
Puntos: 0
Subcapa hace desplazar la Capa principal

Buenas Foreros!!

Tengo una duda en CSS, llevo tiempo intentando buscar una respuesta clara.. aver si pueden ayudarme.

Primero el ejemplo en concreto.
Código:
body{
margin:0;
padding:0;
}
#capa_principal{
margin:5px 100px 0 0;
width:auto;
background-color:#CC0000;
height:80px;
}
#capa_principal .subcapa{
margin:20px 20px 0 50px;
width:auto;
background-color:#000;
}
.subcapa h1{
margin:0;
}
Probarlo utilizando el FIREFOX, comprobarán que la "subcapa" arrastra la "capa_principal". Se supone que la "capa_principal" deberia quedar a 5px del margen superior, mientras que la "subcapa" a 20px del margen superior de la "capa_principal", verdad??.
Utilizando el IE (Interner Explorer) al menos en la versión 6, se ve correctamente.

Volviendo al Ejemplo:
Código:
body{
margin:0;
padding:0;
}
#capa_principal{
margin:5px 100px 0 0;
width:auto;
background-color:#CC0000;
height:80px;
border:1px solid #000; /* Linea recien añadida */
}
#capa_principal .subcapa{
margin:20px 20px 0 50px;
width:auto;
background-color:#000;
}
.subcapa h1{
margin:0;
}
He agregado un borde simple a la "capa_principal", volver a comprobar el ejemplo en FireFox. Ahora, se debería ver correctamente, como en IE.

¿Por qué? Tan solo agregue un borde a la "capa_principal".

El problema es que en mi plantilla no debo agregar dicho borde, entonces pasa como al principio.

Nta: Si quitan el margen:0 de la etiqueta H1, también arrastrará la "capa_principal", siempre que esta no tenga el borde definido.

Alguien puede darme una respuesta clara, del ¿Por qué?.

Gracias ;).
  #2 (permalink)  
Antiguo 01/12/2007, 10:03
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: Subcapa hace desplazar la Capa principal

No he leido el código todavía, pero por lo que comentas ... al ponerle el border la subcapa se desplaza porque crece su ancho y no cabe. Osea tendria de ancho lo que le pongas en el widht + el tamaño del borde ;)

El width:auto equivale a un 100% a eso sumale 2 píxeles del borde, uno por cada lado
  #3 (permalink)  
Antiguo 01/12/2007, 10:09
 
Fecha de Ingreso: mayo-2007
Mensajes: 29
Antigüedad: 10 años, 6 meses
Puntos: 0
Re: Subcapa hace desplazar la Capa principal

Hola Eourus, gracias por tu opinión.

Lo que dices no es asi.. quiza mal interpretaste o bien te recomiendo probar el ejemplo primero, jeje.

La "subcapa" se desplaza cuando la "capa_principal" no lleva borde, de lo contrario, se ve correctamente. Que yo sepa no hay problemas de ancho o altura.

Insisto en que prueben el ejemplo dado.

Gracias ;)
  #4 (permalink)  
Antiguo 01/12/2007, 10:14
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: Subcapa hace desplazar la Capa principal

Ok, lo estoy probando y tienes razón.

A ver, una cosa. Capa principal es la roja, la negra es la subcapa.

¿Exactamente que quieres hacer?

Tener la capa roja y dentro la negra supongo, pero que no se quede pegada la negra a la parte superior de la roja ¿no?. Lo digo porque veo que has usado los margin ...
  #5 (permalink)  
Antiguo 01/12/2007, 10:25
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: Subcapa hace desplazar la Capa principal

bueno a ver, prueba esto:

body{
margin:0;
padding:0;
}
#capa_principal{
margin:5px 100px 0 0;
width:auto;
background-color:red;
height:80px;
border:1px solid #000; /* Linea recien añadida */
}
.subcapa{

width:auto;
background-color:blue;
}
.subcapa h1{
margin:0;
}
  #6 (permalink)  
Antiguo 01/12/2007, 10:28
 
Fecha de Ingreso: mayo-2007
Mensajes: 29
Antigüedad: 10 años, 6 meses
Puntos: 0
Re: Subcapa hace desplazar la Capa principal

La negra "subcapa" debe estar a 20px de la "capa_principal" sin que esta sea arrastrada como sucede en el primer ejemplo.

Ambas capas tienen margin definido, la primera queda a 5px del margen superior de la web, y la segunda queda a 20px del margen superior de la capa principal.

Si vuelves a comprobar.. funciona correctamente utilizando el segundo ejemplo (anadiendo un borde a la capa principal) pero ese borde, lo quiero quitar y que se siga viendo bien.

Además quiero saber el por que sucede esto.

Gracias ;)
  #7 (permalink)  
Antiguo 01/12/2007, 10:46
 
Fecha de Ingreso: octubre-2006
Ubicación: Murcia - España
Mensajes: 336
Antigüedad: 11 años, 1 mes
Puntos: 6
Re: Subcapa hace desplazar la Capa principal

Pues no tengo ni idea de porque se comporta. Pero si quieres un solución, utiliza capas flotantes, ya verás como se resuelve rapidamente.
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 08:33.