0

I have a little problem with my short code. Here you will find my website.
It's only a image with a button on it. My problem is, that now the button moves around when I want to scale the browser window. Therefore the button would be anyplace else on different browsers, computers, mobile phones,...

This is my code:

<center> <div style="position: relative; left: 0; top: 0;"> <img src="/images/home2.png" style="position: relative; bottom: 0; left: 0;"/> <div style="position: absolute; right: 300; bottom: 250;"> <a href="http://www.pugganagga.com/"><img src=" /images/button.gif " onmouseover="this.src=' /images/button2.gif '" onmouseout="this.src=' /images/button.gif '" /></a> </div> </div> </center>
Improve this question

4 Answers 4

Reset to default
1

Try this:

<div style="position: relative; left: 0; top: 0; margin: 0 auto; width:892px"> <img src="/images/home2.png" style="position: relative; bottom: 0; left: 0;"> <div style="position: absolute; right: -145px; bottom: 250;"> <a href="http://www.pugganagga.com/"><img src=" /images/button.gif " onmouseover="this.src=' /images/button2.gif '" onmouseout="this.src=' /images/button.gif '"></a> </div> </div>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

The problem is, your div is full-width of browser window, the position: absolute applies to the full-width of your div and not to the width of your image. Furthermore you should export your styles to an extern .css file, inline .css is not the best technique.

here is what you should change 

<div style="position: relative;background: url(/images/home2.png);width: 800px;height: 800px;"> <div style="position: absolute; right: 30px; bottom: 125px;"> <a href="http://www.pugganagga.com/"><img src=" /images/button.gif " onmouseover="this.src=' /images/button2.gif '" onmouseout="this.src=' /images/button.gif '"> </a> </div>

EDIT:

here is a better way to achieve what you want with CSS

HTML

<div class="container"> <div class="button"> <a href="http://www.pugganagga.com/"><img src=" /images/button.gif " onmouseover="this.src=' /images/button2.gif '" onmouseout="this.src=' /images/button.gif '"> </a> </div>

CSS

.container{ position: relative; background: url(/images/home2.png); width: 800px; height: 800px; margin-left: auto; margin-right: auto; } .button{ position: absolute; right: 30px; bottom: 125px; }
Improve this answer

Comments

0

Well lot of problems with this code :)

First, you don't need to set left: 0, or top: 0 on element that have position:relative;. When you use coordinates on relative positionning, it means : go on XXpx of the top of its current place. So when you put 0, you mean : stay at your current place.

Then, I cleaned up your code :

<body background="http://www.pugganagga.com/images/giftly.png" text="#990000" link="#0000CC" vlink="#000066" alink="#000000"> <div style="width: 800px; margin: 10px auto; position: relative; "> <img src="/images/home2.png" > <div style="position: absolute; right: 50px; bottom: 250px;"> <a href="http://www.pugganagga.com/"><img src=" /images/button.gif " onmouseover="this.src=' /images/button2.gif '" onmouseout="this.src=' /images/button.gif '"></a> </div> </div> </body>

I removed obsolete center tag, remove useless `position: relative' and used units for coordinates (200px instead of 200, as in CSS, it means nothing).

Improve this answer

Comments

0

This can be one of the options. This will fix the image in a constant place. Try this out.

<div style="position: fixed; left: 0; top: 0;"> <img src="/images/home2.png" style="position: fixed; left: 453; top: 449;"/> <div style="position: absolute; right: 300; bottom: 250;">
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.