So, I'm playing with coding to try to teach myself how to make pet pages. I'm a little stuck right now. I've been able to put my pet image and my treasure where it goes on the page, but I can't figure out the minion. It's just stuck in the top corner, and if I do manage to figure out how to move it, everything else moves as well. Where am I going wrong?

The Pineapple

Try this, adjust the 200px and 200px to whatever you want:

{ position: absolute; top: 200px; left: 200px; }

If you are interested in learning the concepts behind CSS positioning, I wrote about this subject before in these topics: Making a Responsive Profile? Why is my pet profile so long?

I'm open to answering questions/explaining things further. I know it's a lot.

When I reposition the minion, it ends up like this: x This is what I mean by when I move it, everything other things move as well. The pet is no longer in the right spot when I move the minion somewhere on the page. I understand the concept of location on the page, but I think my coding went wonky somewhere so maybe I should just redo it step by step again. I'm guessing I did something wrong with the columns?

Thanks for responding, by the way! : )

Is that screenshot what you see when you add the code I posted?

Yeah. I had changed the 200px's to 500px's for the screenshot. No matter what number I change it to, the pet always gets repositioned to that spot in the screenshot. If you check the page now, I have it set to 50px and the pet is still moved.

Hm, are you sure that's the only thing you changed? The two positions are independent, and behaving independently for me. That is, even if I remove the position:absolute and top and left attributes from pet_minion, the rest of the page stays the same.

I will say though, you don't need to have position:absolute on column_2 if you have it set on pet_image (unless that's the effect you want). (That's because, if you set position:absolute on column_2 and pet_image, then pet_image will be positioned relative to column_2. That could be what you wanted though, I'm not really sure.)

If you absolutely position column_1, column_2, and so on and make sure everything else is static, it should behave as you expect.

is right. The problem you're having right now with your pet page is because you absolutely position both and + . If you want to move your minion and pet image freely around the page, just setting absolute positioning to the individual elements ( and ) is enough. Plus you don't need to set z-index to your and

Your code: { background: url('http://i.imgur.com/jcIPjtu.png'); top: 47px; left: 76px; position: absolute; height: 200px; width: 200px; z-index: 10;}

{position:absolute;top:80px;left:70px;}

My suggested correction: { background: url('http://i.imgur.com/jcIPjtu.png'); top: 47px; left: 76px; position: absolute; height: 200px; width: 200px; }

{ top: 260px; left: 150px; position: absolute; height: 64px; width: 64px;}

You can change the values to as you see fit. I don't know where you want to put your minion (or perhaps I haven't read carefully), so I've come up with a temp. fix here. If you remove the code for you'll get that result. I'll remove your code from my pet's profile when you have taken a look.

Oh! OK, I totally understand now. I figured it was something for the column but didn't realize it was the code underneath the minion. Thank you for your help. Everything looks right now!