0

WPテンプレート用にこのデザインを作成しようとしています：http： //minus.com/lbi1iH25EcKsu7

今私はこのようです：http：//www.uncensuredftw.es/plantilla-blueftw/boilerplate/index.html

私はあなたが一般的な考えを得ることができると思います;）

私は知っています...それは私のせいです：ブラウザはウィンドウのサイズを左から右に計算するので、マージンを入れると、100％のサイズのdivが右に移動します。

しかし、問題は次のとおりです。それを機能させる方法がわかりません:(。

divで「黒いバー」を作成したかったので（赤とオレンジで機能しないものよりもペイントしました）、トリックは機能しました...しかし、左側のバーだけが希望どおりに機能します。

私はアイデアから抜け出しています。私は考えられるすべてのことを試しましたが、何も機能しません。 多分あなたは私を助けることができますか？;）

これはhtmlコードです：

<div class="barraUL"></div><div class="barraDL"></div>
<div class="presentacionbg"></div>
<div class="presentacion">
<div class="barraUR"></div><div class="barraDR"></div>

そしてこれはcssです：

.barraUL {
   position: absolute;
   width: 50%;
   height: 27px;
   background-color: black;
   right: 50%;
   margin-right: 500px;
   margin-top: -20px;
}
.barraDL {
   position: absolute;
   width: 50%;     
   height: 27px;
   background-color: black;
   right: 50%;
   margin-right: 500px;
   margin-top: 309px;
}
/* This next two are the ones than "doesn't work" */
.barraUR {
   position: absolute;
   width: 50%;
   height: 27px;
   background-color: red;
   left: 50%;
   margin-left: 500px;
   margin-top: -4px;
}
.barraDR {
   position: absolute;
   width: 50%;     
   height: 27px;
   background-color: orange;
   left: 50%;
   margin-left: 500px;
   margin-top: 325px;
}
4

1 に答える 1

0

右のdivはウィンドウ幅の50％に拡大しています。バーがウィンドウの長さまで伸びてから切り取られる液体レイアウトの場合、通常、下にあるdiv（この場合はバーと黒いパターンの背景）を作成してから、ウィンドウの100％に拡張します。CSSだけで（特に絶対位置ではなく）パーセント（左div+固定中央画像+右div）のような相対的な長さを使用して追加のレイアウトを作成することはできません。overflow: hidden;これを使用することを主張する場合は、コンテンツを中央に配置した後にhtml {}またはbody {}タグを付ける必要がありますが、これは悪い習慣です。スプライト画像の下の画面全体に2つの長いdivを配置することをお勧めします。

于 2012-08-09T06:49:25.947 に答える