solved! thank you!
Replies
Hi! I'm kinda Bad at coding (read: I have the knowledge of a newborn) and I have a question about my lovely Catwitch's profile.
I'd like to put art of her on the right side, and I could've sworn there was a code for that. I know I used one on Neo a long time ago but I'm not sure if that would translate on Subeta. Does anyone know how I could go about doing this? The image size is also really big, so how would I go about resizing it for the profile? I'm pretty sure I can do that via code but don't know how LMAO
The image in question: X.
Thank you in advance!
If you mean right of the orange content box, the following should help:
To add the image put the following html, could add it to the bottom of your code 
Note: added the id so the next step of styling is easier to do.
Now to add styling to set position and size add the following into your style tag
{
position: absolute;
top: 100px;
left:1010px;
width: 351px;
}
NOTES:
- Setting position to absolute makes it relative to the first ancestor to be positioned that is not static if none it's based on viewport/page which would be in this case.
Quick Ancestor term explanation for html context (just in case)
-
Now setting top and left will move the image around these numbers will probably need tweaking to get the exact position you desire. So as an example if they were both set to zero the image will be in the top left corner of the viewport/page.
-
Setting width will resize your image and it will automatically resize the height to keep ratio (or vice versa), the width I set is half the original size.
Hope this is clear and helpful. Also let me know if there is anything else I can help with.
-
Got it! That was easy to understand, thank you for taking the time to explain it to me!
i'm glad
went to see your pet and I noticed the location of the image interferes with your hovers but no worries this can be fixed without the need to move the new image at all
So you can add the following into your style tags
.content, , .pet_spotlight {
z-index: 1;
}
- z-index changes the order of positioned elements appear like which one is on top of the other, elements with the same number are resolved by the order they appear in the html (I can go into more detail/further explanation just ask)
Hope this is clear and helpful as well.
Oh snap! I totally forgot I had hovers LMAO, I was so focused on trying to get the image right I forgot completely. Thank you again! I didn't know that about z-indexes. I tried to teach myself a bit of css awhile ago and it went completely over my head so thank you for the clear explanation!
I've added that piece of coding onto the profile, so it should be good to go now.
you're welcome
also if you need any other help or want something explained feel free to ping, comment or smail me. Wouldn't mind if you wanted to add me as friend