softpinkpony 's profile picture

Published by

published
updated

Category: Web, HTML, Tech

add a floatie to your page!! (html) ^v^

use this to add a floatie to your page without downloading a whole layout! (a separate png floating in the foreground in the corner) im not amazing at coding so basically its copied from tumblr & layout codes here!! credit to this one especially, go check it out ♥ Neptunia Layout


(add this to the top of your layout code in whatever style box ur using, above <style>)


<div class="floatie"></div>


(add this anywhere inside the <style> </style> tags, remember to add your chosen image url to the 'background:url' brackets. this takes a little trial & error since not every png will look perfect here, they MUST be transparent to work the best!!) 

    

.floatie {

background: url(PUT YOUR IMAGE URL HERE) no-repeat;

background-size: 100%;

position: fixed;

right: -35px;

bottom: -10px;

height: 690px;

width: 590px;

z-index: 1000;

}

(i like the size of this one & its just the basic dimensions taken from the linked layout, but you can adjust the height & width also!! i messed around with it but liked it as it is the best)


again, im just the messenger, i only know a little about coding i just figured this out myself ^v^ using it on my own page if you wanna see what it looks like! i wont be answering questions coz idk what im doing lol 


40 Kudos

Comments

Displaying 8 of 8 comments ( View all | Add Comment )

gryhmz

gryhmz's profile picture

IF YOU ARE TRYING TO ADD MULTIPLE FLOATIES TO YOUR PROFILE, PLEASE READ THIS. You cannot copy the code twice due to ID duplication. In other words, if you have one gif attached to the ID "floatie" then another gif cannot be attached to that same ID. So to fix this issue, all you have to do is:

1. paste another < div class="floatie">
between the first < style > < / style > of "floatie" and your new < style > < / style > for your new floatie.

2. Change the class to whatever new ID you want. Example: class="floatie-2"

3. Copy the code for "floatie" but change the ".floatie" at the beginning to your new ID. Example: .floatie-2

4. Change the .gif file in your new code for the new ID so it's not a duplicate GIF.

By doing this, you should be able to have multiple floaties on your page, but they must all have different IDs due to the HTML rule that one ID can be connected to only one attribute. Hope this helps!


Report Comment

KASPER

KASPER's profile picture

i dont think i really plan on using this, but atleast I know its called a floatie now and not just "floating image" LOL


Report Comment

Soos

Soos's profile picture

thanks my profile is still learning how to swim


Report Comment



my profile is swimming blub blub

by Kiramen🐬Atlas; ; Report

ORION ECTOPLASM (#1 tokrev fan)

ORION ECTOPLASM (#1 tokre...'s profile picture

its not working what am i doing wrong?


Report Comment



Did you ever figure it out?

by MadMantis; ; Report

Aw damn, I am struggling :')

by MadMantis; ; Report

i may be able to help!! feel free to message me and i can send you different versions of the code to see what works. i had to change it like six times

by ORION ECTOPLASM (#1 tokrev fan); ; Report

Thank you so much!! :3

by MadMantis; ; Report

What were some of the code changes you made? It’s not working for me either :,0)

by Libby 🍒; ; Report

not sure there could be a million problems with it.,, make sure your image is an accepted file and if youre trying to do multiple you have to number the div i think?

by ORION ECTOPLASM (#1 tokrev fan); ; Report

Could I possibly get some help too, please? Gosh every one I do doesn't work! I have the TINIEST bit of knowledge in CSS/HTML, idk if it's the fact I already have a layout or what :(

by ANGEL / JACK; ; Report

if you give me your discord i might be able to help better, mainly sending pictures to explain xd

by ORION ECTOPLASM (#1 tokrev fan); ; Report

THANK YOU!!! grr i just rlly want it to work i appreciate it! @4ngel1c_

by ANGEL / JACK; ; Report

Ghost_Boi

Ghost_Boi's profile picture

Thx, works really well!


Report Comment

MitochondRhia

MitochondRhia's profile picture

This is so cool, just started using!! Is there a way to add more floats to the page or does it only work for just one?


Report Comment



Alright, ignore my comment from just a few minutes ago. I managed to figure it out myself. You cannot copy the code twice due to ID duplication. In other words, if you have one gif attached to the ID "floatie" then another gif cannot be attached to that same ID. So to fix this issue, all you have to do is

1. paste another < div class="floatie">
between the first < style > < / style > of "floatie" and your new < style > < / style > for your new floatie.

2. Change the class to whatever new ID you want. Example: class="floatie-2"

3. Copy the code for "floatie" but change the ".floatie" at the beginning to your new ID. Example: .floatie-2

4. Change the .gif file in your new code for the new ID so it's not a duplicate GIF.

By doing this, you should be able to have multiple floaties on your page, but they must all have different IDs due to the HTML rule that one ID can be connected to only one attribute. Hope this helps!

by gryhmz; ; Report

Oh hey, I totally forgot I left this comment here a long time ago, thanks for the reply!! I'm definitely gonna implement this info for the future, thanks dude!!

by MitochondRhia; ; Report

Anakin

Anakin's profile picture

Needed this omg


Report Comment

DDR 0_0

DDR 0_0's profile picture

much thx!!


Report Comment