Home Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
April 26, 2024 - @925.72 (what is this?)
Forum activity rating: Three Star Posts: 33/1k.beats Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :happy: Open the all windows! Your mind needs storms and air! :happy:

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


« previous next »
Pages: [1] Print
Author Topic: me again >_>;  (Read 412 times)
LIA
Full Member
***


closing time

StatusCafe: six
iMood: sintax

View Profile

First 1000 Members!Joined 2023!
« on: April 17, 2023 @702.64 »

So, How do I make a gallery, what's the html/css for it?
Logged
Rowan
Jr. Member ⚓︎
**


Silly Mook


View Profile WWW

First 1000 Members!Joined 2023!
« Reply #1 on: April 17, 2023 @708.08 »

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: April 17, 2023 @709.97 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
you: wait no! :drat:
fridge: i love you so much i ordered onions!


LIA
Full Member
***


closing time

StatusCafe: six
iMood: sintax

View Profile

First 1000 Members!Joined 2023!
« Reply #2 on: April 17, 2023 @737.18 »

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 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2


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