DIV位置不来corrently

我有以下的HTML代码：DIV位置不来corrently

<div style="width: 960px; margin: 0; padding: 0;"> 
    <table border=1 cellPadding=0 cellSpacing=0 width=960> 
    <tr> 
     <td width=720 height=300> 
     <div id="slider1"> 
      <ul id="slider1Content"> 
       <li class="slider1Image"> 
       <a href=""><img src="theImages/1.jpg" alt="1" /></a> 
       <span class="left"><strong>Title text 1</strong><br />Content text...</span> 
       </li> 
       <li class="slider1Image"> 
       <a href=""><img src="theImages/2.jpg" alt="2" /></a> 
       <span class="left"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span> 
       </li> 
       <li class="slider1Image"> 
       <img src="theImages/3.jpg" alt="3" /> 
       <span class="left"><strong>Title text 2</strong><br />Content text...</span> 
       </li> 
       <li class="slider1Image"> 
       <img src="theImages/4.jpg" alt="4" /> 
       <span class="left"><strong>Title text 2</strong><br />Content text...</span> 
       </li> 
       <li class="slider1Image"> 
       <img src="theImages/5.jpg" alt="5" /> 
       <span class="left"><strong>Title text 2</strong><br />Content text...</span> 
       </li> 
       <div class="clear slider1Image"></div> 
      </ul> 
     </div> 
     </td> 
     <td width=240>fghfhg</td> 
    </tr> 
    </table> 
</div>

下面CSS：

#slider1 { 
    width: 720px; /* important to be same as image width */ 
    height: 300px; /* important to be same as image height */ 
    position: relative; /* important */ 
    overflow: hidden; /* important */ 
} 

#slider1Content { 
    width: 720px; /* important to be same as image width or wider */ 
    position: absolute; 
    top: 0; 
    margin-left: 0; 
} 
.slider1Image { 
    float: left; 
    position: relative; 
    display: none; 
} 

.slider1Image span { 
    position: absolute; 
    font: 10px/15px Verdana, Arial, Helvetica, sans-serif; 
    padding: 10px 13px; 
    width: 694px; 
    background-color: #FFFFFF; 
    filter: alpha(opacity=90); 
    -moz-opacity: 0.9; 
    -khtml-opacity: 0.9; 
    opacity: 0.7; 
    color: #000000; 
    display: none; 
} 
.clear { 
    clear: both; 
} 
.slider1Image span strong { 
    font-size: 14px; 
} 
.top { 
    top: 0; 
    left: 0; 
} 
.bottom { 
    bottom: 0; 
    left: 0; 
} 
.left { 
    top: 0; 
    left: 0; 
    width: 125px !important; 
    height: 280px; 
} 
.right { 
    right: 0; 
    bottom: 0; 
    width: 90px !important; 
    height: 290px; 
} 
ul { list-style-type: none;}

我有两个问题：

的图像与缩进来而不是从盒子的开始处开始。
菜单onmouseover在图像下方。

Here's a picture

我怎样才能修复这些错误？

来源

2012-07-14 Jay

你可以创建一个[小提琴]（http://jsfiddle.net/），并张贴链接？ – Lobo 2012-07-14 17:35:55

填充问题无疑是您从“UL”中删除'padding'和'margin'的结果。 'ul {margin：0; padding：0;}'应该解决这个问题。 '后面'代替'滑块顶部'的菜单是'z-indexing'的结果。给'菜单项'一个'z-index'大于'image'的。如果'image'没有'z-index'，那么任何大于1的索引都会导致该元素位于图像顶部。 – Ohgodwhy 2012-07-14 17:42:20

因为它使用不同的脚本和css :( Ohgodwhy，你的答案做了伎俩!!!谢谢。我知道我可以指望这里的人！总是有帮助!!!再次感谢。 One问题我有，你知道为什么每次我刷新页面，我看到整个导航菜单展开，然后迅速消失吗？ – Jay 2012-07-14 17:43:29

将z-index设置为下拉菜单。

http://www.w3.org/wiki/CSS/Properties/z-index

来源

2012-07-14 17:41:53

完成，它的工作很好，谢谢Ohgodwhy和你！:) – Jay 2012-07-14 17:49:42

@Jay欢迎:) – 2012-07-14 17:52:01

也许你也可以帮助我这个？我有一个问题是，你知道为什么每次刷新页面，我看到整个导航菜单展开，然后迅速消失？ – Jay 2012-07-14 17:52:49

DIV位置不来corrently

回答

相关问题