Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
Autumn, 15 Oct 2026 - @994.97
Forum Activity: Four Stars Random | Recent Posts | Guild Recents
News: It's the silly things you'll remember :trash: Guild Events: Weekly zine jam 16: Games
Super News: ~~MelonLand's Halloween Profile Design Contest 2026~~
+  MelonLand Forum
|-+  Da Web Revival
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  me again >_>;


« previous next »
Pages: [1] Print Embed
Author Topic: me again >_>;  (Read 1493 times)
AJ
Sr. Member
****
View Profile WWW


am back once again
⛺︎ My Room
StatusCafe: six
iMood: sintax

Artifacts:
First 1000 Members!Joined 2023!
« on: Spring, 17 Apr 2023 @703 » Toggle Font Embed

So, How do I make a gallery, what's the html/css for it?

Logged
Rol
Full Member ⚓︎
***
View Profile WWW


⛺︎ My Room

Guild Memberships:
Artifacts:
First 1000 Members!Joined 2023!
« Reply #1 on: Spring, 17 Apr 2023 @708 » Toggle Font Embed

Assuming you mean gallery as in a bunch of images organized in a nice grid, here's how I'd do it:

HTML
Code
<div class="gallery">
    <img src="image-01.png" alt="Image 1">
    <img src="image-02.png" alt="Image 2">
    <img src="image-03.png" alt="Image 3">
    ...
</div>

CSS
Code
.gallery{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    /* I'd use a flexbox for this. 
       Flex-wrap is set so that the gallery can take up
       multiple rows instead of continuing off-screen.
       Feel free to change justify-content to your liking.
       https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content */
}
.gallery > img{
    margin: 10px;
    /* You can add spacing around the image*/
}

« Last Edit: Spring, 17 Apr 2023 @710 by Okato » Logged
AJ
Sr. Member
****
View Profile WWW


am back once again
⛺︎ My Room
StatusCafe: six
iMood: sintax

Artifacts:
First 1000 Members!Joined 2023!
« Reply #2 on: Spring, 17 Apr 2023 @737 » Toggle Font Embed

Assuming you mean gallery as in a bunch of images organized in a nice grid, here's how I'd do it:

HTML
Code
<div class="gallery">
    <img src="image-01.png" alt="Image 1">
    <img src="image-02.png" alt="Image 2">
    <img src="image-03.png" alt="Image 3">
    ...
</div>

CSS
Code
.gallery{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    /* I'd use a flexbox for this. 
       Flex-wrap is set so that the gallery can take up
       multiple rows instead of continuing off-screen.
       Feel free to change justify-content to your liking.
       https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content */
}
.gallery > img{
    margin: 10px;
    /* You can add spacing around the image*/
}

yay! Thanks, Okato!! :)

Logged
Pages: [1] Print Embed 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | Send Feedback | Supporters ♥ Forum Guide | Rules | RSS | WAP | Mobile


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi
@000 Melon
Land
Forum Art Hub Chat Webring Explore Random Recent Tenement Arcade Want to Login or Join ? Web Craft Guide Graphic Catalogue Wiki Help I'm Lost! Link Land Newsletters Image Stream Minecraft: Online
Zap!
Passport Sites tamaNOTchi Asatte Add your site?
Aero Archive Onio Cafe 32 Bit Cafe Status Cafe