Need help with element placement on pet profiles...
Replies
Okay, so I've been wracking my brain about this for a while. And every time that I've tried to make it work it just doesn't XD
What I need help with is how to make pet profile elements like the treasure chest, minion, spotlight etc be contained within a wrapper/container div so that I can then position those elements within that wrapper/container? I'm thinking that it'll be easier for me to move everything around and position the core parts of the profiles if I can just figure out how to make them all move like one element. I hope that makes sense.
I tried making use of the css grid a few days ago and I could make the container div work for the text div that I have and for the name graphics that I'm using for that particular profile. But then when it came to the treasure chest and the other parts I just could not get them to be contained, so to speak.
As an example of what I tried I can include these bits.
This was within the style tags:
.wrapper > .tc {
positioning coding went here obviously
}
And then I had something like this in the html bit of the code:
As well as trying it without the added tc div class (and obviously changing the code in the style tags to match). I'm sure that it's probably something obvious that I'm missing about this whole thing, but right now it feels like I'm just staring myself blind trying to figure it all out XD
But yeah, what I'm trying to figure out is basically how to include the different pet profile elements (tc, minion, spotlight etc) in the html bit of the code so that I can then wrap it all in an encompassing div. Like I said before, I hope this all makes sense to someone that has the know-how to help ^_^
Any and all help appreciated ❤️
Ps. The reason that I'm not including any specific coding from the profile that I worked on at the time is because I'm looking for information on how to do this so that I can apply it to future re-works of pet profiles, as it is not just going to be applied to just a single profile.
If I understand what you're trying to say, which is trying to change the structure of the profile so default elements such a pet treasure go where you want well that is not possible to do from my knowledge, and if it was I suspect that it'd be noted somewhere by staff and I never seen such a thing,
Now there maybe a way to get the effect and allow easy repositioning of the whole thing but it'd be a bit of a set up below will be a dummy example and some quick explanation below that all inside soiler to make post not super long by default
Code In here
<style>
:root {
--overall_pos: 100px;
}
, , { position: absolute; }
{ left: calc(var(--overall_pos) + 0px); } { left: calc(var(--overall_pos) + 200px); } { left: calc(var(--overall_pos) + 450px); width: initial; } </style>
So keep in mind it's a dummy example so it only positions horizontally but the principle can be applied to vertical easily anyways
- the first block with :root selector is defining a css variable, why that selector well this makes the variable a global variable and can be used by all elements > local variables like if a var is defined in the selector "" it can only be used by that element and any element inside that one
- skip the next block that is just so left works then there are the three selectors that are important so left value is complicated, calc does simple calculation of two numbers so addition in this case, the first number is the variable defined earlier this will be the overall position of the elements, the second number is the positioning on the page itself so place them individually to how you like them to look
So to move them all as a unit change the variable's value
I wrote this post decently quick and such so if anything is confusing or such please ask and I'll write a more thorough and careful explanation
Thanks for the reply. I will definitely give it a try. A bit late in the day for me for that kind of thing right now though (almost 11 pm here), but I'll be trying it tomorrow :)
At the very least you've given me a place to start working from ^_^