我的網站的導航欄有一個帶有ul(帶鏈接)的標題。爲圖片庫添加ul類,以便頁面上的其他uls不受影響
我的一個網頁有一個圖片庫的UL。這個模板來自於這個網站:http://www.thecssninja.com/demo/futurebox/v3/
圖片庫做我想做的事:點擊時在頁面上打開放大的圖片(覆蓋圖),放大的圖片居中,點擊時關閉屏幕。問題是,ul弄亂我的導航欄。我如何解決這個問題?導航欄已經有一個ul類。
下面是相關的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"> </div>
<input type="radio" id="close" name="gallery" />
我也嘗試添加的UL類的圖片庫,通過改變所有ul
到ul.futurebox
並將其添加到網頁中,並使導航欄恢復正常,但它不再居中覆蓋圖像(覆蓋圖在那裏,但是圖像位於頁面的左上方)。
的問題(我認爲)是,有與覆蓋相鄰的兄弟連接器:ul li input:checked + .overlay { display: table; }
所以添加類的圖片庫後。或者......完全可能是另一個問題,但我不確定。
[1]:http://i.stack.imgur.com/VYU1K.png [2]:http://i.stack.imgur.com/rMi5n.png [3]:http:/ /i.stack.imgur.com/ffDWP.png – lilytko 2012-04-10 22:20:39
你給了CSS,但沒有HTML。這將有助於診斷問題。 – 2012-04-11 13:19:25
在這裏,我們爲基於列表的菜單遵循一個很好的模式:http://preview.moveable.com/JM/ilovelists/ – 2012-04-11 13:22:55