0

我正在尝试将文本更好地放置在图像上，以便在居中的 div 中更好地显示。分辨率低于 1k 像素。对于桌面分辨率，它确实需要更好地显示。这是我的网页模板，正文中的内容居中。

网站

如果您查看低于 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;
}

TYVY 贾里德

4

2 回答 2

1

您的#header需求position: relative;如果它是相对的，那么您可以根据需要设置left: 10px在.textoverimage和顶部。

于 2013-04-26T09:48:42.870 回答
1

如果你想在图像上显示你的文本，从左边 10px 给出位置：相对于父 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 回答