adding a separate image to a pet profile?
Replies
(sorry, i'm not a coder so i have no idea how to phrase this lol) so most of my pets are using the same profile template, Gap being an example, and i'd like to add images to a few of them next to the profile box. i've tried a few codes at this point but none of them seem to be the right one, they all either don't show up or just end up inside the profile box.
any help would be appreciated!
✨
you'll want to create a new div, position it where you want using absolute positioning, and put the images in it. any new div you create will be nested inside , so make sure that's set to overflow: visible. let me know if you need me to go into more detail.
more detail would be good! thank you btw
✨
first you need to create a new div by adding something like this to your CSS, between the style tags. change the number values to get the positioning and dimensions how you want them (keep in mind that negative numbers work for the position, so you should be able to get it wherever you want it).
{
position: absolute;
left: XXpx; top: XXpx;
width: XXpx; height: XXpx}
then outside the style tags (and outside of the "txt" div) you would add the following:
if the new div is not visible on the profile, that's because it has been placed outside the bounds of "pet_desc" (the container in which everything outside the style tags exists). to force the new div to display, find the line in your CSS beginning with "" and add "overflow: visible" to it. does that work?
i looked through it, but doesn't actually seem to be in this profile code anywhere, would i be able to add it? if so, where? i did get the image to appear and was able to resize/move it, but it was still confined to the profile box.
✨
link to the original i only edited it slightly so hopefully it won't matter
✨
ok, content is what you're going to want to set the overflow to visible on. so just add this outside the style tags (replacing the URL with the right one):
and then anywhere inside the style tags (you can just plop it at the end, before the final closing </style>) add:
{overflow: visible}
{ position: absolute; left: 580px; top: 0px; width: 400px; height: 400px}
and just adjust the position values to your liking, and the dimension values to match the image you're using.