Question

好的，我想在我的pricetable旁边显示一些文字。此文本的背景必须在整个页面上重复，因此在容器外部。 Atm，文本背后是它的背景（因此不可见），背景在容器的边缘被切割。

如何编辑此代码以便我可以看到我的文本，并且背景溢出容器的边缘？

这就是现在的样子：

preview http://piclair.com/data/1t2ri.jpg

我的CSS：

.overflow {
margin:0 -400px;/* now equals 1600px wide */
min-height:213px;
background: url('/images/pakkettenbg.png') repeat-x;
position:relative;
z-index: 0;
overflow: visible;
}

#onside {position: relative; z-index: 1; margin-top: 124px; color: #8C8C8B;} 
#logopakketten {position: relative; z-index: 1; margin-left: 158px; margin-top: -332px; min-width: 782px; overflow: visible;} 
#orderbuttons {position: relative; z-index: 1; float: left; margin-left: 158px;}

我的HTML：

<div class="overflow">
<div id="onside">
<p>Unieke logo ontwerpen:</p>
<p>Levertijd:</p>
<p>Revisies:</p>
<p>Briefpapier ontwerpen:</p>
<p>Enveloppe ontwerpen:</p>
<p>Visitekaartje ontwerpen:</p>
<p>Bestandsformaten:</p>
</div>
</div>
<div id="logopakketten">
<img src="/images/logopakketten/Prijskolom%20S.png" alt="" /> 
<img src="/images/logopakketten/Prijskolom%20M.png" alt="" /> 
<img src="/images/logopakketten/Prijskolom%20L.png" alt="" /> 
<img src="/images/logopakketten/Prijskolom%20XXL.png" alt="" />
</div>

<div id="orderbuttons">
<a href="#"><img src="/images/logopakketten/ordernow.png" alt="" /></a>
<a href="#"><img src="/images/logopakketten/ordernow.png" alt="" /></a>
<a href="#"><img src="/images/logopakketten/ordernow.png" alt="" /></a>
<a href="#"><img src="/images/logopakketten/ordernowlastcolumn.png" alt="" /></a>
</div>

Answer 1

你为什么要使用定位？这是一个修辞问题，你不应该（使用定位）。这是CSS的jQuery，每个人都使用它，这是你可以使用的最糟糕的事情。

如果子元素是浮动的，则父元素需要设置overflow: auto;。也不要使用斜杠启动相对URL。您应该习惯使用base元素...

http://www.jabcreations.com/blog/streamlining-local-and-live-development-with-the-base-element

具有重复灰色背景图像的主要元素应包含那些垂直横幅。你想要那些横幅左边的文字吗？然后将文字放在那些横幅的左边。

你没有足够的帖子来保证一个完整的工作演示（回复更多信息，我可能会为你改进这个），尽管这会让你在正确的方向上移动和开槽。确保相应地调整基本元素（对于本地/实时环境，它将有所不同，使用PHP等脚本语言来确定您的域（例如localhost或example.com），然后然后提供正确的服务基本元素的值）。

<?php
if (isset($_SERVER['HTTP_ACCEPT']))
{
 if (stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
 {
  header('Content-Type: application/xhtml+xml');
 }
 else {header('Content-Type: text/html');}
}
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<base href="http://localhost/version-3.0/" />
<style type="text/css">
.overflow {overflow: auto;}
.left {float: left;}
.width_10 {width: 10%;}
.width_20 {width: 20%;}
.width_30 {width: 30%;}
</style>

</head>

<body>

<div class="overflow">

<div class="left">
 <p>text here</p>
</div>

<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20S.png" alt="" /> 
</div>

<div class="vbanner">

<img src="images/logopakketten/Prijskolom%20M.png" alt="" /> 
</div>

<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20L.png" alt="" /> 
</div>

<div class="vbanner">
<img src="images/logopakketten/Prijskolom%20XXL.png" alt="" />
</div>

</div>

</body>
</html>

如果您不使用脚本（例如PHP），请将此保存为.xhtml扩展名（XHTML不能在IE8或更低版本中运行，但目前它的市场份额为5％，在您理解的这个阶段专注于合格的浏览器）和XHTML很棒，因为当你遇到一个你知道需要修复它的错误时它是严格的，除非你想要弄三天试图找出你错过了一个属性的引用。严格的代码意味着一旦你习惯了，你就会第一次做到正确，并且它会为你节省大量的时间。

您也可能会学习如何正确使用CSS级别1，而不是开玩笑，大多数人都没有正确使用float属性并最终发送垃圾邮件大量position属性翻页的地方是吮吸。

http://www.jabcreations.com/web/css/nested-divisible-elements

是的，你最终将position用于具有高级布局的网站的某些主要元素（提示：99％的网站没有高级布局）但没有良好的基础，所有内容都位于其上接下来会更加坚固。

如何告诉我的背景溢出容器？

1 个答案: