The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> 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

Posts in this topic


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

 



- Lo-Fi Version Time is now: 20th October 2019 - 08:53 AM