HTML and CSS image gallery

Very rusty with my HTML and CSS apologies in advance.

I'm trying to add an image gallery to one of my HTML pages as seen in the code below:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Anniversary Homepage</title>
    <link href=":wght@400;600;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="saloucss.css">    
</head>
<body>
    <header>
    <div class="wrapper">
        </div>
<ul class="nav-area">
<li><a href="index.html">Home</a></li>
<li><a href="salou.html">Salou</a></li>
<li><a href="summer24.html">Summer 24</a></li>
<li><a href="every.html">Everything Else</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<section class="gallery">
    <div class="gallery-item">
        <img src="images/clarebg.jpg" alt="Image 1">
    </div>
    <div class="gallery-item">
        <img src="images/clarebg.jpg" alt="Image 2">
    </div>
    <div class="gallery-item">
        <img src="images/clarebg.jpg" alt="Image 3">
    </div>
    </div>
    <div class="gallery-item">
        <img src="images/clarebg.jpg" alt="Image 3">
    </div>
    </div>
    <div class="gallery-item">
        <img src="images/clarebg.jpg" alt="Image 3">
    </div>
    <!-- Add more images as needed -->
</section>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Poppins', sans-serif;
}
.wrapper {
    width: 1170px;
    margin: auto;
}
header {
    background: url('images/clarebg.jpg');;
    height: 100vh;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    position: relative;
}
.nav-area {
    float: right;
    list-style: none;
    margin-top: 30px;
}
.nav-area li {
    display: inline-block;
}
.nav-area li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 20px;
    font-family: poppins;
    font-size: 16px;
    text-transform: uppercase;
}
.nav-area li a:hover {
    background: #fff;
    color: #333;
}

.gallery-container {
    display: flex;
    justify-content: center;  /* Centers content horizontally */
    align-items: center;      /* Centers content vertically */
    min-height: 100vh;         /* Makes the container fill the whole viewport height */
    padding-top: 500px;         /* Adds some space from the top of the page */
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    width: 90%;  /* Optional: controls the width of the gallery */
    max-width: 1200px; /* Optional: maximum width */
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}

.gallery-item img:hover {
    transform: scale(1.05);
}

However it does not appear to be playing ball. I'm attempting to get the pictures centered and have the ability to add more in but I am struggling big time.

I understand this is probably a basic issue but would appreciate any help, thank you!

Very rusty with my HTML and CSS apologies in advance.

I'm trying to add an image gallery to one of my HTML pages as seen in the code below:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Anniversary Homepage</title>
    <link href="https://fonts.googleapis/css2?family=Poppins:wght@400;600;700;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="saloucss.css">    
</head>
<body>
    <header>
    <div class="wrapper">
        </div>
<ul class="nav-area">
<li><a href="index.html">Home</a></li>
<li><a href="salou.html">Salou</a></li>
<li><a href="summer24.html">Summer 24</a></li>
<li><a href="every.html">Everything Else</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<section class="gallery">
    <div class="gallery-item">
        <img src="images/clarebg.jpg" alt="Image 1">
    </div>
    <div class="gallery-item">
        <img src="images/clarebg.jpg" alt="Image 2">
    </div>
    <div class="gallery-item">
        <img src="images/clarebg.jpg" alt="Image 3">
    </div>
    </div>
    <div class="gallery-item">
        <img src="images/clarebg.jpg" alt="Image 3">
    </div>
    </div>
    <div class="gallery-item">
        <img src="images/clarebg.jpg" alt="Image 3">
    </div>
    <!-- Add more images as needed -->
</section>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Poppins', sans-serif;
}
.wrapper {
    width: 1170px;
    margin: auto;
}
header {
    background: url('images/clarebg.jpg');;
    height: 100vh;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    position: relative;
}
.nav-area {
    float: right;
    list-style: none;
    margin-top: 30px;
}
.nav-area li {
    display: inline-block;
}
.nav-area li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 20px;
    font-family: poppins;
    font-size: 16px;
    text-transform: uppercase;
}
.nav-area li a:hover {
    background: #fff;
    color: #333;
}

.gallery-container {
    display: flex;
    justify-content: center;  /* Centers content horizontally */
    align-items: center;      /* Centers content vertically */
    min-height: 100vh;         /* Makes the container fill the whole viewport height */
    padding-top: 500px;         /* Adds some space from the top of the page */
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    width: 90%;  /* Optional: controls the width of the gallery */
    max-width: 1200px; /* Optional: maximum width */
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}

.gallery-item img:hover {
    transform: scale(1.05);
}

However it does not appear to be playing ball. I'm attempting to get the pictures centered and have the ability to add more in but I am struggling big time.

I understand this is probably a basic issue but would appreciate any help, thank you!

Share Improve this question edited Mar 23 at 14:09 Mister Jojo 22.5k6 gold badges25 silver badges44 bronze badges asked Mar 23 at 1:13 Digi 191 bronze badge

1 You haven't told us what it IS doing that you don't like. – Tim Roberts Commented Mar 23 at 1:30
<div class="wrapper"> with the immediately following </div> and then the second </div> after </ul> looks suspect. – David C. Rankin Commented Mar 23 at 2:41
1 Putting your HTML through a validator might be helpful to start . e.g. validator.w3. – A Haworth Commented Mar 23 at 4:49
It looks like your code could use some formatting improvements—some tags are open but not closed, while others are missing entirely. Is this the working version? To make things clearer, it would be helpful to have a schematic example of the task or a gallery URL as a reference. That way, it’s easier to understand the original goal. Looking forward to your clarification! – Olga S Commented Mar 24 at 17:12

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

There are errors in your HTML. Start with something simple like this.

body {
  margin: 0;
  background: silver;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
  gap: 1em;
  padding: 1em;
  width: 70%;
  margin: 0 auto;
  background: white;
}

.gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.5em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.gallery img:hover {
  transform: scale(1.05);
}

<section class="gallery">
  <img src="https://picsum.photos/500">
  <img src="https://picsum.photos/520/480">
  <img src="https://picsum.photos/480/520">
  <img src="https://picsum.photos/540/460">
  <img src="https://picsum.photos/460/540">
  <img src="https://picsum.photos/500">
  <img src="https://picsum.photos/520/480">
  <img src="https://picsum.photos/480/520">
  <img src="https://picsum.photos/540/460">
  <img src="https://picsum.photos/460/540">
  <img src="https://picsum.photos/500">
  <img src="https://picsum.photos/520/480">
  <img src="https://picsum.photos/480/520">
  <img src="https://picsum.photos/540/460">
  <img src="https://picsum.photos/460/540">
</section>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

HTML and CSS image gallery - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)