10
Tôi có một trình đơn thả xuống xuất hiện phía sau div thư viện chuyển đổi hình ảnh của tôi. Dưới đây là hình ảnh của nó trông như thế nào và HTML và CSS cho nó.Trình đơn thả xuống bị cắt hoặc xuất hiện phía sau div
HTML:
<body>
<div id="top_bar">
<div id="top_inner">
<div id="logo"> <a href="http://www.edosbornephotography.com"><img src="images/logo.gif" alt="Ed Osborne" width="225" height="115" class="logo"></a></div>
<div class="nav">
<ul class = "menu" >
<li> <a href = "#" > Home </a> </li>
<li><a href = "#" > Packages </a>
<li><a href = "#" > Weddings </a>
<li><a href = "#" id="left" > Lifestyle </a>
<ul class = "submenu" >
<li> <a href = "#" > Families </a> </li>
<li> <a href = "#"> Newborn/Child </a> </li>
<li> <a href = "#" > Portraits </a> </li>
</ul>
</li>
<li> <a href = "#" > Blog </a> </li>
<li><a href = "#" id="left"> Abous Us </a>
<ul class = "submenu" >
<li> <a href = "#" > Ed Osborne </a> </li>
<li> <a href = "#" > Testimonials </a> </li>
<li> <a href = "#" > FAQs </a> </li>
</ul>
</li>
<li> <a href = "#" > Contact Us </a> </li>
<li> <a href = "#" > Links </a> </li>
</ul>
</div>
</div>
</div>
<div id="main">
<div id="smart-gallery">
<a href="images/cubagallery-img-1.jpg">
<img src="images/cubagallery-img-1.jpg" /></a>
<a href="images/cubagallery-img-15.jpg">
<img src="images/cubagallery-img-15.jpg" /></a>
<a href="images/cubagallery-img-3.jpg">
<img src="images/cubagallery-img-3.jpg" /></a>
<a href="images/cubagallery-img-4.jpg"></a>
<img src="images/cubagallery-img-4.jpg" /></a>
</div>
</div>
CSS:
.min-gallery
{
width: 927px;
height: 615px;
border: solid 1px black;
background-color: Black;
background: url(../images/bg.jpg);
margin: auto;
margin-left: 232px;
}
.min-gallery .preview
{
width: 852px;
height: 493px;
margin-top: 36px;
margin-left: 36px;
margin-right: 36px;
position: relative;
border: solid 2px black;
overflow: hidden;
background-color: White;
}
.min-gallery .preview img
{
/* width: 795px; height: 525px;*/
position: absolute;
}
.min-gallery .bottom
{
width: 100%;
height: 98px;
color: Gray;
font-family: Arial;
font-size: 1em;
font-weight: bold;
overflow: hidden;
}
#top_bar {
width: 100%;
height: 145px;
background: #000000;
padding-bottom: 20px;
}
#top_inner {
text-align: center;
margin: 0 auto;
width: 1000px;
height: 144px;
}
.nav {
margin: 0 auto;
position: relative;
padding-top: 100px;
}
ul.menu {
list-style: none;
margin: 0;
float: left;
background: #222;
font-size: 1.2em;
background: url(../images/topnav_bg.gif) repeat-x;
}
ul.menu li {
float: left;
margin: 0;
position: relative;
}
ul.menu li a{
padding: 10px 18px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.menu li a#left{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.menu li a:hover {
background: url(../images/topnav_hover.gif) no-repeat center top;
}
ul.menu li span {
width: 11px;
height: 35px;
float: left;
background: url(../images/subnav_btn.gif) no-repeat center top;
}
ul.menu li span.subhover {
background-position: center bottom; cursor: pointer;
}
ul.menu li ul.submenu {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.menu li ul.submenu li{
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.menu li ul.submenu li a {
float: left;
width: 122px;
padding-left: 30px;
text-align: left;
}
Khi tôi loại bỏ position: absolute từ .min-gallery .preview img, trình đơn thả xuống xuất hiện trên đầu trang đó là cách tôi muốn nhưng hình ảnh ngừng thay đổi và chỉ dính vào một hình ảnh.
Có ai sửa chữa nhanh không? Xin lỗi về sự dán của tất cả các mã nhưng tôi không biết làm thế nào khác tôi có thể bày tỏ quan điểm của tôi đến với bạn
Cảm ơn
Bạn có đang đặt chỉ mục z chính xác không? Trình đơn sẽ cần phải có chỉ mục z cao hơn thì thư viện hình ảnh và không có vị trí: tĩnh (mặc định) – Mark