使用jquery图像旋转器无法正确堆叠图像

时间：2013-05-01 20:22:26

标签： jquery html css image

我有一个我似乎无法摆脱的问题。

我有一个ebay列表，其中图像似乎没有正确堆叠。

经过无数个小时的游戏，我似乎无法解决这个问题，它真的很奇怪，到目前为止唯一有这个问题的列表，呈现mozilla，firefox和chrome（没有IE，但会猜测它在那里打破了。）

我知道问题不是基于ebay的，因为它在加载到网页时存在于Dreamweaver中。

此处是显示图片问题的列表的链接：

http://www.ebay.co.uk/itm/230969199881?var=&ssPageName=STRK:MESELX:IT&_trksid=p3984.m1555.l2649

在此先感谢，所有人都非常感谢。

这是css和html：

   <style type="text/css">
@charset "utf-8";
body {
font:100%/1.4;
color:#000;
margin:0;
padding:0;
font-family: Sans-Serif, 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
ul,ol,dl {
margin:0;
padding:0;
}
h3,h6,p {
margin-top:0;
}
h1 {
font-size:80%;
display:inline;
color:#000;
margin:0;
}
h1,h2,h3,h6,h5 {
font-weight:100;
}
h2,h3,h6,h5{
color:#666;
}
h2 {
font-weight:bold;
color:#36b3fa;
fontfamily: Sans-Serif;
margin:0px;
}
h3 {
font-size:200%;
display:inline;
}
h4 {
font-size:90%;
color:#333;
font-weight:100;
margin-top:10px;
margin-bottom:0px;
}
h5 {
color:#666;
font-size:100%;
margin-top: 0px;
margin-bottom: 5px;
line-height: 5px;
}
p {
margin:0;
}
h6 {
font-size:100%;
}
#list {
margin-top:0;
margin-left:40px;
line-height: 15px;
}
.container {
background:#FFF;
overflow:none;
width: 1100px;
clear:left;
margin:0 auto;
}
.imagecontainer {
float:left;
width:550px;
margin-left:20px;
}
.header-logo {
width: 1100px;
height: auto;
}
.footer-logo {
width:200px;
float:right;
}
.copy {
background-color: transparent;
border: none;
width: 50%;
margin: 30 auto;
} 
.clear {
clear:both;
}
a:hover,a:active,a:focus {
text-decoration:none;
color:#333;
}
.deliverydetails,.paymentdetails,.productdescription,.feedback,.aboutus,.termsandconditions {
width:380px;
height:auto;
background-color:#f7f7f7;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
padding:15px 30px 30px 30px;
border:2px solid #666;
margin-left: 0px;
margin-top: 30px;
}
#footer {
float:left;
width:1100px;
font-family:arial;
font-size:13px;
clear:left;
background-color:#36b3fa; 
background-repeat:no-repeat; 
height:58px;
margin-top: 30px;
}
#footer .footerText {
float:left;
width:420px;
color:white;
margin-top:16px;
margin-left:10px;
}
#footer .footerText a {
color:white;
text-decoration:none;
}
#footer .footerText a:hover {
color:white;
text-decoration:underline;
}
.rightbox {
float:right;
width:444px;
margin-left:80px;
}
#wrapper {
width: 600px;
}
#wrapper .images {
padding:20px 0px;
text-align:center;
}
#productImages .tab {
float:left;
width:355px;
border:none;
}
#productImages-nav {
margin: 0px 0px 0px 363px; 
padding:0px;
}
#productImages-nav li {
float:left;
list-style:none;
padding:0;
margin: 0px 0px 10px 10px;
}
#productImages-nav li img {
border:1px solid #ccc;
margin:0;
opacity:0.5;
}
#productImages-nav li img:hover {
border: 1px solid #333;
opacity:0.9;
}
#productImages-nav a.active img {
opacity:0.9;
border:1px solid #36b3fa;
}
#preview {
background:#FFF;
border:1px solid #36b3fa;
padding:5px;
position:absolute;
z-index:999;
margin-top:-25px;
display:none;
-moz-border-radius:5px;
-moz-box-shadow: 5px 5px 12px #666;
}
#preview img {
width:400px;
}



 <div class="imagecontainer">

<script type="text/javascript">
<!--
var az = "SC";var bz = "RI";var cz = "PT";var dz = "SR";var ez = "C=";var fz = "htt";var gz = "p://";
var hz = ".co.uk";
var fz0 = "sweetvision"+hz+"/js/jquery-1.4.2.min.js";
document.write ("<"+az+bz+cz+" type='text/javascript'"+dz+ez+fz+gz+fz0+">");
document.write("</"+az+bz+cz+">");
-->
</script>    
 <script type="text/javascript">
<!--
var az = "SC";var bz = "RI";var cz = "PT";var dz = "SR";var ez = "C=";var fz = "htt";var gz = "p://";
var hz = ".co.uk";
var fz0 = "sweetvision"+hz+"/js/yetii-min.js";
document.write ("<"+az+bz+cz+" type='text/javascript'"+dz+ez+fz+gz+fz0+">");
document.write("</"+az+bz+cz+">");
-->
</script>    
<script type="text/javascript">
<!--
var az = "SC";var bz = "RI";var cz = "PT";var dz = "SR";var ez = "C=";var fz = "htt";var gz = "p://";
var hz = ".co.uk";
var fz0 = "sweetvision"+hz+"/js/zoomer.js";
document.write ("<"+az+bz+cz+" type='text/javascript'"+dz+ez+fz+gz+fz0+">");
document.write("</"+az+bz+cz+">");
-->
</script>  
<div id="wrapper">
<div class="images">
<div id="productImages">
<div id="image1" class="tab" style="display:block">
<a class="preview" name="http://sweetvision.co.uk/ebayimages/MWT/worktrousers.jpg">
<img src="http://sweetvision.co.uk/ebayimages/MWT/worktrousers.jpg" width="250" height=""/>
</a>
</div>
<div id="image2" class="tab" style="display:none">
<a class="preview" name="http://sweetvision.co.uk/ebayimages/MWT/worktrousers2.jpg">
<img src="http://sweetvision.co.uk/ebayimages/MWT/worktrousers2.jpg" width="250" height=""/>
</a>
</div>
<div id="image3" class="tab" style="display:none">
<a class="preview" name="http://sweetvision.co.uk/ebayimages/MWT/worktrousers3.jpg">
<img src="http://sweetvision.co.uk/ebayimages/MWT/worktrousers3.jpg" width="250" height=""/>
</a>
</div>
<div id="image4" class="tab" style="display:none">
<a class="preview" name="http://sweetvision.co.uk/ebayimages/MWT/worktrousers4.jpg">
<img src="http://sweetvision.co.uk/ebayimages/MWT/worktrousers4.jpg" width="250" height=""/>
</a>
</div>
<!---smaller images---->
<ul id="productImages-nav">
<li>
<a href="#image1">
<img src="http://sweetvision.co.uk/ebayimages/MWT/worktrousers.jpg" width="100" height="" alt="jacket"/>
</a>
</li>
<li>
<a href="#image2">
<img src="http://sweetvision.co.uk/ebayimages/MWT/worktrousers2.jpg" width="100" height="" alt="jacket"/>
</a>
</li>
<li>
<a href="#image3">
<img src="http://sweetvision.co.uk/ebayimages/MWT/worktrousers3.jpg" width="100" height="" alt="jacket"/>
</a>
</li>
<li>
<a href="#image4">
<img src="http://sweetvision.co.uk/ebayimages/MWT/worktrousers4.jpg" width="100" height="" alt="jacket"/>
</a>
</li>
</ul>
<script type="text/javascript">
                    var tabber1 = new Yetii({
                    id: 'productImages',
interval:5
                    });
                    </script>

</div> <!--end productImages --->
</div> <!--- end .imgaes --->
</div> <!---end wrapper div --->       






    </div> <!---end imagecontainer---->

1 个答案:

答案 0 :(得分：0)

如果你给你的productImages-nav ul一个固定宽度，例如150px，然后将li里面的li浮动到右边，它们都将正确对齐。

不确定这是否是最佳方式，但它可以解决问题。 

#productImages-nav {
  margin: 0px 0px 0px 363px; 
  padding:0px;
  width:150px;
}
#productImages-nav li {
  float:right;
  list-style:none;
  padding:0;
  margin: 0px 0px 10px 10px;
}
相关问题
最新问题