Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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?

A

Amedeo

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:
Sort by date Sort by votes
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:
Upvote 0 Downvote
OldMan said:
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.
Click to expand...
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!
 
Upvote 0 Downvote
OldMan said:
Why don't you post what you have already and give the height and width of the pictures. I'll spend some time on it.
Click to expand...
I agree with this, if you post what you have and provide the width and height of the pictures we can take a further look into this for you.
 
Upvote 0 Downvote
Hi! As you told me I pasted here the whole code of my page. Also I put the size of each image just behind its path. Thank you!

HTML: 
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AxY, el album online de nuestras sotografias en varios paises</title>
<meta name='robots' content='max-image-preview:large' />
<style>
body {
  background-color:black;
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}
.sticky {
  background-color:green;
  position: -webkit-sticky;
  position: sticky;
  top:-100px;
}
<!--Language Button-->
#en {
    display: none;
  }
 
  .button_lang {
    background-color: #444;
    color: #FFF;
    padding: 8px 20px;
    border-radius: 5px;
    font-size: 16px;
    float:right;
    width:20px;
    margin-right:5px;
    cursor: pointer;
  
  
    -webkit-transition: background-color .3s ease-in-out;
    -moz-transition: background-color .3s ease-in-out;
    -o-transition: background-color .3s ease-in-out;
    -ms-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
  }
  .button_lang:hover, .current_lang {
    background-color: #777;
    -webkit-transition: background-color .3s ease-in-out;
    -moz-transition: background-color .3s ease-in-out;
    -o-transition: background-color .3s ease-in-out;
    -ms-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
  }
  ul li {
    width: auto;
    display: inline;
  }

<!--Fade Overlay Style-->
.pic{
      width:190px;
      height:190px;
      opacity:0.5;
      filter:alpha(opacity=100);
      background-colorink;
    
    }
    .pic:hover
    {
      opacity: 0.3;
      filter: alpha(opacity=90);
      transition: .5s ease;
    }
<!--Sticky Navbar Style-->
.navbar {
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  opacity:0.3;
 
}
.navbar a {
  float: left;
  font-size: 16px;
  color:white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
 
}
<!--Dropdown
.dropdown {
  float: left;
  overflow: hidden;
}
.dropdown .dropbtn {
  cursor: pointer;
  font-size: 16px;
  border: none;
  outline: none;
  color:white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus {
  background-color:grey;
}
.dropdown:hover .dropdown-content {
  display: block;
 
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #ddd;
}
.show {
  display: block;
}
-->
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}


.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
<!--Responsive Layout-->
@media screen and (max-width: 800px) {
  .tr {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}
@media screen and (max-width: 600px) {
  .tr {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
<!--Photo Grid-->
* {
  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%;
  }
}
<!--Header-->
    #header-background {
  background: url('https://wallpaperaccess.com/full/1358900.jpg');
 
}

h1 {
  background: url('https://wallpaperaccess.com/full/1358900.jpg') no-repeat;
  background-position: 100%;
  background-size: cover;
  opacity: 1;
  height:200px;
  margin-bottom:10px;
  margin-top:0px;
 
}
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}
<!--Image Center-->
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<!--Footer-->
.footer {
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   background-color: #c8ad7f;
   color: white;
   text-align: center;
}
<!--Footer-->
a:link, a:visited {
  background-color: #c8ad7f;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: grey;
}
a {
  text-decoration: none;
}
</style>
</head>
<header>
<!--Navbar Body-->
<ul class="social">
    <li id="es_click" class="button_lang current_lang" style="position:relative;top:30px;">Es</li>
    <li id="en_click" class="button_lang" style="position:relative;top:30px;">En</li>
        </ul>
<div class="navbar sticky" style="background-color:#c8ad7f;height:47px;">
  
<b><a id="es" href="file:///C:/Users/amede/OneDrive/Bureau/AxY/pages/principal_12452109.html" style="position:relative;
  down:50px;">Inicio</a>
  <a id="en" href="file:///C:/Users/amede/OneDrive/Bureau/AxY/pages/principal_12452109.html">Home</a>
  <a id="es" href="#news">A proposito</a>
  <a id="en" href="#news">About Us</a>
  <a id="es" href="#map">Mapa</a>
  <a id="en" href="#map">Map</a>
  <div class="dropdown">
    <button class="dropbtn">
      <a id="es" href="#Años" class="dropbtn">Años</a>
      <a id="en" href="#Years" class="dropbtn">Years</a>
    </button>
  <div class="dropdown-content">
    <a href="#2019">2019</a>
    <a href="#2020">2020</a>
    <a href="#2021">2021</a></b>
  </div>
  </div>
 
</div>


 <!--Main Page Title-->
<h1 style="color:white;text-align:center;font-size:100px;">AxY</h1> 
</header>
<body>
<script>
<!--Navbar Sticky-->
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>
<!-- Photo Grid -->

<div class="row" style="text-decoration: none;">
  <div class="column">
    <b><a href="file:///C:/Users/amede/OneDrive/Documents/HTML/AxY/luchon.html" target="_blank"; style="color:#ffffff;width:100%;"><div class="pic">
      <figure><img src="C:\Users\amede\OneDrive\Images\Luchon\25d65f40e61407068bca78bde5e704eb.jpg" <!--720x1413--> 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" <!--720x1600--> 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" <!--1600x1200--> 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" <!--1600x1200--> 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" <!--4160x3120--> 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" <!--1600x720--> 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" <!--1200x1600--> 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" <!--1280x960--> 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" <!--960x1280--> alt="Palacio de los Lopez"
        class="image" style="width:200px;height:150px;float:up"></div><figcaption>Asuncion</figcaption></a></b>
  </div>
  </div>   
</article>
</section>
<footer >
<div style="color:white;background-color:#c8ad7f;height:40px;text-align:center;font-size:20px;">
   <b><a id="es" href="file:///C:/Users/amede/OneDrive/Bureau/AxY/pages/contact.html" style="position:relative;
  down:50px; color:white;">Contacto</a>
  <a id="en" href="file:///C:/Users/amede/OneDrive/Bureau/AxY/pages/contact.html">Contact</a></b>
</div>
</footer>
</body>
<!--Language Button Script-->
<script>
var espanol = document.getElementById('es_click'),
    english = document.getElementById('en_click'),
    es_txt = document.querySelectorAll('#es'),
    en_txt = document.querySelectorAll('#en'),
    nb_es = es_txt.length,
    nb_en = en_txt.length;
espanol.addEventListener('click', function() {
    langue(espanol,english);
}, false);
english.addEventListener('click', function() {
    langue(english,espanol);
}, false);
function langue(langueOn,langueOff){
    if (!langueOn.classList.contains('current_lang')) {
        langueOn.classList.toggle('current_lang');
        langueOff.classList.toggle('current_lang');
    }
    if(langueOn.innerHTML == 'Es'){
        afficher(es_txt, nb_es);
        cacher(en_txt, nb_en);
    }
    else if(langueOn.innerHTML == 'En'){
        afficher(en_txt, nb_en);
        cacher(es_txt, nb_es);
    }
}
function afficher(txt,nb){
    for(var i=0; i < nb; i++){
        txt.style.display = 'block';
    }
}
function cacher(txt,nb){
    for(var i=0; i < nb; i++){
        txt.style.display = 'none';
    }
}
function init(){
    langue(espanol,english);
}
init();
</script>
</html>
 
Last edited by a moderator:
Upvote 0 Downvote
Amedeo said:
Ok thanks!
I saw on this page CSS float property that it's possible to use the float property in order to place an image at a given position relatively to a text that's why I used it but maybe it's not a good way to use it? 😅
Click to expand...
One of the huge friends of w3schools I am as I always prefer w3schools for different language coding help. I myself go to them and learn how to code anything in CSS or HTML. Maybe you need to find another medium if you rank your website into Google Serps but not for coding purposes. Every time you can go visit w3school.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom