The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Positioning Elements, Dropping buttons on top of an image
Convict#4616
post Sep 27 2006, 07:03 PM
Post #1





Group: Members
Posts: 2
Joined: 27-September 06
Member No.: 252
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 27 2006, 07:57 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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. happy.gif

Something like this.

QUOTE
<div class="monkeys">
<img class=MonkeyPic src="/Logo4.jpg" alt="AngryMonkeyLove">

<div id="buttons">
<img src="/Buttons/ForumA.gif" width="94" height="94" alt="Buttons" >
<img src="/Buttons/ForumA.gif" width="94" height="94" alt="Buttons" >
<img src="/Buttons/ForumA.gif" width="94" height="94" alt="Buttons" >
</div>



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 27 2006, 08:37 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
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 }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Convict#4616
post Sep 27 2006, 11:48 PM
Post #4





Group: Members
Posts: 2
Joined: 27-September 06
Member No.: 252
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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 27 2006, 11:56 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I don't know. The style sheet isn't read because you have included public_html in the link to it. tongue.gif

<link href="/public_html/styles2.css" rel="stylesheet" type="text/css">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 06:31 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC