2012-03-20 6 views
2

私はCSSを初めて勉強しました。確かに私はここで何か基本的なものを見逃していますが、実際には分かりません。バックグラウンドリピート:repeat-y;役に立たなかった

.tab-left { 
    background-image: url(images/left.png); 
    background-repeat: repeat-y; 
    position: absolute; 
    width: 96px; 
    height: 1049px; 
    margin-left: -40px; 
    z-index: 99999; 
    } 

しかし、繰り返し-yのプロパティが動作しません:CSSで

<div class="tab-left"></div> 

:HTMLで

は、私はこれを持っている:これは、コードです。これは問題のサイトです:http://ziontouch.com/wordpress/

私は間違っていますか?

答えて

4

あなたの繰り返しはうまくいきます。問題は、heightがページの下端に達するのに十分な高さではないことです。

+0

あなたはそうですが、ページの高さに関連してイメージを繰り返す方法はありませんか?新しい投稿を追加してページの高さを上げる場合レイアウトが同じになるように、左上のイメージを自動的に繰り返し設定するにはどうすればよいですか? –

+0

これを行う最も簡単な方法は、9個のセルを持つ 'table'を使うか、' top:0px; bottom:0px; '適切な' position'設定を使用します。 –

0

背景は、です。

問題は、.tab-leftに明示的なheightが設定されていることです。これは、期待したほどの高さではありません。動作しますが、あなたのDIV要素の高さが全体のスペースを埋めるために十分な大きさではありませんそれ

0

...

0

それは、繰り返しているだけで、あなたのheight属性で指定され1049pxまで。

0

より大きい高さを使用する必要があります。

.tab-left { 
    height: 1622px; 
} 

これは境界線の底部の始まりに正確に達します。

0

だけで、次のコードで置き換えます:

.tab-left { 
    background-image: url(images/left.png); 
    background-repeat: repeat-y; 
    position: absolute; 
    width: 96px; 
    height: 1610px; 
    margin-left: -40px; 
    z-index: 99999; 
} 

EDIT 右のタブには、私はあなたが何ができるかので、あなたのページにjQueryのを使用していることがわかり同じ

.tab-right { 
    background-image: url(images/right.png); 
    position: absolute; 
    width: 96px; 
    height: 1610px; 
    margin-left: 864px; 
    z-index: 99999; 
} 
0

ですjQueryを使用してdiv#ページの高さを見つけ、その値を使用してタブの左と右のクラスの高さを設定します。このよう

:コンテンツがページに追加されたとして

$('div.tab-left').css('height',$('div#page').height());

$('div.tab-right').css('height',$('div#page').height());

はその後、それは、必要に応じて調整します。

関連する問題