Foros del Web » Creando para Internet » CSS »

¿Dos cajas iguales con distinta anchura?

Estas en el tema de ¿Dos cajas iguales con distinta anchura? en el foro de CSS en Foros del Web. Hola. Estoy haciendo pruebas con los Modelos de Cajas en CSS (de hecho llevo unos días aprendiendo CSS) y he aprendido que tanto los valores ...
  #1 (permalink)  
Antiguo 29/03/2007, 12:06
 
Fecha de Ingreso: mayo-2006
Mensajes: 13
Antigüedad: 11 años, 7 meses
Puntos: 0
¿Dos cajas iguales con distinta anchura?

Hola.
Estoy haciendo pruebas con los Modelos de Cajas en CSS (de hecho llevo unos días aprendiendo CSS) y he aprendido que tanto los valores de márgenes externos o "margin" y el relleno o "padding" dependen del contenido y los elementos que le rodeen.

Sin embargo creía que si dos elementos (dos contenedores) tenían la misma anchura (width) en píxeles se verían iguales:

-->>Como no puedo todavía poner enlaces, podeís ver un pantallazo del ejemplo aquí: poner el http: y las barras invertidas--img338.imageshack.us/my.php?image=cajascsscw6.jpg

Sigo con el mensaje:

Pero eso no ha sido así, pués el contenedor areatexto tiene 720 px y al contenedor encabezado le tuve que poner 760 px. ¿Como puede ser esto?.

Este es el código de mis pruebas:

body {
background-color: black;

}
h1 {
font-family: "times new roman";
text-align: center;
color: Red;
}
h3 {
font-family: impact;
color: Green;
}
p {
font-family: "balthazar regular";

}
#encabezado {
background-color:white;
width:760px;
padding:10px 10px 10px 10px;
border:5px solid red;
margin:0px 0px 80px 270px;
}
#menu {
float: left;
background-color:white;
width:130;
height:440;
padding:10px 50px 10px 20px;
border:5px solid red;
margin-left:10px;
}
#areatexto {
background-color:white;
width:720px;
padding:10px 30px 10px 30px;
border:5px solid red;
margin-left:270px;
}

Otra cosa.
Acabo de ver, por encima, las FAQs de CSS y tienen muy buena pinta. Pero me llamo la atención que no teniais nada sobre Cajas y si sobre Capas de las que todavía no conozco nada (excepto alguna imagen por ahí) y me preguntaba si vienen ha ser lo mismo, ya que en mis pruebas con Cajas comprobé que también se podian colocar unas encima de otras.
Muchas gracias y saludos.
  #2 (permalink)  
Antiguo 03/07/2007, 19:33
 
Fecha de Ingreso: junio-2007
Mensajes: 8
Antigüedad: 10 años, 5 meses
Puntos: 0
De acuerdo Re: ¿Dos cajas iguales con distinta anchura?

A ver. El tamaño final de una caja es la suma del tamaño ke le demos en width o height mas el padding, mas margin.
Ejemplo:
Tu encabezado hace width:760px mas padding:10px 10px 10px 10px, (que quiere decir 10px a izquierda+10px a derecha=20px) mas border:5px (que quiere decir 5px a la izquierda + 5px a la derecha=10px)
En total encabezado=760+20+10=790px
Area texto= a width:720px mas padding:10px 30px 10px 30px(que quiere decir 30px a la izquierda+30px a la derecha=60px) mas border 5px (que quiere decir 5 px a la izquierda+5px a la derecha=10px)
En total areatexto=720+60+10=790px
Supongo que tu duda se refiere a esto. Un Briconsejo: A mi me han enseñado que lo mejor en estos casos en al lado del width te pongas un comentario del tipo por ejemplo:

width:760px; /*790-20-10*/
osea el tamaño final que tiene la caja y la resta del padding y el border.

Espero que te haya sido de ayuda.
Suerte
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 07:43.