Foros del Web » Soporte técnico » Ayuda General »

cajas

Estas en el tema de cajas en el foro de Ayuda General en Foros del Web. buenos días!! Gracias a la ayuda de los compañeros de este magnífico foro, pude solucionar un problema que tuve con un ejercicio que tenia que ...
  #1 (permalink)  
Antiguo 05/02/2013, 04:24
 
Fecha de Ingreso: enero-2013
Mensajes: 16
Antigüedad: 11 años, 2 meses
Puntos: 0
cajas

buenos días!!

Gracias a la ayuda de los compañeros de este magnífico foro, pude solucionar un problema que tuve con un ejercicio que tenia que entregar para un examen de temario.

Una vez enviado, pude tener el tiempo necesario para estudiar el temario concretamente y razonar y comprender el mismo.

El problema ahora radica en que, en uno de los ejercicios que envié psoteriormente, creía que estaba perfectamente, pero el profesor me respondió diciéndome algunas reseñas con correcciones, las cuales, por mucho leerlas y releerlas, leer la parte del temario en concreto a esa lección, etc... pues no consigo saber en qué me equivoqué y qué puedo hacer para realizarlo bien.

El ejercicio en cuestión es es siguiente:


Si partimos de una caja de información con las siguientes características: 300 píxeles de ancho, 15 píxeles de margen en todos sus lados, 20 píxeles de relleno por izquierda y 10 por la derecha y un borde de 5 pixeles de grosor por todos sus lados, explica cuánto espacio ocupará horizontalmente la caja (no sólo visualmente) y cuánto podrá ocupar una caja que esté en su interior.
El ancho de la caja que pueda caber en el interior debes razonarlo más que calcularlo.



Por otro lado, la referencia de correción del profe es la siguiente:

No es correcto, debes repetir el ejercicio:

1.- El ancho total equivale a la suma de: margen exterior izquierdo + borde izquierdo + margen interior izquierdo + ancho + margen interior derecho + borde derecho + margen exterior derecho

2.- El ancho total que puede ocupar un elemento en su interior no es el que indicas, y es más un tema de razonar que calcular.



Espero que con un poco de suerte puedan ayudarme, porque ya no sé qué puedo hacer.
  #2 (permalink)  
Antiguo 05/02/2013, 04:38
Avatar de hasdpk  
Fecha de Ingreso: agosto-2011
Ubicación: $spain->city( 'Arucas' );
Mensajes: 1.800
Antigüedad: 12 años, 7 meses
Puntos: 297
Respuesta: cajas

Tu profesor tiene razón.

Él te pregunta por el tamaña o que ocupa en en el documento (no en la pantalla).

PD: Creo que estás hablando de CSS.
__________________
Freelance Developer — www.rubenmartin.me PHP, SQL, Wordpress, Prestashop, Codeigniter, Laravel
RegaloConsolas — www.regaloconsolas.com Sorteo juegos, consolas y accesorios
  #3 (permalink)  
Antiguo 05/02/2013, 04:47
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: cajas

Échale un vistazo a este artículo.

Es una parte importante del desarrollo web que tienes que entender cómo funciona porque básicamente todo elemento se basa en ese modelo de cajas.
  #4 (permalink)  
Antiguo 05/02/2013, 06:41
 
Fecha de Ingreso: enero-2013
Mensajes: 16
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: cajas

creo que tal vez lo haya entendido un poco mejor, entonces ahora me queda la siguiente duda: si la medida horizontal es tal y como él dice de margen exterior izquierdo + borde izquierdo + margen interior izquierdo + ancho + margen interior derecho + borde derecho + margen exterior derecho; entonces no entiendo qué es cada una de esas partes, porque en ningún lado he visto lo de margen exterior izq./dcho.

Por otro lado, si razono un poco, creo que la solución para saber lo que mide la caja de dentro sería:

sumar margen exterior izquierdo + borde izquierdo + margen interior izquierdo + ancho + margen interior derecho + borde derecho + margen exterior derecho. Al resultado de esto, le resto el margen expuesto en el enunciado ( 15 px por todos sus lados), es decir, tendría que restarle 15 px por la derecha y 15 por la izquierda; entonces en ese hueco quedaría la caja interior.

¿CORRECTO?
  #5 (permalink)  
Antiguo 05/02/2013, 07:26
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: cajas

El margen exterior es el margen normal —en inglés y CSS margin— y el margen interior, es el padding. Normalmente cuando se habla de margen se habla de margin y cuando se habla de padding realmente nunca nadie lo traduce, y nos referimos a él como padding.

Es decir, según tu profesor (que no es que sea incorrecto, sino jerga castellanizada ):
  • margen exterior = margin
  • margen interior = padding

Cita:
Iniciado por faluar Ver Mensaje
Por otro lado, si razono un poco, creo que la solución para saber lo que mide la caja de dentro sería:

sumar margen exterior izquierdo + borde izquierdo + margen interior izquierdo + ancho + margen interior derecho + borde derecho + margen exterior derecho. Al resultado de esto, le resto el margen expuesto en el enunciado ( 15 px por todos sus lados), es decir, tendría que restarle 15 px por la derecha y 15 por la izquierda; entonces en ese hueco quedaría la caja interior.
¿CORRECTO?
Si eso es lo que ocuparía la caja visualmente. Pero, no te están preguntando eso, te están preguntando cuanto ocuparía una caja que esté dentro de esa caja.

Código HTML:
Ver original
  1. <div id="caja">
  2.   <div></div> <!-- ¿Cuánto ocuparía esta caja? -->
  3. </div>
  #6 (permalink)  
Antiguo 05/02/2013, 07:54
 
Fecha de Ingreso: enero-2013
Mensajes: 16
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: cajas

colega, me vas a matar, pero sigo sin entenderlo....
  #7 (permalink)  
Antiguo 05/02/2013, 10:19
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: cajas

Hasta que inventen un botón de "matar usuario" puedes estar tranquilo.

¿Qué cosa no entiendes? ¿Lo que te pregunta el profesor o no entiendes nada del modelo de cajas?
  #8 (permalink)  
Antiguo 06/02/2013, 13:21
 
Fecha de Ingreso: enero-2013
Mensajes: 16
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: cajas

jajajaj!! XD.


pues lo que no he entedido es tu respuesta. Ya que en el enunciado me pide que diga cuanto mide pero no sólo visualmente. Con lo cual, entiendo que la caja de dentro debe medir:

300 px (el ancho que dice el enunciado) menos los 15 px ( del margen de cada lado según el enunciado). Con lo cual estamos hablando de 300-15-15 = 270.
  #9 (permalink)  
Antiguo 07/02/2013, 03:49
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: cajas

Cita:
Iniciado por faluar Ver Mensaje
300 px (el ancho que dice el enunciado) menos los 15 px ( del margen de cada lado según el enunciado). Con lo cual estamos hablando de 300-15-15 = 270.


El margen exterior no afecta al interior de la caja.
  #10 (permalink)  
Antiguo 07/02/2013, 06:57
 
Fecha de Ingreso: enero-2013
Mensajes: 16
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: cajas

Ok BONEZ, muchas gracias!

¿Entonces cúanto mide horizontalmente la caja principal y la caja de interior?

Joder! no me entero.... discúlpame tío!
  #11 (permalink)  
Antiguo 09/02/2013, 10:20
 
Fecha de Ingreso: enero-2013
Mensajes: 16
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: cajas

entre mas lo miro y mas lo intento comprender, pues más me lio. Por favor, que alguien me ayude.
  #12 (permalink)  
Antiguo 09/02/2013, 20:07
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: cajas



Por cortesía de harvard.edu.

El ancho que ocupa la caja en el documento es igual a la suma de todas las medidas laterales especificadas.
Y la caja interior será igual al ancho especificado de la caja padre.

Ya más claro es decirte la respuesta.
  #13 (permalink)  
Antiguo 10/02/2013, 18:37
 
Fecha de Ingreso: enero-2013
Mensajes: 16
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: cajas

muchas gracias Bonez!! Ahora sí que si!!!

Un saludo de otro paisano canario
  #14 (permalink)  
Antiguo 11/02/2013, 15:29
 
Fecha de Ingreso: enero-2013
Mensajes: 16
Antigüedad: 11 años, 2 meses
Puntos: 0
Respuesta: cajas

Buenas tardes tio!!

Quería darte las gracias por toda la ayuda que me has prestado y aprovechar tb para comunicarte que ya lo he entendido y lo he enviado y parece ser que está todo bien. MUCHISIMAS GRACIAS!!!

Por otro lado, resulta que también tengo otro ejercicio pendiente, el cual lo he enviado, pero me corrige de nuevo otras cosas que no termino de entender y tal vez tú puedas ayudarme.

EL profesor me pone el siguiente enunciado:

Crea un documento XHTML con DOCTYPE transicional con estilos internos que presente una página como la que se muestra.


Estas son algunas de las consideraciones a tener en cuenta:

• Página centrada de 800 píxeles de ancho.

• Reinicializa todos los márgenes y rellenos como primera declaración de estilos.

• Cabecera y pie de página que ocupen todo el ancho y cuyas alturas se ajusten al contenido.

• Distancia entre elementos de 15 píxeles.

• Una columna a la derecha de 200 píxeles de ancho.

• El primer bloque de texto simulará texto saliéndose por ambos lados de la caja. Los bloques de texto tendrán un borde de 5 píxeles.





Yo le respondí con lo siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
body
{
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-weight: normal;
text-transform: lowercase;
color: #000000;
text-decoration: none;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 100%;
background-color: #DFDFDF;
}
div, dl, dt, dd, ol, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td
{
margin: 0px;
padding: 0px;
}
#Contenedor
{
padding: 0px;
height: auto;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FDFDFD;
}
#Cabecera
{
padding: 0px;
height: auto;
width: 750px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #666666;
}
#Cabecera #Titulo {
margin-top: 66px;
font-family: Verdana, Geneva, sans-serif;
font-size: 36px;
font-weight: bold;
font-variant: normal;
color: #FF0000;
text-transform: uppercase;
margin-left: 15px;
position: absolute;
}
#Cabecera #SubTitulo {
margin-top: 110px;
margin-left: 23px;
font-family: Verdana, Geneva, sans-serif;
font-weight: bold;
text-transform: capitalize;
color: #FFFFFF;
font-size: 12px;
position: absolute;
}
#Pie
{
padding: 0px;
height: auto;
width: 750px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #666666;
position: absolute;
left: 0%;
right: 0%;
bottom: 0px;
}
#Pie #Titulo {
margin-top: 66px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
font-variant: normal;
color: #FFFFFF;
text-transform: uppercase;
margin-left: 15px;
position: absolute;
}
#Izquierda
{
clear: left;
height: auto;
width: 535px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
background-color: #E5E5E5;
float: left;
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 25px;
display: inline-block;
}
#Derecha
{
clear: both;
height: auto;
width: 170px;
padding-top: 20px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 15px;
background-color: #B6B6B6;
float: right;
margin-top: 15px;
margin-right: 25px;
margin-bottom: 0px;
margin-left: 0px;
display: inline-block;
right: auto;
left: 0px;
}
#Texto_1
{
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 5px dashed #D6D6D6;
background-color: #F9F9F9;
height: auto;
width: 500px;
}
#Texto_1 p#P1 {
margin-left: -15px;
margin-top: 15px;
}
#Texto_2 p#P2 {
margin-top: 15px;
margin-left: 15px;
}
#Texto_2
{
padding: 0px;
margin-top: 15px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 5px dashed #D6D6D6;
background-color: #F9F9F9;
height: auto;
width: 500px;
}
</style>
</head>
<body>
<div id="Contenedor">
<div id="Cabecera"><h1 id="Titulo">cabecera</h1> <h2 id="SubTitulo">subtitulo de la cabecera</h2></div>
<div id="Derecha">Esto es la columna derecha</div>
<div id="Izquierda">
<div id="Texto_1"><p id="P1">esto es el bloque 1</p></div>
<div id="Texto_2"><p id="P2">esto es el bloque 2</p></div>
</div>
<div id="Pie"><h3 id="Titulo">esto es el pie de pagina</h3></div>
</div>
</body>
</html>

El caso es que ahora me da la corrección y me dice lo siguiente:

Mejor, pero además de tener en cuenta que lo que yo te digo es una guía y no es únicamente lo que has de hacer (si no te haría yo el ejercicio), has de tener en cuenta:

0.- Los nombres que yo te dí, como Cabecera o Izquierda, son para explicarte cómo se llaman... tú siempre llámalos en minúsculas.

1.- Mete "izquierda" y "derecha" dentro de un div llamado "Cuerpo" (en minúsculas)

2.- Haz flotar la cabecera, el cuerpo y el pie hacia la izquierda posicionándolos relativamente y dales un tamaño del 100%


Vamos a ver, con todo esto, la verdad que no veo donde me equivoco, necesito tu ayuda por favor.

Etiquetas: cajas
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:16.