Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Temas - SamML

Páginas: [1]
1
Dejo un intento de aporte, para mi tambien, de como centrar contenedores de forma absoluta a modo de "prompt" o alerta al entrar a una página por ejemplo. Este método parece que es compatible con la mayoría de navegadores. Y en pequeños dispositivos se adapta al 100% del ancho de la pantalla.

Si hay algo mal comentarlo please.

Saludos!

Código: [Seleccionar]
<!DOCTYPE html>
<html lang=en> <head><meta name=viewport content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta charset=UTF-8><title>Centrar contenedor verticalmente de forma absoluta, SamML</title><style>
        @charset "utf-8";*{margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}/*SamML para aprendeaprogramar.com*/
        .contenedor:after, .contenedor:before {
        display:table;
        content:" ";
        zoom:1;
        }
        .contenedor {
        position:fixed;
        width:100%;
        height:100%;
        padding:15px
        }
        .contenedor:after {clear:both;}
        .absolute-v-center {
       
        background-color: #444;
        color:white;
        position: fixed;
        width:100%;height:100%;top:0%;left:0%;
        margin: 0;
        z-index:1000;
        }
        @media (min-width:500px){
        .absolute-v-center {top: 50%;left: 50%;height: 50%;width: 50%;margin: -15% 0 0 -25%;}
        }
        </style></head> <body> <div class=contenedor> <div class=absolute-v-center> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> </div> </div> <div> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> </div> <div class=container> <div> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum reiciendis at facilis earum reprehenderit, qui fugiat error tenetur voluptas veritatis, recusandae doloremque provident fugit sequi nam nemo sapiente odio eius.</h1> </div> </div> </body>

</html>

2
Hola a todos,

Quería tratar de dejar un aporte acerca de  el método de la rejilla, aunque sea ya bastante antiguo sigue evolucionando y se sigue utilizando en la mayoría de maquetaciones.

Muchos frameworks lo utilizan. Por ejemplo Bootstrap 3 ha adaptado un modelo de rejillas para maquetación adaptable (responsive) que funciona de maravilla y hace que la colocación de items deje de ser tediosa a la hora de programar una página. Basado en su método viene este aporte a modo de profundizar en el funcionamiento yo y el que lo necesite.

La teoría del uso de la rejilla o grid consiste en visualizar en entorno como si fuera una cuadricula donde se nos permite colocar columnas flotantes de un ancho determinado sin necesidad de recurrir a medidas si no a porcentajes, para facilitarnos trabajo.

Contaremos entonces con un elemento row y un elemento column. Y añadimos un elemento container que englobará el conjunto.

Lo primero a conocer, pues ha resultado el método mas eficaz a la hora de colocar elementos flotantes de esta forma, es la trampa del clearfix o "Clearfix hack".
Antes se utilizaba de modo que se añadía una clase CSS llamada clearfix y se aplicaba al selector :after para hacer un "clear:both" a continuación del elemento con dicha clase.
Esto ha evolucionado y ahora se considera que el método mas compatible es el de aplicar a los elementos anteriores y posteriores al elemento que vamos a utilizar como contenedor los atributos {display:table; content: " ";zoom:1;}

Se añade content porque es necesario al especificar display table. Y se añade Zoom:1 para navegadores IE6 e IE7. Esta acción digamos que genera un nuevo bloque "delante y detras" en todos los navegadores.  Es el que nos permite generar las filas o los "saltos de linea" utilizando clear:both en ellas.
Con todo esto pues las primeras clases que definiremos serán:
Código: [Seleccionar]
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.row:before, .row:after {
display: table;
content: " ";
zoom:1;
}
.column {
position: relative;
float:left;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.container:before, .container:after {
display: table;
content: " ";
zoom:1;
}
.row:after {
clear:both;
}

Decir que el padding y el margin(negativo) de el contenedor y la fila son "de amarre" por compatibilidades y las columnas pues quedan, como se ve, con un padding de 15px. Esto es visual y nos puede interesar adaptarlo o no.

Añadimos también las propiedades al principio
Código: [Seleccionar]
* {
  margin:0px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
Para el dimensionamiento de bloques de contenido adaptable.  :o y un margin:0 ; a modo de reset cutre.  :-X

Asi pues ya tenemos el núcleo del sistema y nos falta definir las columnas.
Aquí es donde decidimos el diseño responsive y aplicamos tamaños. Para simplificar vamos a suponer que solo dispondremos de dos tamaños de columna de 50% y 20% del ancho y adaptamos el contenedor para 3 resoluciones.

Decir que no es el sistema exacto que utiliza Bootstrap que mencioné al principio pero si la metodología. Donde especificamos en la clase de la columna el tamaño del dispositivo. Usaré small, medium y large.
Y definimos en primer lugar los atributos en dispositivos pequeños por lo que usamos min-width para especificarlos dejando la que clase "global" (que definimos antes) sea la que afecte a los pequeños dispositivos.
Como dato ya que se ha hablado de este tema bastante, este metodo a mi forma de verlo  es el "partir desde el 0" en las resoluciones y no desde una resolución conocida (método también utilizado) personalmente considero que esta es la forma mas correcta por muchos motivos y al final a mi parecer la mas simple.


Y al grano colocamos:
Código: [Seleccionar]

.column.smallscreen-20{
    width:20%;
}
.column.smallscreen-50{
    width:50%;
}

@media (min-width:518px) {
    .container {
        width:500px;}
    .column.mediumscreen-20 {
    width:20%;}
    .column.medium-50 {
    width:50%;}
   
}
@media (min-width:922px) {
    .container {
        width:900px;}
    .column.largescreen-20 {
    width:20%;}
     .column.largescreen-50 {
    width:50%;}
   
}

Y de esta forma podemos especificar mediante la clase que tamaño tomara la columna en cada resolución. Si queremos que en resolucion pequeña sea el grande class="column smallscreen-50" por ejemplo y podemos ir anidando si queremos que cambie el tamaño porcentual de una resolución a otra.

Quizá esté algo mal si eso comentar y espero a alguien le sirva

A modo de ejemplo y resumen dejo la siguiente página.
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>Grid Responsive, SamML para aprenderaprogramar.com</title>
        <style>
        @charset "utf-8";*{margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}.row{margin-right:-15px;margin-left:-15px}.row:before,.row:after{display:table;content:" ";zoom:1}.column{position:relative;float:left;min-height:1px;padding-right:15px;padding-left:15px}.container:before,.container:after{display:table;content:" ";zoom:1}.row:after{clear:both}.column.smallscreen-20{width:20%}.column.smallscreen-50{width:50%}@media(min-width:518px){.container{width:500px}.column.mediumscreen-20{width:20%}.column.medium-50{width:50%}}@media(min-width:922px){.container{width:900px}.column.largescreen-20{width:20%}.column.largescreen-50{width:50%}}h1{padding:10px;color:#393}.column:nth-child(2n+1) p{padding:15px 15px;color:white;background-color:#333}.column:nth-child(2n) p{padding:15px 15px;color:black;background-color:#EEE}/*SamML para aprenderaprogramar.com*/
        </style>
    </head>
    <body>
        <h1>Podemos insertar elementos de ancho porcentual que habiamos definido, en una fila, y cambian de linea si sobrepasa el tamaño </h1>
        <div class="container">
            <div class="row">
                <div class="column smallscreen-50 mediumscreen-20 largescreen-20">
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div class="column smallscreen-50 mediumscreen-20 largescreen-20">
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div class="column smallscreen-50 mediumscreen-50 largescreen-20">
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
               
            </div>
            <h1>O podemos insertar una fila nueva</h1>
            <div class="row">
                <div class="column smallscreen-50 mediumscreen-50 largescreen-20">
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div class="column">
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div class="column smallscreen-50 mediumscreen-50 largescreen-50">
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div class="column">
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
                <div class="column smallscreen-50 mediumscreen-50 largescreen-20">
                    <p>Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
        </div>
    </body>
</html>

¡Saludos!

Páginas: [1]

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".