0

building a website that will eventually be a Facebook game (Hopefully!) and I am a little stuck. I have provided an image to better explain.

I have created a DIV, the background is the image (Minus my very professional scrawling's) and positioned over the DIV will be other Image's and DIV's. While I understand HTML, the images are NOT going where they are supposed to go, they get totally out of position and end up everywhere! I will provide some code in a moment, first I will explain the numbers I placed on my, very professionally edited image.

  1. currenthero div. (Or DIV with image inside, tried both)
  2. Image2. It will appear under the border / X button.
  3. missionpopupexit div. Invisible, sit's on the X button and calls a JavaScript function.
  4. image4.
  5. Text for whatever mission it is!

The HTML:

<div id='missionpopup'>
  <div id='currenthero'>
    <img src='images/TallSlimTest.png' />
  </div>
  <div id='missionpopupexit' />
</div>

The CSS:

#missionpopup {
text-align: left;
width: 752px;
height: 500px;
position: relative;
background-image:url('./images/missionpopup.png');
}

#missionpopupexit {
margin-left: 720px;
width: 30px;
height: 30px;
position: absolute;
border-style: solid;
border-width: 1px;
}

#currenthero {
margin-left: 33px;
margin-top: 16px;
margin-bottom: 14px;
float: left;
}

I want to be able to make the id="missionpopupexit" sit over the X in the top right, without it affecting how everything else in the DIV is positioned or where! I've used different variations of float and display: inline;, things to that effect, but everything still seems to get all jumbled up!

Community
  • 1
  • 1
Hanzo Hasashi
  • 46
  • 6
  • 1
    Have you used `top` and `right`? I think, with the relative-absolute element, it should work. – Waleed Khan Aug 27 '12 at 16:32
  • You are missing a closing tag, ``, someplace. [You cannot "self-close" a `div` with `/>`](http://stackoverflow.com/questions/7971716/is-it-ok-to-use-a-self-closing-div-tag). – Sparky Aug 27 '12 at 16:34

1 Answers1

1

First you must close the div properly, .

Second, don't use margin when you are using position absolute, try this:

#missionpopupexit {
width: 30px;
height: 30px;
position: absolute;
border-style: solid;
border-width: 1px;
}
Sigalit Amsalem Yemini
  • 374
  • 1
  • 5
  • 18