Artifacts Gallery Guilds Search Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining?
a Summer night - @811.71
Activity rating: Four Stars Posts & Arts: 65/1k.beats Random | Recent Posts | Guild Recents
News: It's the silly things you'll remember :trash: Guild Events: There are no events!

+  MelonLand Forum
|-+  Life & The Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  me again >_>;


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


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

Artifacts:
First 1000 Members!Joined 2023!
« on: a Spring day » Embed

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

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


Silly Miltank
⛺︎ My Room

Artifacts:
First 1000 Members!Joined 2023!
« Reply #1 on: a Spring day » 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: a Spring day by Okato » Logged

Quote from: melooon
you: Hello fridge, I would like the milk please :cheesy:
fridge: Ooo u look so pretty, lemmy order more onions from Amazon https://i.imgur.com/uZLjwdg.png
you: wait no! :drat:
fridge: i love you so much i ordered onions!


https://virosm.net/microbar.png
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: a Spring day » 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 MelonLand Editor Recent Edits Tenement Arcade Want to Login or Join ? Forum Art Hub Chat Webring Web Guides Graphics Catalogue Wiki Newsletters Image Stream
Melon's Sites TamaNotchi Textures PixelSea GifyPet MoMG Ozwomp Online Loom Videos Leaky Webring Melonking
Tools Melon Software ArtHub Embed Maker ML Passports
Outlinks Frutiger Aero Forum Onio Club m15o's Web Services 32Bit Cafe iMood Webrings Internet Phone Book HTML Energy Declarations Hackers & Designers
Zap!
Minecraft: Online
Who: PrinceDora