0

テキストを画像の上に配置して、中央の div でより適切に表示されるようにしています。解像度が 1,000 ピクセル未満の場合。デスクトップの解像度では、より適切に表示する必要があります。これは私の Web ページ テンプレートで、本文のコンテンツが中央に配置されています。

Webサイト

1k ピクセル未満のページを表示すると、正しく表示されません。左から約 10 ピクセルのヘッダーの上に表示されるようにしたいと考えています。

それが表示される私のHTMLコード。

<div id="header">
  <div class="textoverimage">
    <p>New two day trip - Zoo & New Years Eve<br /> Sydney Harbour 2012. Book now to avoid disappointment.  </p>
  </div>
  </div>

上記の要素の私のCSS。

#header {
    height: 205px;
    width: 960px;
    margin: 0px;
    padding: 0px;
    border-top: medium none #009933;
    border-right: medium none #009933;
    border-bottom: medium none #009933;
    border-left: medium none #009933;
    background: url(../_images/header.jpg) no-repeat;
}

.textoverimage {
    z-index: 100;
    position: absolute;
    left: 350px;
    top: 100px;
    right: 30px;
    bottom: 0px;
    height: 50px;
    width: 300px;
    border: medium none #03F;
    color: #FFF;
}

タイビー・ジャレッド

4

2 に答える 2

1

画像の上にテキストを左 10px から表示したい場合は、position: relative to parent div と left:10px を .textoverimage クラスに指定し、段落 p から padding-left を削除します。コードは次のとおりです。

.textoverimage{
  z-index: 100;
 position: absolute;
 left: 10px;
 top: 100px;
 right: 30px;
 bottom: 0px;
 height: 50px;
 width: 300px;
 border: medium none #03F;
 color: #FFF;
}

#header {
 height: 205px;
 width: 960px;
 margin: 0px;
 padding: 0px;
 border-top: medium none #009933;
 border-right: medium none #009933;
 border-bottom: medium none #009933;
 border-left: medium none #009933;
 background: url(../_images/header.jpg) no-repeat;
 position: relative;
}

p {
 padding: 15px 0;
 margin: 1px;
 vertical-align: text-top;
}
![screenshot][1]


  [1]: http://i.stack.imgur.com/vGARy.jpg
于 2013-04-26T09:51:36.587 に答える