0

最終的には Facebook のゲームになる (願わくば!) Web サイトを構築していて、少し行き詰まっています。よりよく説明するために画像を提供しました。

私は DIV を作成しました。背景は画像 (私の非常に専門的な走り書きを除く) であり、DIV の上に他の画像と DIV が配置されます。私は HTML を理解していますが、画像は本来あるべき場所に移動せず、完全にずれてどこにでも行き着きます! すぐにいくつかのコードを提供します。最初に、非常に専門的に編集された画像に配置した数字について説明します。

  1. 現在のヒーロー部門。（または、内部に画像を含むDIV、両方を試しました）
  2. 画像2. ボーダー/Xボタンの下に表示されます。
  3. ミッション・ポップ・イグジット・ディビジョン。目に見えない、X ボタンの上に座って、JavaScript 関数を呼び出します。
  4. 画像4.
  5. それがどんなミッションであってもテキスト！

HTML:

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

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;
}

id="missionpopupexit"DIV 内の他のすべての配置方法や場所に影響を与えることなく、右上の X の上に座ることができるようにしたいと考えています。float と display: inline; のさまざまなバリエーションを使用しましたが、その効果のためにすべてがごちゃごちゃになっているようです!

4

1 に答える 1

1

まず、div を適切に閉じる必要があります。

第二に、絶対位置を使用している場合はマージンを使用しないでください。これを試してください：

#missionpopupexit {
width: 30px;
height: 30px;
position: absolute;
border-style: solid;
border-width: 1px;
}
于 2012-09-29T21:02:28.760 に答える