0

好的，我想在我的价格表旁边显示一些文本。此文本具有必须在整个页面中重复的背景，因此在容器之外。Atm，文本位于其背景后面（因此不可见），并且背景在容器边缘被切割。

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

这就是它现在的样子：

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

1 回答 1

0

为什么要使用定位？这是一个反问，你不应该（使用定位）。它是 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% 的站点没有高级布局），但是如果没有良好的基础，在此基础上的所有内容都将变得更不可靠.

于 2013-06-16T15:35:23.473 回答