Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: fparra en 24 de Enero 2016, 05:32
-
Qué tal :), mi consulta aquí es respecto a un cierto contenido tratado en susodicha clase: CU01036D. Habla sobre el cálculo del ancho total, y es aquí donde quiero detenerme:
/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial;}
body {width:410px; border-style: dotted; border-width: 2px;}
div {border-style: solid; border-width:2px;
margin:7px; padding:7px;
background-color: #FFEFD5; }
/*La anchura del contenido de la caja 1 es:
410 - 14 de margin - 4 de border - 14 de padding, resulta 378 px*/
#caja1{ border-color:red;}
#caja2{ margin:0 7px 7px 7px; border-color:blue;
width:65px; float:left; height:200px; }
/*Ancho total 410 px - 12px bordes - 28 px de margin - 42 de padding -65px contenido caja 2
-65 px contenido caja 4 obtenemos 198 px*/
#caja3{ margin:0 7px 7px 0px; border-color:green;
width:198px; float: left; height: 300px;}
#caja4{ margin:0; border-color:orange; float: left; width:65px; height:200px;}
.limpiador {clear:both; padding:0; border-style:none; }
En este código se trata de explicar el cálculo del ancho del contenido y el total. Sin embargo, creo que no se logra entender bien la idea, ya que no está bien detallado el procedimiento del "cómo llegar a tal cifra"
Si alguien en este foro fuese tan amable de explicarme paso a paso qué significa cada línea de comentario, con sus respectivos detalles, por ejemplo:
/*Ancho total 410 px - 12px bordes - 28 px de margin - 42 de padding -65px contenido caja 2
-65 px contenido caja 4 obtenemos 198 px*/
- ¿De dónde salen esos 42?
- ¿de qué elementos estamos hablando?
- ¿Esta sumando los paddings de los otros elementos y luego se los resta?
De ante mano chicos, muchas gracias, es que realmente me dejó plop la explicación en los comentarios del código. :P
-
Hola fparra.
Para empezar falta el código html, aquí dejo el html con el css.
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style>
/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial;}
body {width:410px; border-style: dotted; border-width: 2px;}
div {border-style: solid; border-width:2px;
margin:7px; padding:7px;
background-color: #FFEFD5; }
/*La anchura del contenido de la caja 1 es:
410 - 14 de margin - 4 de border - 14 de padding, resulta 378 px*/
#caja1{ border-color:red;}
#caja2{ margin:0 7px 7px 7px; border-color:blue;
width:65px; float:left; height:200px; }
/*Ancho total 410 px - 12px bordes - 28 px de margin - 42 de padding -65px contenido caja 2
-65 px contenido caja 4 obtenemos 198 px*/
#caja3{ margin:0 7px 7px 0px; border-color:green;
width:198px; float: left; height: 300px;}
#caja4{ margin:0; border-color:orange; float: left; width:65px; height:200px;}
.limpiador {clear:both; padding:0; border-style:none; }
</style>
</head>
<body>
<div id="caja1">Caja 1</div>
<div id="caja2">Caja 2</div>
<div id="caja3">Caja 3</div>
<div id="caja4">Caja 4</div>
<div class="limpiador"></div>
</body>
</html>
Esto nos daría un resultado mas o menos como este.
(http://i.imgur.com/giD11M3.png)
Creo que con esto podrás resolver tus dudas.
Saludos.
-
Genial esa imagen como explicación Pedro, lo has bordado ;D