Im having difficulty teaching myself how to place buttons on top of an image im using for my homepage.
Ideally im trying to make 4 rollover buttons apprear in the lower right corner of my image, like so:
Ive been racking my brain for hours on this and I cannot accomplish my goal, to see what I have thus far:
This I have accomplished like so:
Here's what I'd do. Hmm, is .Monkeys holding the whole thing? Then make it 'position: relative' so it can act as a containing block for absolutely positioned children. Then wrap the buttons in their own DIV. Let's give it the id "buttons". Absolutely position that DIV at the bottom right. That will actually place it outside the .Monkeys DIV, but that's where we want it. Now, move it back in by setting margin-top and margin-left to the negtive value of the DIV's width and height. It may sound odd, but if you do it step by step as I described it, you can see what's going on.
Also get rid of that div align. You're doing CSS now.
Something like this.
To explain the last bit I said, if what you have now is all you are going to have there you can skip the absolute positioning altogether. Maybe I got a little overambitious. With the HTML in my example you just need to move the buttons up over the image. The #buttons DIV doesn't need a width. Just right align the buttons.
I very much appreciate your help, I inserted the code you suggested and came up with this
Unfortunately the monkey pic is no longer centered and the buttons do not sit in it correctly..... Did I break it?
I don't know. The style sheet isn't read because you have included public_html in the link to it.
<link href="/public_html/styles2.css" rel="stylesheet" type="text/css">
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)