0

私のサイトには、ナビゲーション バー用の ul (リンク付き) を含むヘッダーがあります。

(下の画像へのリンク - 1)

私のページの 1 つに、画像ギャラリーの ul があります。そのためのテンプレートは次の Web サイトからのものです: http://www.thecssninja.com/demo/futurebox/v3/

画像ギャラリーは、私が望んでいることを実行します。クリックするとページ上に拡大画像が開き (オーバーレイ)、拡大画像は中央に配置され、画面上の任意の場所をクリックすると閉じます。問題は、ul がナビゲーション バーを台無しにすることです。どうすれば修正できますか？ナビゲーション バーには既に ul クラスがあります。

(下の画像へのリンク - 2)

関連する CSS は次のとおりです。

ul li{
display: inline-block;
float: left;
list-style: none;
margin:0.3em;
border:0.1em solid black;
-webkit-border-radius:0.25em;
-moz-border-radius:0.25em;
border-radius:0.25em;
}
ul li:hover { border:0.1em solid red; }

ul li img, ul li label { 
    display: block; 
    cursor: pointer; 
}

ul li input { display: none; }
ul li input:checked + .overlay { display: table; }

.overlay{
width: 100%;
height: 100%;
position: absolute; 
top: 0; 
left: 0; 
display: none; 
z-index: 999;
background: rgb(0,0,0);
background: rgba(0,0,0,0.7);}

.overlay label
{
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
}
    .overlay img,
    .overlay iframe
    {
        display: inline;
        border:0.25em solid white;
        -webkit-border-radius:0.25em;
        -moz-border-radius:0.25em;
        border-radius:0.25em;
    }

HTMLは次のとおりです。

    <div class="text2col">
        <h2>Photo gallery</h2>

<ul>
    <li>
        <label for="futurebox01"><img src="http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" /></label>
        <input type="radio" id="futurebox01" name="gallery" />
        <div class="overlay">
            <label for="close" title="Close futurebox"><img src="http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg.png" alt="The Css Ninja" width="469" height="500" /></label>
        </div>
    </li>
    <li>
        <label for="futurebox02"><img src="http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" /></label>
        <input type="radio" id="futurebox02" name="gallery" />
        <div class="overlay">
            <label for="close" title="Close futurebox"><img src="http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg2.png" alt="The Css Ninja" width="469" height="500" /></label>
        </div>
    </li>
    <li>
        <label for="futurebox03"><img src="http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" /></label>
        <input type="radio" id="futurebox03" name="gallery" />
        <div class="overlay">
            <label for="close" title="Close futurebox"><img src="http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg3.png" alt="The Css Ninja" width="469" height="500" /></label>
        </div>
    </li>
    <li>
        <label for="futurebox04"><img src="http://www.thecssninja.com/demo/futurebox/gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" /></label>
        <input type="radio" id="futurebox04" name="gallery" />
        <div class="overlay">
            <label for="close" title="Close futurebox"><img src="http://www.thecssninja.com/demo/futurebox/gr_cssninja_lrg4.png" alt="The Css Ninja" width="469" height="500" /></label>
        </div>
    </li>
... (more li's)...
</ul>
<div class="clear">&nbsp;</div>

<input type="radio" id="close" name="gallery" />

ulまた、すべてを変更して、それを Web ページのクラスに追加することにより、画像ギャラリーの ul クラスを追加しようとしましたul.futureboxが、ナビゲーション バーが通常に戻りましたが、オーバーレイ画像 (オーバーレイありますが、画像はページの左上に移動します)。

(下の画像へのリンク - 3)

問題 (私が思うに) は、オーバーレイに隣接する兄弟コネクタがあることです。ul li input:checked + .overlay { display: table; }つまり、画像ギャラリーのクラスを追加した後です。または... まったく別の問題かもしれませんが、よくわかりません。

4

1 に答える 1

0

答えは見つかりませんでしたが、このデモは私がやりたいことをすべて実行します: http://www.thecssninja.com/demo/futurebox/

隣接する兄弟コネクタがないため、これをテンプレートとして使用し、画像ギャラリー用に「futurebox」という ul クラスを配置して、ナビゲーション バーが影響を受けないようにしました。

これの問題を除いて、「戻る」ボタンでクリックしたすべての画像を通過するのに対し、他の画像はそうではありませんでした.

于 2012-04-11T20:41:54.830 に答える