Gonna try to explain this as best I can (and I left borders and stuff up on the profile I'm coding so it's a bit easier to see what I'm talking about) Okay so basically I need DIVs inside of DIVs, which is easy enough. So up on this page, if you click on the top red button, it's anchor linked to (which is the blue lasery image) and then inside of that, I positioned (which is the actually text stuff). Two divs, one inside the other so i can position it.
But I need to do the same thing for the next button, but with the TC. (If you click it, it'll show you want I need to do). Now, I tried just coding the div (the main anchor linked div) and then coding to be positioned inside it. I did the coding like this:
CODE
{background:url(http://i.imgur.com/r0RxYyk.png) no-repeat; height:380px; width:284px; top:203px; left:433px; border:1px solid ; position:absolute; opacity:0; z-index:2;}
:target {opacity:1;}
{height:130px; width:253px; top:230px; left:10px; padding:5px; overflow:auto; border:1px solid ; position:absolute;}
But it ended up looking like this with the not actually being inside the anchor linked div at all, and on top of that, it was visible no matter what (main page, when clicking the story anchor, etc) ??????
DOES ANY OF THIS MAKE SENSE?!? Is this even possible to do? Please help me I don't know wtf I'm doing wrong. I hate the existing divs :'(
(pinging u here for better explanation so if u have time, i would appreciate the help lots!)
The problem is that you can't really manually code in the pet treasure. So you can't put it inside another div. I'll try to come up with a solution in a bit, but first I'm away for an hour or so^^
ya i remember trying to do this a long time ago for a profile and got so frustrated and just remade the entire the profile layout
so any help would be wonderful!!! take your time!
Okay so the only solution I've come up with so far (url=https://subeta.net/pets/Juko]here[/url] only really works if the treasure box doesn't scroll..
The only solution I could offer you
I just realized I made a mjor brain fart because I've managed to get it working on many profiles, so brb :D I hope you didn't want the red borders in the final version but if you do, you'd have to add them to the image c:
Edit: Okay, so basically what I'm doing is this: I work with borders because they're outside of the box that scrolls. There's just one problem and that is that the background only begins inside of the border but it can go outside. So if you have a image positioned to the top left corner it fills the border to the bottom right. That's why a repeating background is your friend! So what you're doing is taking the part that should be where the border is (following above example the top and the left part and the amount of pixels your border has) and move those pixels to the other ends of the image. (Photoshop has a filter called offset which I use for this^^) I hope that explanation made sense?
So here's a working code:
{background: url(http://i.imgur.com/KO6bPU7.png) bottom left; height:124px; width:248px; top:203px; left:433px; overflow:auto; position:absolute; opacity:0; z-index:2;border:13px solid transparent; border-top:230px solid transparent; }
:target {opacity:1;}
The link would have to be changed to target the treasure chest itself^^
And this is the background image after switching click.
omfg that's brilliant thank you so much i am so happy
the way you edited the image to be repeating... is that just based off the size of the borders? (so like you cut 13 off the bottom and the left and moved it, right?)
You're welcome, I'm really glad I could help! I was trying to figure it for like half an hour and then suddenly realized that I totally solved that problem in the past because I absolutely wanted Arctus' treasure chest to hover!
Yes, that's correct c: Basically I find out what offset would look good and then I go from there^^