Sobreescribir regras de estilo CSS en Drupal 6

Submitted by martin on Lun, 06/10/2019 - 23:22

En moitas ocasións os temas dos que dispoñemos en Drupal poden resultar un tanto serios. Para algunha páxina ou blog non se axustan, xa que procuramos dar unha imaxe máis viva e alegre. Velaquí temos un exemplo:

Cra os Remuiños: http://www.edu.xunta.gal/centros/craremuinos/

IES Ramón Caamaño: http://www.edu.xunta.gal/centros/iesramoncaamano/

 

cra_web

 

ies

O proceso para a configuración dunha páxina é o seguinte:

1. Crear unha carpeta para colocar os códigos CSS que sobreescriban os propios de Drupal. Para isto debemos de activar o módulo IMCE Mkdir

Indo ao apartado "a miña conta" -> xestor de ficheiros, e facemos un clic en engadir/editar imaxe e seguidamente en examinar. No explorador de ficheiros debemos de pinchar en Directory

directory

E creamos o cartafol chamado css. Neste cartafol crearemos un ficheiro de estilos css.
 

folder_css

 

2. Analizamos cales son os nomes identificativos dos bloques, para ir escribindo o código no fichero css que podemos chamar style.css, por exemplo

Imaxinemos que na nosa web temos un bloque como o seguinte:

bloque_cra

Xa temos o bloque coa información necesaria, o único que queremos é mudar a cor de fondo e quitarlle o borde que o tema 0Point de Drupal lle engade por defecto. Para iso, premendo co botón dereito do rato sobre o cadro e seguidamente en "Inspeccionar elemento"

inpec

Aparece no borde inferior o código da páxina web. Aparece un dos elementos que forma parte do bloque en cor azul. Pero debemos de procurar o div raiz no cal están tódolos elementos do bloque, tan só temos que recorrer o código cara arriba, ata atopar a etiqueta div id="block-block-xx", onde xx é un número

codigo

 

Pois esta etiqueta será a que teñamos que configurar (tamén podemos configurar por class, pero vexamos unha maneira sinxela).

3. Creamos co editor de notas (mousepad, gedit, leafpad, etc), un ficheiro que chamamos style.css. E engadimos o seguinte contido:

/*contacto*/
#block-block-22 {
    border: 0px;
    background: #66b8dd;

  }

Onde:

/*contacto*/ é un comentario que nos sirve para identificar a que bloque nos estamos referindo

#block-block-22, é o id do bloque, que procuramos no paso anterior (id="block-block-22"

border: 0px;, no caso de non querer engadirlle un borde ao bloque

background: #66b8dd; , que é unha cor de fondo azulada

Obviamente repetimos os pasos anteriores cos diferentes bloques que queremos personalizar.

4. Subimos o ficheiro ao cartafol css que creamos no apartado nº1. Subímolo desde a miña conta -> xestor de ficheiros.

mousepad

 

style_subido

 

Pinchando en style.css aparece na parte inferior o nome style.css (ver imaxe), e ao pinchar neste segundo style.css,  ábrese a fiestra do editor de imaxes, desde o cal podemos copiar a url na que se atopa o ficheiro style.css

segundo_sty

 

url_copiar

Neste exemplo trátase da seguinte url:     /centros/iesramoncaamano/system/files/css/style.css

5. Seguidamente dirixímonos á zona de administración ->Construción da páxina -> Bloques. Prememos en Engadir bloque

engadir_bloque

Ao bloque chamarémoslle css_code, por exemplo. Non lle poñemos ningún título. Prememos en Formato de entrada e escollemos PHP code e seguidamente en "Desactivar texto enriquecido", e pegamos o código:

<html>
<head>
<?php
echo '<link href="/centros/iesramoncaamano/system/files/css/style.css" rel="stylesheet">';
?>
</head>
<body>
</body>
</html>

Deberemos de modificar o enderezo que aparece na etiqueta link href=  polo enderezo do ficheiro css do teu caso. Gardamos o bloque.

Finalmente colocamos o bloque css_code recén deseñado na parte superior da Cabeceira:

cabeceira

Deste xeito, cada vez que un usuario abre a páxina, o bloque css_code chamará ao ficheiro style.css, que sobreescribirá os estilos de Drupal. O resultado é o seguinte:

contacto

 

Forzar o footer ao pé de páxina

Submitted by martin on Lun, 06/10/2019 - 09:26

<!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>
 html{
 min-height:100%;
 position: relative;
 }
 body{
 margin:0;
 margin-bottom:70px;
 }
 .container{
 margin:0 auto;
 background:yellowgreen;
 width:600px;
 height: 70vh;
 }

 img{
 display:block;
 margin:0 auto;
 position:relative;
 top:50%;
 transform: translateY(-50%);
 }


 footer{
 background: black;
 position: absolute;
 bottom:0;
 width:100%;
 height: 70px;
 color:white;
 }

 </style>

</head>
<body>
 <div class="container">
 <img src="https://picsum.photos/200" alt="">
 </div>
 <footer>
 Pé de páxina
 </footer>
</body>


</html>

 

Engadir unha galería de imaxes en Drupal

Submitted by martin on Lun, 06/10/2019 - 09:05

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.

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

Submitted by martin on Lun, 06/10/2019 - 09:01

 

<!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>

 

Centrar un div dentro doutro

Submitted by martin on Lun, 06/10/2019 - 09:00

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>

 

 

Centrar unha imaxe horizontalmente

Submitted by martin on Lun, 06/10/2019 - 08:56

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>

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

Submitted by martin on Lun, 06/10/2019 - 08:55

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>

Tres divs centrados horizontalmente

Submitted by martin on Lun, 06/10/2019 - 08:53

 

<!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>
    .wrapper{
        width:70%;
        margin:50px auto;
        text-align: center;
        background:#F2F2F2;
        padding: 20px;
        border-radius:7px;
    }

    .box{
        width:30%;
        height:300px;
        border-radius: 5px;
    }

    .esquerda{
        background:red;
        float:left;
    }

    .centro{
        background: greenyellow;
        display:inline-block;
        margin:0 auto;
    }
    
    .dereita{
        background:violet;
        float:right;
    }
 
    </style>
</head>
<body>
    <div class="wrapper">
           <div class="esquerda box"> </div>

           <div class="centro box"> </div>

           <div class="dereita box"> </div>
    </div>
</body>
</html>

 

2. CON FLEXBOX

<!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>
    .wrapper{
        width:70%;
        margin:50px auto;
        text-align: center;
        background:#F2F2F2;
        padding: 20px;
        border-radius:7px;
        display:flex;
        
        
    }

    .box{
        width:30%;
        height:300px;
        border-radius: 5px;
        margin:0 auto;
    }

    .esquerda{ background:red;}

    .centro{background: greenyellow;}
    
    .dereita{background:violet;}
 
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="esquerda box">

        </div>

        <div class="centro box">

        </div>

        <div class="dereita box">

        </div>


    </div>
</body>
</html>

Tamén temos a posibilidade de empregar justify-content:space-around na clase .wrapper e eliminar da clase .box o margin:0 auto;

Dous divs centrados horizontalmente

Submitted by martin on Lun, 06/10/2019 - 08:51

Cando queremos engadir nunha páxina web ou no Dupral dous dívs centrados en horizontal, podémolo facer de varios xeitos, sen embargo entendo que o máis razonable é asignándolle con css ao da esquerda float:left;, e ao da dereito float: right;

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    
    <style>
    #main{
        width:80%;
        max-width: 1500px;
        margin:0 auto;
        background-color:grey;
    }
    .container{
        text-align: center;
        width:45%;
        height:auto;
        border:2px solid black;
        border-radius:7px;
        background-color:#888888
    }  
    .div_esq{
        float:left;
    }
    .container img{
        width:100%;
    }
    .div_dr{
        float:right;
       
    }     
    </style>
</head>

<body>
    <div id="main">
        <div class="container div_esq">
            <h2>Fisterra</h2>
            <figure>
                <img src="https://cmatv.xunta.gal/voooblicuo/VooOblicuo_1952.jpg" alt="Faro de Fisterra">
            </figure>
        </div>
        <div class="container div_dr">
            <h2>Corrubedo</h2>
            <figure>
                <img src="https://cmatv.xunta.gal/voooblicuo/VooOblicuo_1468.jpg" alt="Faro de Corrubedo">
            </figure>

        </div>
    </div>
</body>
</html>

Subscribe to html_css