Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: alefaletti en 18 de Abril 2017, 01:44
-
Respuesta al ejercicio CU01057D del tutorial de fundamentos de desarrollo web con CSS usando como editor Notepad++
HTML:
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="CSS(57)ejfinal.css">
</head>
<body>
<div class="cols3">
<h1>en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y</h1>
<h2>aprenderaprogramar.com</h2>
</div>
<div class="cols3">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más. Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más. Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más.
CSS no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje de programación coloquialmente. CSS no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje de programación coloquialmente. CSS no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje de programación coloquialmente.
Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más. Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más.
</div>
</body>
</html>
CSS y explicacion:
.cols3
{-webkit-column-count:3; /*cantidad de columnas para Chrome, Safari, Android, iOs */
-webkit-column-gap: 40px; /*espacio entre columnas para Chrome, Safari, Android, iOs */
-webkit-column-rule: 1px solid #000; /*Ancho, estilo y color de las reglas divisorias de columnas para Chrome, Safari, Android, iOs */
-moz-column-count: 3; /*cantidad de columnas para Firefox */
-moz-column-gap: 20px; /*espacio entre columnas para Firefox */
-moz-column-rule: 1px solid #000; /*Ancho, estilo y color de la regla divisoria de columnas para Firefox*/
column-count: 3; /*cantidad de columnas sin especificar navegador */
column-gap: 20px; /*espacio entre columnas sin especificar navegador */
column-rule: 1px solid #000; /*Ancho, estilo y color de la regla divisoria de columnas sin especificar navegador*/
}
.cols3 h1, h2 {-webkit-column-span:all; -moz-column-span:all; column-span:all;}
/* Esta propiedad hace que el elemento se mueva a lo largo de todas las columnas. Las
abarva a manera de titulo*/
-
Buenas alefaletti.
El ejercicio no está mal, pero no está completo, sigues sin especificar a que elementos se aplican los estilos que explicas.
Te dejo unos ejemplos:
https://www.aprenderaprogramar.com/foros/index.php?topic=5290.msg20952#msg20952
https://www.aprenderaprogramar.com/foros/index.php?topic=4102.msg17230#msg17230
Saludos. ;D
-
;D Gracias Pedro por la paciencia. Traté de no ver los ejemplos para darme cuenta.
Va mi nuevo intento.
CSS y explicacion:
.cols3
{-webkit-column-count:3; /*cantidad de columnas para Chrome, Safari, Android, iOs para elementos cuya clase sea "cols3"*/
-webkit-column-gap: 40px; /*espacio entre columnas para Chrome, Safari, Android, iOs para elementos cuya clase sea "cols3"*/
-webkit-column-rule: 1px solid #000; /*Ancho, estilo y color de las reglas divisorias de columnas para Chrome, Safari, Android, iOs para elementos cuya clase sea "cols3"*/
-moz-column-count: 3; /*cantidad de columnas para Firefox para elementos cuya clase sea "cols3"*/
-moz-column-gap: 20px; /*espacio entre columnas para Firefox para elementos cuya clase sea "cols3"*/
-moz-column-rule: 1px solid #000; /*Ancho, estilo y color de la regla divisoria de columnas para Firefox para elementos cuya clase sea "cols3"*/
column-count: 3; /*cantidad de columnas sin especificar navegador para elementos cuya clase sea "cols3"*/
column-gap: 20px; /*espacio entre columnas sin especificar navegador para elementos cuya clase sea "cols3"*/
column-rule: 1px solid #000; /*Ancho, estilo y color de la regla divisoria de columnas sin especificar navegador para elementos cuya clase sea "cols3"*/
}
.cols3 h1, h2 {-webkit-column-span:all; -moz-column-span:all; column-span:all;}
/* Esta propiedad hace que el elemento h2, h1 se mueva a lo largo de todas las columnas siempre y cuando pertenezacan a un div cuya clase sea "cols3". h1 y h2 abarca la tabla a manera de titulo*/
-
Buenas.
Ahora queda mejor explicado, solo comentar que :
.cols3 h1, h2 {-webkit-column-span:all; -moz-column-span:all; column-span:all;}
/* Esta propiedad hace que el elemento h2, h1 se mueva a lo largo de todas las columnas siempre y cuando pertenezacan a un div cuya clase sea "cols3". h1 y h2 abarca la tabla a manera de titulo*/
Mas que hacer que se mueva a lo largo de todas las columnas, lo que hace es que los h1 y h2 que estén dentro de un elemento con class="cols3" se comporten como si no hubiese columnas.
Para ver apreciar mejor el efecto te he cambiado algo el código.
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css" media="screen">
.cols3
{-webkit-column-count:3; /*cantidad de columnas para Chrome, Safari, Android, iOs para elementos cuya clase sea "cols3"*/
-webkit-column-gap: 40px; /*espacio entre columnas para Chrome, Safari, Android, iOs para elementos cuya clase sea "cols3"*/
-webkit-column-rule: 1px solid #000; /*Ancho, estilo y color de las reglas divisorias de columnas para Chrome, Safari, Android, iOs para elementos cuya clase sea "cols3"*/
-moz-column-count: 3; /*cantidad de columnas para Firefox para elementos cuya clase sea "cols3"*/
-moz-column-gap: 20px; /*espacio entre columnas para Firefox para elementos cuya clase sea "cols3"*/
-moz-column-rule: 1px solid #000; /*Ancho, estilo y color de la regla divisoria de columnas para Firefox para elementos cuya clase sea "cols3"*/
column-count: 3; /*cantidad de columnas sin especificar navegador para elementos cuya clase sea "cols3"*/
column-gap: 20px; /*espacio entre columnas sin especificar navegador para elementos cuya clase sea "cols3"*/
column-rule: 1px solid #000; /*Ancho, estilo y color de la regla divisoria de columnas sin especificar navegador para elementos cuya clase sea "cols3"*/
}
.cols3 h1, h2 {-webkit-column-span:all; -moz-column-span:all; column-span:all;}
/* Esta propiedad hace que el elemento h2, h1 se mueva a lo largo de todas las columnas siempre y cuando pertenezacan a un div cuya clase sea "cols3". h1 y h2 abarca la tabla a manera de titulo*/
</style>
</head>
<body>
<div class="cols3">
<h1>en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y</h1>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más. Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más. Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más.
<h2>aprenderaprogramar.com</h2>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
CSS no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje de programación coloquialmente. CSS no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje de programación coloquialmente. CSS no es un lenguaje de programación propiamente dicho, aunque a veces se lo denomina lenguaje de programación coloquialmente.
Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más. Cursos de programación en diferentes lenguajes: pseudocódigo, Java, PHP, Visual Basic, HTML, CSS, Javascript y mucho más.
</div>
</body>
</html>
Saludos. ;D