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

好的，我想在我的pricetables旁边显示一些文本。该文本的背景必须在整个页面上重复出现，因此在容器之外。但是，文本在它的背景后面(因此不可见)，并且背景在容器的边缘被切割。

我如何编辑这段代码，使我可以看到我的文本，背景溢出的容器的边缘?

现在是这样的:

预览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>

为什么要使用定位?这是一个反问句，你不应该(使用定位)。它是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>

保存为。XHTML扩展名，如果你不使用脚本(例如PHP) (XHTML不能在IE8或更低的版本中工作，但它现在有5%的市场份额，在你的理解集中在胜任的浏览器的这个阶段)，XHTML是伟大的，因为它是严格的，当你遇到一个错误，你就知道你需要修复它，除非你想花三天时间去弄清楚你错过了一个属性的引号。严格的代码意味着一旦你习惯了，你就会第一次进入正确的状态，这将节省你大量的时间。

你也可以站起来学习如何正确使用CSS 1级，不是开玩笑，大多数人没有正确使用float属性，最终到处都是垃圾成堆的position属性，翻开一页吮吸。

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

是的，你最终会利用position的某些主要级别的元素，为网站的高级布局(提示:99%的网站没有先进的布局)，但没有一个良好的基础，所有铺设在上面的东西将更不坚固的中继

相关内容

最新更新

热门标签：