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

灰色の背景画像が繰り返されるメイン要素には、これらの垂直バナーを含める必要があります。これらのバナーの左側にテキストが必要ですか? 次に、これらのバナーの左側にテキストを配置します。

完全に機能するデモを保証するのに十分な投稿がありませんでした (詳細を返信してください。これを改善できる場合があります) が、これにより、正しい方向に移動して溝を掘ることができます。それに応じて base 要素を調整してください (ローカル/ライブ環境では異なります。PHP などのスクリプト言語を使用してドメイン (localhost または example.com など) を決定し、base 要素に正しい値を提供します) 。

<?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% です。理解のこの段階では、有能なブラウザーに集中しています)。エラーが発生した瞬間に、それを修正する必要があることがわかるので、属性の引用符が欠けていることを把握しようとして3日を吹き飛ばしたくない限り、それは素晴らしいことです. 厳密なコードとは、慣れてしまえば、最初から正しいコードを作成する方法に慣れ、膨大な時間を節約できることを意味します。

また、冗談ではなく、CSS レベル 1 を正しく使用する方法を学ぶこともできます。ほとんどの人はプロパティを正しく使用せず、float大量のプロパティをあちこちにスパム送信positionしてページをめくります。

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

ええ、最終的にはposition、高度なレイアウトを備えたサイトの特定のメイン レベルの要素を利用することになります (ヒント: サイトの 99% には高度なレイアウトがありません)。 .

于 2013-06-16T15:35:23.473 に答える