« anterior próximo »
Páginas: [1]

Autor Tema: HTML y CSS Diseñar una página web estructurada en columnas estilos usar CU01057D  (Leído 2756 veces)

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
HTML y CSS Diseñar una página web estructurada en columnas estilos usar CU01057D
« 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:

Código: [Seleccionar]
<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:

Código: [Seleccionar]

.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*/

« Última modificación: 18 de Junio 2017, 12:38 por Alex Rodríguez »
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Columnas CSS - Ejercicio final (CU01057D)
« Respuesta #1 en: 27 de Abril 2017, 23:46 »
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
En línea

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Re:CSS. Estilos en columnas. (CU01057D)
« Respuesta #2 en: 29 de Abril 2017, 19:15 »
 ;D Gracias Pedro por la paciencia. Traté de no ver los ejemplos para darme cuenta.
Va mi nuevo intento.

CSS y explicacion:

Código: [Seleccionar]

.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*/


En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CSS. Estilos en columnas. (CU01057D)
« Respuesta #3 en: 03 de Mayo 2017, 23:05 »
Buenas.

Ahora queda mejor explicado, solo comentar que :
Código: [Seleccionar]
.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.
Código: [Seleccionar]
<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
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".