0

スクリーンショットは次のとおりです。

ヘッダー http://dl.getdropbox.com/u/118004/Screen%20shot%202010-04-13%20at%202.50.49%20PM.png

左側の赤いバーは、#personal div に設定した背景で、コンテナーの上部に垂直に揃えたいと考えています。

問題は、#container div の上にある #container-top div の背景が絶対配置であるということです。スペースが残らないように #personal div を上に移動する方法はありますか?

HTML

<div id="container">
  <div id="container-top"></div>
    <div id="personal">
      <h1>Jonathan Doe</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliqua erat volutpat.</p>
    </div> <!-- end #personal -->
</div> <!-- end #container -->

CSS

#container {
  background: url(images/bg-mid.png) repeat-y top center;
  width: 835px;
  margin: 40px auto;
  position: relative;
}

#container-top {
  background: url(images/bg-top.png) no-repeat top center;
  position: absolute;
  height: 12px;
  width: 835px;
  top: -12px;
} 

#container-bottom {
  background: url(images/bg-bottom.png) no-repeat top center;
  position: absolute;
  height: 27px;
  width: 835px;
  bottom: -27px;
}

#personal {
  background: url(images/personal-info.png) no-repeat 0px left;
}
4

3 に答える 3

1

[編集：刷新。]

HTML：

<div id="container">
  <div id="container-inner">
    <div id="personal">
      <h1>Jonathan Doe</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliqua erat volutpat.</p>
    </div> <!-- end #personal -->
  </div> <!-- end #container-bg -->
</div> <!-- end #container -->

CSS：

#container {
  background: url(images/bg-mid.png) repeat-y top center;
  width: 835px;
  /*margin: 40px auto;*/
  margin: 28px auto 40px auto;
  position: relative;
}

#container-inner {
  background: url(images/bg-top.png) no-repeat top center;
}

#personal {
  background: url(images/personal-info.png) no-repeat 0px left;
  padding-top: 12px;
}

これはあなたがやりたいことによるものですか？

于 2010-04-13T12:37:05.430 に答える
1

何かが足りない場合を除いて、あなたが投稿したものがあなたの望む結果を生み出しているのがわかります。

リセットCSSをスタイルに適用したかどうか疑問に思いますか？そうでない場合は、yahooユーザーインターフェイスのcssリセットまたはEricMeyerのリセットCSSを確認できます。

ブラウザには、デフォルトのパディングとマージン間隔がある場合があります。

他のスタイルの前にリセットCSSを含めます。おそらくあなたはすでにこれを知っていますが、それは尋ねる価値があります。

于 2010-04-13T12:39:30.487 に答える
1

次の CSS を変更します。

    #personal {
  background: url(images/personal-info.png) no-repeat 0px left;
position: relative;
top: 0px;
left: 0px;
}

positionこの要素relativeを親にする必要があります。container、必要な場所に収まるようにします。およびプロパティは、特定の要素を親の左上隅からどれだけ離すかtopを指定します。leftdiv

またはこれ：

#personal {
      background: url(images/personal-info.png) no-repeat 0px left;
    margin-top:-10px; /*px value that works*/
    }

これは、親 div 内の現在の位置を取得し、現在の位置よりも 10 ピクセル高くレンダリングします。

于 2010-04-13T12:06:17.077 に答える