HTMLHelp Forums > Positioning Elements

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

Convict#4616

Sep 27 2006, 07:03 PM

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:

XXXXXXX
XXXXXXX
XXXXXXX
XXXoooo

Ive been racking my brain for hours on this and I cannot accomplish my goal, to see what I have thus far:
http://www.angrymonkeylove.com/index1.html

This I have accomplished like so:

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/public_html/styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="Monkeys">
  <div align="center">
    <img class=MonkeyPic src="/Logo4.jpg" alt="AngryMonkeyLove" >
      <img class=Buttons src="/Buttons/ForumA.gif" alt="Buttons" >

    </div>
</div>
</body>
</html>

CODE

/* CSS Document */

.Monkeys {
background-color: white;
height: 600px;
width: 800px;
}
.Buttons {
background-color: white;
float: left;
}

Optimally I want 4 buttons along the bottom right of the image, I have designed a pressed and an unpressed version.

Can anyone help me with this?

pandy

Sep 27 2006, 07:57 PM

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.

QUOTE

CODE

.monkeys   { position: relative;
             width:800px;
             /*The below centers the whole DIV. Not sure that's what you wanted?*/
             margin-left: auto; margin-right: auto }
#buttons   { position: absolute; top: 100%; left: 100%;
             width: 300px;
             margin-top: -94px; margin-left: -300px;
             border: 2px solid red }

This is thinking you may want to have more content there, i.e you don't know the height of the .monekeys DIV. If that's not going to happen you can position the buttons more directly since you know the pixel size of the big picture.

pandy

Sep 27 2006, 08:37 PM

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.

CODE

.monkeys   { width:800px;
             /*The below centers the whole DIV. Not sure that's what you wanted?*/
             margin-left: auto; margin-right: auto }
#buttons   { text-align: right;
             margin-top: -94px;;
             border: 2px solid red }

Convict#4616

Sep 27 2006, 11:48 PM

I very much appreciate your help, I inserted the code you suggested and came up with this

http://www.angrymonkeylove.com/index2.html

Unfortunately the monkey pic is no longer centered and the buttons do not sit in it correctly..... Did I break it?

pandy

Sep 27 2006, 11:56 PM

I don't know. The style sheet isn't read because you have included public_html in the link to it.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.