Entrance Chat Gallery Guilds Search Everyone Wiki Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
September 16, 2025 - @686.05 (what is this?)
Activity rating: Three Stars Posts & Arts: 38/1k.beats Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts Start New Topic  Submit Art
News: :eyes: ~ Inconvenience is counterculture ~ :eyes: Super News: Upload a banner! (or else!)

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  [SOLVED] aligning images on neocities


« previous next »
Pages: [1] Print
Author Topic: [SOLVED] aligning images on neocities  (Read 800 times)
Noonbeam
Jr. Member
**
View Profile WWW


your local strange vocathing! ^_^
⛺︎ My Room
Itch.io: My Games

Artifacts:
Sun BeamedJoined 2024!
« on: August 01, 2024 @984.69 »

okay so im making a site and theres a part where the images go to the right side, but instead of the header text going under the image like its supposed to and how it does with the left aligned images, it appears next to the header text [sorry if censoring makes it a bit weird]

heres my code vvv
« Last Edit: August 04, 2024 @806.09 by Noonbeam » Logged

SPIRIT AND OPPORTUNITY REPEATS WITH EACH NEW ROVER !

noonbeam || gif by me :3
Melooon
Hero Member ⚓︎
*****
View Profile WWWArt


So many stars!
⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood: Melonking
Itch.io: My Games
RSS: RSS

Guild Memberships:
Artifacts:
Emergency feel-good teaa silly heart 4 melon :)Hyperactive DonutGreat Posts PacmanThanks for being rad!Always My PalFirst 1000 Members!OzspeckPocket Icelogist!OG! Joined 2021!The Smallest Ozwomp Known To ManBug!
« Reply #1 on: August 01, 2024 @40.27 »

I actually have no idea why that's happening; maybe the align property changes the header and image to "inline" instead of their default "block" ?? Mysterious HTML4 tags being mysterious :ok:

An easy solution is to group your sections and then use a CSS style to align them ^^

Code
<section>
  <img src="https://forum.melonland.net/index.php?action=dlattach;attach=3693;type=avatar" />
  <h1>Test</h1>
  <p>Words words words</p>
</section>


<section style="text-align: right;">
  <img src="https://forum.melonland.net/index.php?action=dlattach;attach=3693;type=avatar" />
  <h1>Test</h1>
  <p>Words words words</p>
</section>
Logged


everything lost will be recovered, when you drift into the arms of the undiscovered

Artifact Swap: SkeleraveOzwomp wants to know your locationOfficially Doga puppy for your travelsspring 2023!MIDI WarriorMIDI Warrior1234 Posts!Rising Star of the Web AwardMessage Buddy
lycoseadae
Jr. Member ⚓︎
**
View Profile WWW


⛺︎ My Room
StatusCafe: emily

Artifacts:
First 1000 Members!Joined 2023!
« Reply #2 on: August 01, 2024 @915.75 »

align="right" in the <img> code makes the image inline!

i cant remember if theres a way to override the inline effect of the align but creating a container for your right-aligned items with the style text-align:right; instead of using the align attribute will do what you want

edit: oop i didnt see melons reply saying the exact same solution
« Last Edit: August 01, 2024 @917.38 by emeowly » Logged

varve
Jr. Member ⚓︎
**
View Profile WWW

⛺︎ My Room
Artifacts:
Joined 2024!
« Reply #3 on: August 03, 2024 @737.95 »

Another option is to use float and clear CSS - "float: right;" the image, then have the header "clear: both;" to make it go below any floats.

Or setting the image's CSS to "display: block; margin-right: 5px; margin-left: auto;" would also work. (5px or whatever small margin you want to have on the right, to keep it from touching the edge of the screen.)
Logged

Pages: [1] Print 
« previous next »
 

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021 | Privacy Notice | ~ Send Feedback ~ 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