2011-11-16 9 views
0

私は、回転バナーの上に座っているnavとlogo divを作成しようとしていました。私はCSSに問題があります。例えばロゴとナビゲーションオーバーローテーションバナー

<div class="logo-div"> 

<div class="logo"> 
<img src="image/logo.jpg"> 
</div> 

<div class="nav"> 
<ul><li>nav-button</li></ul> 
</div> 

</div><!--logo div --> 

<div class="rotator"> 
</div> 

私はNAV-ロゴのdivに回転子を引き上げるために負の上マージンを試みたが、唯一のアップではなくロゴをNAVを持っていること。また、nav-logoとrotatorの順番を入れ替えてみましたが、うまくいきませんでした。

Iがzインデックスと、相対および絶対位置でプレーする必要があるが、私はそれが正しい動作させることはできません推測。

ありがとうございました。

ここでは、この機能でサイトの例です:website

答えて

0

[OK]を、あなたのサンプルリンクはあなたが何をしたいの適切な徴候である場合...重要な問題は、どのような方法であなたが回転して使用しようとしているだろうバナー? javascriptはもちろん(ブラウザ間の互換性が必要な場合)でも...どのような方法ですか? あなたが提供されたリンクから男transitions(高度なCSS3の効果)を使用して...さまざまな背景の一つをそれぞれ有する複数の<li>「は内部の、と

<ul>要素を使用して、absolute positioningleft、彼基本的に水平にどのような場合にはleft

の値を変更し、それらをスクロール、あなたのような何か必要があると思います:

.wrapper {display:block; position:relative;} 
.logo-div {position:absolute; top:0; left:0; z-index:9999;} 
.logo {} 
.nav {} 
.rotator {position:absolute; top:0; left:0; z-index:1;} 

をとhtmlのようなものでなければなりません。

<div class="wrapper"> 

    <div class="rotator"> 
     insert your magic slides of different content or backgrounds here, be in in ul+li format or just divs or whichever method you prefer 
    </div><!-- .rotator --> 

    <div class="logo-div"> 

    <div class="logo"> 
     <img src="image/logo.jpg"> 
    </div> 

    <div class="nav"> 
    <ul> 
     <li>nav-button</li> 
    </ul> 
    </div><!-- .nav --> 

    </div><!--logo div --> 

</div><!-- .wrapper --> 

実際の質問はここでも、コンテンツを循環させるためにどのような方法を使用しますか?彼の方法をコピーしたり、変更したいものがバックグラウンドで、コンテンツがない場合は、単に背景の位置を変更したりできます。

ラッパー要素または親要素にはpositionが必要です。この場合、そのラッパーの 内容、.logo-DIVとと.rotatorが位置必要があります:相対 ナビゲーションバーやロゴの後ろに行くと.rotator div要素のzインデックス必要があるのは:1。プラストップ:0;左:0。例として .rotator divより上にある.logo-divには、z-index:2または9999が必要です。プラストップ:0;左:0。例

としてだから今すべてが、それはと.rotatorの内容は、ページの残りの部分をめちゃくちゃせずに移動することができなければならない場所に留まります。

は/サイクルの方法を選択した背景コンテンツ/画像を移動し、私はあなたに、より具体的な答えを与えます。

希望すると便利です。

関連する問題