search

anna-trojanowska / dsn1676-term-project

0 stars 0 forks source link

bring face to front #1

Open anna-trojanowska opened 9 years ago

anna-trojanowska commented 9 years ago

Hey Thomas,

I'm having issues arranging the elements in my banner.

The face is sort of floating behind the sprinkles even though I tried the "z-index" to bring it to the front and the sprinkles to the back.

I made the face a background in css since the tears need to be on the front (like the clock hands on the clock face).

Also, the treats used to be rotating in space but now they are somewhere floating behind the sprinkles, too. I would like them to be rotating slowly around the face but I would need to position the face first before going there.

I tried to set everything up properly but I'm confusing myself in the process. Help me??

Anna

@thomasjbradley

thomasjbradley commented 9 years ago

For the sprinkles:

The z-index numbers are just in the wrong order. The face should have a higher z-index: the higher the number the closer it is to you in the layer system.

thomasjbradley commented 9 years ago

For the treats:

They also need a z-index to bring them in front.

And, I think the animation for the treats should be directly on the img tags for the treats instead of the div that surrounds them. But you're correct—get the face positioned first, before you mess about with the treats.

anna-trojanowska commented 9 years ago

Okay that worked! But the sprinkles in the background are still not reaching all the way to the top. I tried overflow: hidden, margin and padding: 0, position: absolute.... do you know why it won't span all the way?

@thomasjbradley

thomasjbradley commented 9 years ago

In the HTML, try moving the sprinkles div to above the fatface div.

anna-trojanowska commented 9 years ago

YOU'RE A MAGICIAN @thomasjbradley

anna-trojanowska commented 9 years ago

Alright so now the "treats" are visible at the bottom and I would like them to rotating around the face.

I'm not sure if they need to all be in a div together or if they should each be in their own divs since they are starting to rotate from different positions.. does that make sense?

@thomasjbradley

thomasjbradley commented 9 years ago

So, I'm feeling like you need an element surrounding everything. Right now there is the main element, but maybe it should be header, then it could be position: relative.

Next, the .treats would be position: absolute. Put a background colour on it so you can see where it is and give it a width, height, top, left to put it around the face.

Then, each treat img would also be absolute, and have their own animation to rotate them. So .treats doesn't rotate, the individual img tags do.

thomasjbradley commented 9 years ago

p.s. You're missing the gh-pages branch.

anna-trojanowska commented 9 years ago

Got it. Will try to get that working in class in 13 min! Thanks for your help :)

On Wednesday, February 4, 2015, Thomas J Bradley notifications@github.com wrote:

p.s. You're missing the gh-pages branch.

— Reply to this email directly or view it on GitHub https://github.com/anna-trojanowska/dsn1676-term-project/issues/1#issuecomment-72923485 .