Engadir un vídeo adaptable a dispositivos móbiles

En moitas ocasión non é previsible controlar o tamaño que debe de ter un vídeo á hora de engadilo ao Drupal. Isto ocorre nalguhas resolucións xa que as dimensións do vídeo superan o ancho dispoñible, ou no caso de que haxa cambios estrutura dos bloques, pasando de unha columna a dúas.

Para darlle remedio a este problema, debemos de empregar os estilos CSS.

 

A. UN VÍDEO DE YOUTUBE

 

1. Escollemos o vídeo de youtube desexado. Clic en compartir e posteriormente en inserir. Obtemos un código  html como o seguinte:

<iframe width="560" height="315" src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

2. Deste código eliminamos as dimensións de ancho de alto (width e height), quedado así:

<iframe src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

3. Inserirmos este código dentro do body do seguinte código html, quedando así:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <style>
    .video-responsive {
        height: 0;
        overflow: hidden;
        padding-bottom: 56.25%;
        padding-top: 30px;
        position: relative;
    }
    .video-responsive iframe, .video-responsive object, .video-responsive embed {
        height: 91%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
    </style>
</head>

<body>
    <div class="video-responsive">
        <iframe src="https://www.youtube.com/embed/9aksj92T41Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</body>
</html>

 

B. UN VÍDEO SUBIDO AO DRUPAL COMO DOCUMENTO ADXUNTO

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <style>
    .video-responsive {
        margin:0 auto;
        height: 0;
        overflow: hidden;
        padding-bottom: 56.25%;
        padding-top: 30px;
        position: relative;
    }
    .video-responsive video {
        height: 91%;
        left: 10%;
        position: absolute;
        top: 0;
        width: 80%;
    }
    </style>
</head>

<body>
    <div class="video-responsive">
        <video controls="controls">
            <source src="http://www.edu.xunta.gal/centros/crasantacomba/system/files/CESTA%20VIAXEIRA%20DE%20OVOS.mp4" type="video/mp4" />
            O teu navegador non soporta este vídeo.
            </video>
    </div>
</body>
</html>

 

 

Como facer unha plantilla (layout) de maneira manual sen empregar táboas

En ocasións queremos facer unha plantilla para engadir fotos, texto, etc e que non se movan os contidos á hora de editar  unha páxina web, tanto en Drupal como programando directamente en html.

Aínda que hai moitas alternativas, expoño unha sinxela de entender: a creación de celas con filas e columnas.

1. O primeiro paso é crear o contedor global. Eu voulle chamar wrapper.

2. Dentro de wrapper engadimos outro div co nome de contidos. A utilizade de independizar contedores é a de pode engadirlles fondos, centrarlos, configurar as fontes para cada div, etc.

3. Seguidamente inserimos dentro de contidos un div cunha clase fila.

4. E finalmente dividimos a fila en tantas columnas como desexemos, iso si, tendo en conta o espazo entre as mesmas. Isto podemos facelo con float left e estudando os pixeles ou porcentaxe, ou ben, xa de forma máis cómoda, empregando a clase flexbox, que nos facilita o cálculos e a disposición na pantalla.

Vou definir o div en html do seguinte xeito: <div class="col tres estilo_columna"></div>

 

Con float-left:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    html, body{
        width:100%;
    }
    .wrapper{
        width:80%;
        height:400px;
        border:solid 2px black;
        padding: 10px;
        margin:0 auto;
    }

    .contidos{
        margin:0 auto;
        width:90%;
        height: 300px;
        border:solid 2px grey;
    }

    .fila{
        width:95%;
        height:200px;
        margin:0 auto;
        border:solid 1px blueviolet;
    }

    .col{
        float:left;
        height:80px;
        margin-left:10px;
        margin-right:10px;
    }

    .tres{
        width:100px;
    }

    .estilo_columna{
        background:olive;
    }
</style>
<body>
    <div class="wrapper">
        <h2>wrapper</h2>
        <div class="contidos">
            <h3>contidos</h3>
            <div class="fila">
                <h4>fila</h4>
                <div class="col tres estilo_columna"></div>
                <div class="col tres estilo_columna"></div>
                <div class="col tres estilo_columna"></div>
            </div>
        </div>
    </div>
    
</body>
</html>

Se queremos facelo empregando porcentaxes e non en pixeles, para que o contido se adapte aos dispositivos móbiles, podemos deixar un marxe á esquerda e á dereita do 3%. Poderíamos definir as clases col e tres do seguinte xeito:

    .col{
        float:left;
        height:80px;
        margin-left:3%;
        margin-right:3%;
    }

    .tres{
        width:27.3%;
    }

Para calcular o ancho que lle damos á clase tres, debemos de ter en conta o ancho dos espazos intermedios, fixándonos que entre celas é do 6%, e nos bordes do 3%.

ancho_cela=(100 -(3*6))/3=82/3=27.3%

 

Sen embargo, debemos de ter en conta que cada vez que empregamos un float left, debemos de inserir un clear:both; pois os contidos que veñen a continuación pódense ver afectados polo float:left. Para isto, engadiremos un clear:both antes e despois da clase fila, que é o elemento pai das tres columnas. Aínda que chegaría con clear:both, voulle dar máis seguridade para que teñamos certeza de que queda limpo como é debido:

.fila:after, .fila:before{
    content: "";
    width:0;
    height: 0;
    clear:both;
    display:block;
    overflow: hidden;
    visibility: hidden;
}

 

E o código do que levamos feito queda do seguinte xeito:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    html, body{
        width:100%;
    }
    .wrapper{
        width:80%;
        height:400px;
        border:solid 2px black;
        padding: 10px;
        margin:0 auto;
    }

    .contidos{
        margin:0 auto;
        width:90%;
        height: 300px;
        border:solid 2px grey;
    }

    .fila{
        width:95%;
        height:200px;
        margin:0 auto;
        border:solid 1px blueviolet;
    }

   
    .col{
        float:left;
        height:80px;
    }

    .aux_left{
        width:3%;
        background:greenyellow;
    }

    .aux_right{
        width:3%;
        background:pink;
    }

    .tres{
        width:27.3%;
    }

    .estilo_columna{
        background:olive;
    }

    p{
        text-align:center;
    }

    .fila:after, .fila:before{
    content: "";
    width:0;
    height: 0;
    clear:both;
    display:block;
    overflow: hidden;
    visibility: hidden;
    }
    
</style>
<body>
    <div class="wrapper">
        <h2>wrapper</h2>
        <div class="contidos">
            <h3>contidos</h3>
            <div class="fila">
                <h4>fila</h4>
                <div class="col aux_left"> <p>3%</p></div>
                <div class="col tres estilo_columna"><p>27.3%</p></div>
                <div class="col aux_right"> <p>3%</p> </div>
                <div class="col aux_left"><p>3%</p> </div>
                <div class="col tres estilo_columna"><p>27.3%</p></div>
                <div class="col aux_right"> <p>3%</p></div>
                <div class="col aux_left"> <p>3%</p></div>
                <div class="col tres estilo_columna"><p>27.3%</p></div>
                <div class="col aux_right"><p>3%</p> </div>
            </div>
        </div>
    </div>
    
</body>
</html>

CON FLEXBOX

Con flexbox, simplifícase moito. Tan só no elemento pai das columnas (neste caso fila), engadimos display:flex; e justify-content:space-around; A propia clase xa nos divide o espazo restante entre os ocos, de igual que facíamos no caso anterior, empregando float:left;

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    html, body{
        width:100%;
    }
    .wrapper{
        width:80%;
        height:400px;
        border:solid 2px black;
        padding: 10px;
        margin:0 auto;
    }

    .contidos{
        margin:0 auto;
        width:90%;
        height: 300px;
        border:solid 2px grey;
    }

    .fila{
        width:95%;
        height:200px;
        margin:0 auto;
        border:solid 1px blueviolet;
        display:flex;
        justify-content: space-around;
        
    }
    .col{
        height:80px;
    }
    .tres{
        width:27.3%;
    }
    .estilo_columna{
        background:olive;
    }
    p{
        text-align:center;
        color:white;
    }
    
</style>
<body>
    <div class="wrapper">
        <h2>wrapper</h2>
        <div class="contidos">
            <h3>contidos</h3>
            <div class="fila">
                <div class="col tres estilo_columna"><p>27.3%</p></div>
                <div class="col tres estilo_columna"><p>27.3%</p></div>
                <div class="col tres estilo_columna"><p>27.3%</p></div>
            </div>
        </div>
    </div>
    
</body>
</html>

CON GRID

Coa clase grid, o deseño aínda se simplifica máis. Nin tan sequera temos porque definir as filas. Xa se encarga grid de todo. Velaquí temos un exemplo:

 

E este é o código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    html, body{
        width:100%;
    }
    .wrapper{
        width:80%;
        height:400px;
        border:solid 2px black;
        padding: 10px;
        margin:0 auto;
    }

    .contidos{
        margin:0 auto;
        width:90%;
        height: 300px;
        border:solid 2px grey;
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap:10px;
    }

    .col{
        height:80px;
    }
   
    .estilo_columna{
        background:olive;
    }
    p{
        text-align:center;
        color:white;
    }
    
</style>
<body>
    <div class="wrapper">
        <h2>wrapper</h2>
        <div class="contidos">
            
            
                <div class="col estilo_columna"></div>
                <div class="col estilo_columna"></div>
                <div class="col estilo_columna"></div>
            
        </div>
    </div>
    
</body>
</html>

Centrar unha imaxe horizontalmente

OPCIÓN 1. Con margin:0 auto;. Debemos colocar un display:block, xa que por defecto as imaxes son elementos inline-block. Se colocasemos o margin:0 auto; dentro do elemento pai, serviría para centrar este, pero non para centrar a imaxe.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        width:100%;
    }    
    img{
        display:block;
        margin:0 auto;
    }  
    </style>
</head>
<body>
        <img src="https://picsum.photos/200/300" alt="">
</body>
</html>

 

OPCIÓN 2. Con align-text:center. Neste caso debemos de colocar align-text:center no elemento pai. Neste exemplo colocámolo no body. Sen embargo, o normal é inserir a imaxe dentro dun div, e colocar o align-text no div pai.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        width:100%;
        text-align: center;
    }    
    img{
        
    }  
    </style>
</head>
<body>
        <img src="https://picsum.photos/200/300" alt="">
</body>
</html>

 

OPCIÓN 3. Empregamos o margin:0 auto para centrar un div, e tamén text-align:auto dentro do div pai.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .wrapper{
        width: 300px;
        height: 400px;
        margin:0 auto;
        background:grey;
        text-align:center;        
    }  
    </style>
</head>
<body>
        <div class="wrapper">
            <img src="https://picsum.photos/200/300" alt="">
        </div>
</body>
</html>

Se ademais queremos centrala verticalmente dentro do div pai, podemos facelo de varios xeitos. Por exemplo inserir a imaxe dentro dun div, que sexa fillo do div wrapper. Ou máis sinxelo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .wrapper{
        width: 300px;
        height: 400px;
        margin:0 auto;
        background:grey;
        text-align:center;        
    }  
    img{
        height:300px;
        margin-top:200px;
        transform:translateY(-50%)
    }
    
    </style>
</head>
<body>
        <div class="wrapper">
            <img src="https://picsum.photos/200/300" alt="">
        </div>
</body>
</html>

Centrar texto nun div

A. Nesta primeira opción centramos horizontalmente o contido. Para isto creamos un div con clase contido e ademais de darlle as dimensións de alto e ancho, aplicamoslle un margin 0 auto. Seguidamente engadimos outro div dentro do cal está inserido o texto. Neste segundo div, fillo de contido, aplicamos un display:table-cell e un vertical-align:middle.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Centrar div</title>
    <style>
    .contido{
        margin:0 auto;
        width:300px;
        height:200px;
        background:black;
    }    
    .texto{
        height:200px;
        display:table-cell;
        vertical-align: middle;
    }

    .texto p{
        color:white;
    }
    </style>
</head>
<body>
    <div class="contido">
        <div class="texto">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Aut quas voluptas culpa ea corporis alias nobis vel, doloribus illo obcaecati.</p>
        </div>
    </div>
</body>
</html>

 

B. Na segunda opción, centramos o div fillo texto empregando a propiedade de CSS transform. Para isto ao div pai configuramos a propiedade de position como relative. O div fillo (texto), configúrase coa propiedade absolute, para desprazalo div fillo o 50% da altura do elemento pai, contido. Seguidamente facemos un transform:translateY(-50%); para subir de novo o 50% da altura do div fillo texto.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Centrar div</title>
    <style>
    .contido{
        margin:0 auto;
        width:300px;
        height:200px;
        background:black;
        position:relative;
    }    
    .texto{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
    }

    .texto p{
        color:white;
    }
    </style>
</head>
<body>
    <div class="contido">
        <div class="texto">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Aut quas voluptas culpa ea corporis alias nobis vel, doloribus illo obcaecati.</p>
        </div>
    </div>
</body>
</html>

Una práctica máis completa podémola ver no seguinte exemplo, incluso empregando o media query para visualizalo correctamente en dispositivos móbiles.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
   
<style>
        .strong{
            font-weight: bold;
        }  
        .titulo_seccion{
            font-family: Verdana, Geneva, Tahoma, sans-serif, serif;
            font-size:25px;
            font-weight: 100;
            text-align: center;
            color:white;
        }

        .contenido_seccion {
            font-family: Verdana, Geneva, Tahoma, sans-serif, serif;
            text-align: left;
            font-size: 14px;
            color:white;   
        }

        .contenido_seccion a{
            color:black;
            text-decoration:none;
        }
        
        #diseño{
            width:100%;
            height:355px;
            overflow: hidden;
            background:#7d5c7d;
            position:relative;
            
        }

        #diDesarrollo{
            width:50%;
            position:absolute;
            top:50%;
            left:25%;
            transform:translateX(-25%);
            transform:translateY(-50%);
      
        }

        @media  (max-width: 480px) {
            #diseño{
            height:415px;
            position:relative;
            }

            #diDesarrollo{
            width:95%;
            position:absolute;
            top:50%;
            left:2.5%;
            transform:translateX(-2.5%);
            transform:translateY(-50%);
            }
                    
        }    
   
 </style>
</head>
<body>
        <section id="diseño">
                <article id="diDesarrollo">
                    <h3 class="titulo_seccion">Texto centrado</h3>
                    <p class="contenido_seccion">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                         Totam, deserunt officia exercitationem hic accusamus ipsam optio error eum facere
                         magni, et fuga. Fugit incidunt at ipsa beatae eos inventore pariatur tempore rem
                         possimus repellat! <span class="strong">Ipsam debitis dicta</span> voluptatem consequatur? Perspiciatis tempora
                          repellendus vel harum inventore quo ratione deleniti voluptatem ad.</p>
                </article>
    
        </section>
    
</body>
</html>

Engadir unha imaxe na que aparece unha ligazón ao pasar o cursor

 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            width:200px;
            height:300px;
            margin:50px auto;  
        }

 

        .imaxe{
            width:100%;
            height:100%;
            position:relative;                  
        }

        .imaxe-overlay{
            
            height: 100%;
            width:100%;
            position:absolute;
            top:0;
            left:0;
            background:rgba(255,255,255,0.6);
            visibility: hidden;
            opacity:0;
          
        }
        
        .imaxe .img-info{
            font-family: 'Open Sans', sans-serif;
            position:absolute;
            top:45%;
            display:table-cell;
            width:100%;
            text-align: center;
            visibility: hidden;
            opacity:0;
        }

        .img-info a{
            text-decoration:none;
            color: black;
        }

        .imaxe:hover .imaxe-overlay, .imaxe:hover .img-info {
            visibility: visible;
            opacity:1;
        }
      
 
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="imaxe">
            <img src="https://picsum.photos/200/300" alt="">
            <div class="imaxe-overlay">
                <div class="img-info">
                <h3><a href="#">Imaxe link</a></h3>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

Aliñar tres divs en horizontal

A. Con block-inline

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width:60%;
            font-size: 0;
            margin:20px auto;
        }
        .esquerda, .centro, .dereita{
            display:inline-block;
            font-size: 12px;
            height:30px;    
        }
        .esquerda{
            background:green;
            width:25%;
        }
        .centro{
        background:red;
        width:50%;
        }
        .dereita{
        background:blue;
        width:25%;
        }
    </style>

</head>

<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

O truco para que non se separen entre un pouco en horizontal é font-size: 0; no contenedor pai (wrapper)

B. Con float-left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            
        }
        .wrapper{
            width:60%;
            margin:20px auto;
        }
        .esquerda, .centro, .dereita{
            float:left;
            font-size: 12px;
            height:30px;    
        }
        .esquerda{
            background:green;
            width:25%;
        }
        .centro{
        background:red;
        width:50%;
        }
        .dereita{
        background:blue;
        width:25%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

C. Con flexbox.

Neste caso só configuramos o div contedor wrapper con display:flex. Nos div fillos non se configura nada. Neste caso non separa os div entre sí.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width:60%;
            margin:0 auto;
            display:flex;
            
        }
        .esquerda, .centro, .dereita{
            display:inline-block;
            font-size: 12px;
            height:30px;    
        }
        .esquerda{
            background:green;
            width:25%;
        }
        .centro{
        background:red;
        width:50%;
        }
        .dereita{
        background:blue;
        width:25%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

 

 

a. Con flexbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width:60%;
            background:#f2f2f2;
            margin:20px auto;
            display:flex;
        }
        .esquerda, .centro, .dereita{
            font-size: 12px;
            height:30px;
            margin:0 auto;   
        }
        .esquerda{
            background:green;
            width:20%;
        }
        .centro{
        background:red;
        width:20%;
        }
        .dereita{
        background:blue;
        width:20%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

 

b. Con inline-block.

Neste caso o centrado non o resolve tan ben como con flexbox. Centramos o div wrapper con margin:0 auto;, sen embargo ao empregar display:inline-block nos div fillos, non permite centralos con margin:o auto; Para isto, no elemento pai, debemos de empregar text-align:center; Obviamente, sen queremos separar os elementos fillos entre eles, engadiríamos nos fillos un margin-right.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            position: relative;
            width:60%;
            background:#f2f2f2;
            margin:20px auto;
            overflow:hidden;
            font-size: 0px;
            text-align: center;
                 
        }
        .esquerda, .centro, .dereita{
            font-size: 12px;
            height:30px;
            display:inline-block;
         
        }
        .esquerda{
            background:green;
            width:20%;
        }
        .centro{
            background:red;
            width:20%;
        }
        .dereita{
            background:blue;
            width:20%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

c. Con float

O div da esquerda colocámolo con float:left, e o da dereita con float:right. Sen embargo o do centro resístese. Nun principio aparecía cun tamaño inferior ao da esquerda e o da dereita. Iso corríxese con display:inline-block. Despois aparecía como desprazado da parte superior. Isto correxímolo con vertical-aligh:top. Por último aparecía este div do centro pegado ao div da esquerda, non obedecendo a margin:o auto; Esto último solucionase poñendo no elemento pai text-align:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width:60%;
            background:#f2f2f2;
            margin:20px auto;
            overflow: hidden;
            text-align: center;
            
        }
        .esquerda, .centro, .dereita{
            font-size: 12px;
            height:30px;
            display:inline;
       
        }
        .esquerda{
            background:green;
            width:20%;
            float:left;
        }

         .centro{
            display:inline-block;
            vertical-align: top;
            background:red;
            width:20%;
            
        }
        .dereita{
            background:blue;
            width:20%;
            float:right;
        }
      
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

D. Só con float:left, engadindo a porcentaxe

     

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width:60%;
            background:#f2f2f2;
            margin:20px auto;
            overflow: hidden;
            text-align: center;
            
        }
        .esquerda, .centro, .dereita{
            font-size: 12px;
            height:30px;
            float:left;
            width:31%;
            margin:0 1.16666%;
       
        }
        .esquerda{
            background:green;
        
        }

         .centro{
         
            background:red;
            
            
        }
        .dereita{
            background:blue;
        
        }
      
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda">Esquerda</div>
        <div class="centro">Centro</div>
        <div class="dereita">Dereita</div>
    </div>
</body>
</html>

Centrar un div dentro doutro

Cando maquetamos na web, non debemos de empregas as táboas. As táboas só se empregan para almacenar valores numéricos. A alternativa ás táboas son dos contedores div. Neste caso creo un contedor chamado container e dentro del outro que chamo texto. O primeiro está centrado con respecto á pantalla e o segundo está centrado con respecto ao primeiro tanto vertical como horizontalmente.

 

a. Coa clase flexbox. Moi sinxela. Debemos de asignalle ao contenedor .container as seguintes instrucións:

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .container{
 margin:0 auto;
 background:yellowgreen;
 width:600px;
 height: 70vh;
 display:flex;
 justify-content: center;
 align-items: center;
 }
 
 .texto{
 background:orangered;
 width:400px;
 height: 200px;
 
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="texto">
 </div>
 </div>
</body>
</html>

 

 

b. A segunda forma de facelo pode ser a seguinte. Darémoslle unha posición relative ao contedor texto e seguidamente empregaremos margin:o auto; para centralo horizontalmente e un top:50%; e tranform:translateY(-50%) para centralo verticalmente.


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .container{
 margin:0 auto;
 background:yellowgreen;
 width:600px;
 height: 70vh;
 }
 
 .texto{
 background:orangered;
 position:relative;
 width:400px;
 height: 200px;
 margin:0 auto;
 top:50%;
 transform: translateY(-50%);
 }
 </style>
</head>
<body>
 <div class="container">
 <div class="texto">
 
 </div>
 </div>
 
</body>
</html>

 

 

Cando Ubuntu ou Mint non conecta co EVA Edixgal

 

 

En determinadas versións de Ubuntu e Mint deixan de ter acceso ao EVA. Se modificamos manualmente o ficheiro /etc/resolv.conf, e substituimos o nameserver de 127.0.0.53 por 10.180.188.75, e recargando a conexión de rede, coa seguinte instrución, o navegador abre correctamente a páxina do EVA https://eva.edu.xunta.es

./etc/init.d/networking restart

Sen embargo ao reiniciar deixaremos de ter acceso ao EVA, pois o systemd recarga a configuración do resolv.conf ao seu valor por defecto 127.0.0.53. Vexamos como podes configurar a conexión e facer persistentes os cambios:

1. Modificar /etc/netplan/1-network-manager-all.yaml.

Fai unha copia do ficheiro antes de modificar nada:

cp /etc/netplan/1-network-manager-all.yaml /etc/netplan/1-network-manager-all.yaml.old

Fai un copia e pega. Debes de respectar os tabuladores. Se non están correctamente introducidos non daranos fallos ao aplicar os cambios con netplan apply.

Antes de editar debes de coñecer o nome da tarxeta de rede. Podes facelo con ipconfig -a ou con ip link show, e seguidamente debes de saber cal é a ip do teu equipo. Neste exemplo, engado a ip dun centro con dos rangos de IP

No meu caso, o nome da interface é: enp0s3

IP. 10.62.1651.211

Máscara de subrede: 255.255.254.0 (poño 23). Nun centro cun só rango, a máscara sería 255.255.255.0 (poñeríamos 24)

Porta de enlace (gateway 10.62.164.1)
DNS: 10.180.188.75

nano /etc/netplan/1-network-manager-all.yaml 

(repito, mantén os decimais, e fíxate que o nome da interface sexa o correcto, e por suposto os datos de configuración da rede: ip, broadcast, dns, etc)

network:
  version: 2
  renderer: networkd
  ethernets:
    enp0s3:
      dhcp4: no
      dhcp6: no
      addresses: [10.62.165.211/23, ]
      gateway4:  10.62.164.1
      nameservers:
              addresses: [10.180.188.75]

 

2. Executamos a orde

netplan apply

 

3. Comprobamos que a  nova dns aparece aqui:

cat /run/systemd/resolve/resolv.conf

O sistema imprime a nova dns que configuramos no paso 1: 10.180.188.75

 

4. Agora debemos de crear unha ligazón de  /run/systemd/resolve/resolv.conf a /etc/resolv.conf.

sudo ln -sf /run/systemd/resolve/resolv.conf /etc/resolv.conf

 

5. Reiniciamos e comprobamos que temos acceso ao EVA. Se visualizas o contido do dicheiro /etc/resolv.conf, observarás que agora xa mantén o novo servidor de forma permanente.

cat /etc/resolv.conf

 

Crear unha galería de imaxes responsive design en Drupal 6 co tema 0Point

Con seguridade hai moitas maneira de crear unha galería cun conxunto de imaxes coa característicade responsive design, é dicir, que se adapten a distintos tipos de pantalla. Procedo a explicar unha das maneiras:

1. Ir á zona de Administración > Construción da páxina > Plantillas. Pinchamos en configurar na plantilla OPoint que esteamos empregando

2. No apartado Layout width, escollemos a segunda opción_ Fluid width (custom)

3. Agregamos Crear Contido > Páxina, e engadimos un título. Seguidamente pinchamos en Disable Rich Text e pegamos o código e finalmente gardamos, sen pinchar en ningunha outra opción. En canto ao código, dicir que empreguei a clase Grid de css (aínda que tamén se podería facer con flexbox) e para darlle un aspecto máis dinámico engadín unha ligazón de cada imaxe a outra de maior tamaño empregando a súa vez a librería Lightbox. Lembra que debes de ter activo este módulo para que se visualice con este efecto. 

 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>

.box {
  box-sizing: border-box;

}
.wrapper {
  padding: 50px;
  background: #f2f2f2;
   max-width:100%;
   margin: 0 auto;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 200px));
   grid-column-gap: 10px;
   grid-row-gap:10px;
   justify-content: space-around;
   
}

.img{
    width:200px;
    height:200px;
    }
</style>
</head>
<body>

    <div class="wrapper">
   <div class="box"><a href="https://atio.es/pub/costamortex/foto1.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto1.jpg"></div>
   <div class="box"><a href="https://atio.es/pub/costamortex/foto2.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto2.jpg"></div>
   <div class="box"><a href="https://atio.es/pub/costamortex/foto3.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto3.jpg"></div>
   <div class="box"><a href="https://atio.es/pub/costamortex/foto4.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto4.jpg"></div>
   <div class="box"><a href="https://atio.es/pub/costamortex/foto5.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto5.jpg"></div>
   <div class="box"><a href="https://atio.es/pub/costamortex/foto6.jpg" rel="lightbox"> <img src="https://atio.es/pub/costamorte/foto6.jpg"></div>
   

</div>

</body>
</html>

 

E este é o resultado. Podes comprobar se o comportamento é o correcto ao modificar o tamaño da pantalla.