• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS How can I organize my photo gallery in HTML/CSS?

Amedeo

New Coder
Hi!

I'm a bit new to coding but I want to create a photo gallery website. It would be a simple website with some pages with photographies from various places.
The main issue I've been handling with is the organization of the photographies on the page. I did put the CSS code so that there is responsive layout, but even that way I can't correctly align my photographies.

This is the CSS part for the display of the photographies:

Code:
* {
  box-sizing: border-box;
}
.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 50px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 50px;
 
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

And this is the HTML part for the photographies display:

Code:
<div class="row">
  <div class="column">
    <b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/luchon.html" target="_blank"; style="color:white;width:100%;"><div class="pic">
      <figure><img src="C:\Users\amede\OneDrive\Images\Luchon\25d65f40e61407068bca78bde5e704eb.jpg" alt="Yenifer en nieve" class="image"
      style="width:100px;height:200px;float:up"></div><figcaption style="vertical-align: middle;">Luchon</figcaption></a></b></figure>
    <b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/toulouse.html" target="_blank"; style="color:white";><div class="pic">
      <figure><img src="C:\Users\amede\OneDrive\Images\Toulouse\IMG-20201002-WA0001.jpg" alt="Arboles de Toulouse"
      class="image" style="width:88px;height:200px;float:up"></div><figcaption>Toulouse</figcaption></a></b></figure>
    <b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/lamer.html" target="_blank"; style="color:white";><div class="pic">
      <figure><img src="C:\Users\amede\OneDrive\Images\La Mer\IMG-20200812-WA0005.jpg" alt="Narbonne"
      class="image" style="width:200px;height:150px;float:up"></div><figcaption>La Mer</figcaption></a></b>
    <b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/toulouseonnight.html" target="_blank"; style="color:white";><div class="pic">
        <figure><img src="C:\Users\amede\OneDrive\Images\Toulouse on night\IMG-20201204-WA0040.jpg" alt="Mercado de Navidad"
        class="image" style="width:200px;height:150px;float:up"></div><figcaption>Toulouse on Night</figcaption></a></b></figure>
    <b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/mascotas.html" target="_blank"; style="color:white";><div class="pic">
        <figure><img src="C:\Users\amede\OneDrive\Images\Mascotas\IMG_20210906_141641.jpg" alt="Cristal durmiendo"
        class="image" style="width:200px;height:150px;float:up"></div><figcaption>Mascotas</figcaption></a></b></figure>
  </div>
  <div class="column">
    <b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/lourdes.html" target="_blank"; style="color:white";><div class="pic">
      <figure><img src="C:\Users\amede\OneDrive\Images\Lourdes\IMG-20201024-WA0020.jpg" alt="Nosotros en Lourdes"
      class="image" style="width:400px;height:175px;float:up"></div><figcaption>Lourdes</figcaption></a></b></figure>
    <b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/paris.html" target="_blank"; style="color:white";><div class="pic">
        <figure><img src="C:\Users\amede\OneDrive\Images\Paris\IMG-20210113-WA0034.jpg" alt="Nosotros en Paris"
        class="image" style="width:150px;height:200px;float:up"></div><figcaption>Paris</figcaption></a></b></figure>
    <b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/villahayes.html" target="_blank"; style="color:white";><div class="pic">
        <figure><img src="C:\Users\amede\OneDrive\Images\Villa Hayes\IMG-20210315-WA0007.jpg" alt="Rio Paraguay"
        class="image" style="width:200px;height:150px;float:up"></div><figcaption>Villa Hayes</figcaption></a></b>
    <b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/asuncion.html" target="_blank"; style="color:white";><div class="pic">
        <figure><img src="C:\Users\amede\OneDrive\Images\Asuncion\IMG-20210329-WA0006.jpg" alt="Palacio de los Lopez"
        class="image" style="width:200px;height:150px;float:up"></div><figcaption>Asuncion</figcaption></a></b>
  </div>
  </div>  
</article>
</section>

I hope that my message is clear enough so that you may help me in my learning of the HTML language!
also, any other advice for this kind of website is gladly welcome! :)

Thank you for your time!
 
Last edited by a moderator:

OldMan

Coder
flex is good when you're working with columns or rows only, but when you have both CSS--Grid is better.

All the images are on your computer so when I ran your code all I get is a white screen. and the alt text doesn't show cause you have white writting on a white page.
 
Last edited:

Amedeo

New Coder
flex is good when you're working with columns or rows only, but when you have both CSS--Grid is better.

All the images are on your computer so when I ran your code all I get is a white screen. and the alt text doesn't show cause you have white writting on a white page.
Hi, thanks for the advice I'll try it!

I think that it shows you a blank page because the code that I copy/pasted is just for the photos organization part. I didn't put the whole page code as I thought it wouldn't be useful. But I'll send it in attached file.
Also, if I obtain my own website page in a host website is it possible for me to show the photos linked to my device in the web page?

Thank you for your response!
 

Top