我有这个Div幻灯片,让你的div框改成另一个div框。
问题是当我放大或缩小时,或当弹出Chromes消息时,它会询问您是否要翻译网页。我尝试过很多东西,但它仍然会移动:/我认为问题出在CSS上,但正如我所说,我不知道问题出在哪里:(
问题图片:
CSS:
#wrapper {
width:960px;
height: 750px;
margin-top: 30px;
overflow:hidden;
position:absolute;
}
#mask {
width: 500%;
}
.item {
width:20%;
height:100%;
float:left;
}
.content {
width:100%;
height:750px;
margin:0 auto;
margin-top: 20px;
}
.content a{
color:#F00;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-decoration:none; }
.selected {
font-weight:700;
}
.clear {
clear:both;
}
HTML:
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">
<a href="#item1" class="panel"> <img src="Images/testknapp.png" /> </a>
<a href="#item2" class="panel"> <img src="Images/testknapp1.png" /> </a>
<table class="album">
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/voltex.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">toltex - beliel</h2><p class="available">available now on itunes & beatport!</p><table class="toltexitunes"><tr><td class="toltexbuy" width="200"> <a href="#"> <img src="Images/knapp.png" class="toltexitunesbutton" /></a> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/noize.jpg" class="noizepic" /></span> <div class="toltex"><h2 class="noizeh2">noize - nothing special</h2><p class="available">available now on itunes & beatport!</p><table class="noizeitunes" height="30"><tr><td class="noizebuy"> <a href="#"> <img src="Images/knapp.png" class="noizeitunesbutton" /></a> </td><td class="noizebuy"><a href="#"> <img src="Images/knapp_beatport.png" class="noizebeatportbutton" /> </td></tr></table></div></span> </td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/dubwood.jpg" class="dubwood" /></span> <div class="toltex"><h2 class="dubwoodh2">Dubwood - Beatz for streetz</h2><p class="available">available now on itunes & beatport!</p><table class="dubwooditunes"><tr><td class="dubwoodbuy"> <a href="https://itunes.apple.com/us/album/epic-whatever/id653499598?i=653499730&ign-mpt=uo%3D4"> <img src="Images/knapp.png" class="dubwooditunes" /></a> </td><td class="dubwoodbuy"><a href="http://www.beatport.com/release/beatz-for-streetz-ep/1098201"> <img src="Images/knapp_beatport.png" class="dubwoodbeatport" /></a> </td></tr></table>
<td height="130" width="420" class="tdcontent"> <span class="volt"> <img src="Images/buy/metaphix.jpg" class="metaphixpic" /></span> <div class="toltex"><h2 class="metaphixh2">metaphix - facets</h2><p class="available">available now on itunes & beatport!</p><table class="metaphix"><tr><td class="metaphixbuy"> <a href="https://itunes.apple.com/us/album/facets/id649920953?i=649921004&ign-mpt=uo%3D4"> <img src="Images/knapp.png" class="metaphixitunes" /></a> </td><td class="metaphixbuy"><a href="http://www.beatport.com/release/facets/1094445"> <img src="Images/knapp_beatport.png" class="metaphixbeatport" /></a> </td></tr></table></td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/dtsk.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">lök - i'm a dtsk lover</h2><p class="available">available now on itunes & beatport!</p><table class="toltexitunes"><tr><td class="toltexbuy" width="200"> <a href="#"> <img src="Images/knapp.png" class="toltexitunesbutton" /></a> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/strobe.jpg" class="noizepic" /></span> <div class="toltex"><h2 class="noizeh2">toltex - strobe</h2><p class="available">available now on itunes & beatport!</p><table class="noizeitunes" height="30"><tr><td class="noizebuy"> <a href="#"> <img src="Images/knapp.png" class="noizeitunesbutton" /></a> </td><td class="noizebuy"><a href="#"> <img src="Images/knapp_beatport.png" class="noizebeatportbutton" /> </td></tr></table></div></span> </td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/gohard.jpg" class="dubwood" /></span> <div class="toltex"><h2 class="dubwoodh2">Toltex - go hard</h2><p class="available">available now on itunes & beatport!</p></br><table class="dubwooditunes"><tr><td class="dubwoodbuy"> <a href="https://itunes.apple.com/us/album/epic-whatever/id653499598?i=653499730&ign-mpt=uo%3D4"> <img src="Images/knapp.png" class="dubwooditunes" /></a> </td><td class="dubwoodbuy"><a href="http://www.beatport.com/release/beatz-for-streetz-ep/1098201"> <img src="Images/knapp_beatport.png" class="dubwoodbeatport" /></a> </td></tr></table>
<td height="130" width="420" class="tdcontent"> <span class="volt"> <img src="Images/buy/ineedu.jpg" class="metaphixpic" /></span> <div class="toltex"><h2 class="metaphixh2">crypehead - i need u</h2><p class="available">available now on itunes & beatport!</p><table class="metaphix"><tr><td class="metaphixbuy"> <a href="https://itunes.apple.com/us/album/facets/id649920953?i=649921004&ign-mpt=uo%3D4"> <img src="Images/knapp.png" class="metaphixitunes" /></a> </td><td class="metaphixbuy"><a href="http://www.beatport.com/release/facets/1094445"> <img src="Images/knapp_beatport.png" class="metaphixbeatport" /></a> </td></tr></table></td>
</tr>
</table>
</div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div class="content">
<a href="#item1" class="panel"> <img src="Images/testknapp1.png" /></a>
<a href="#item2" class="panel"> <img src="Images/testknapp.png" /> </a>
<table class="album">
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/rewind.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">toltex - rewind</h2><p class="available">available now on itunes & beatport!</p><table class="toltexitunes"><tr><td class="toltexbuy" width="200"> <a href="#"> <img src="Images/knapp.png" class="toltexitunesbutton" /></a> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/killerkraut.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">killerkraut - time to get rollin'</h2><p class="available">available now on itunes & beatport!</p><table class="killerkrauttable"><tr><td class="toltexbuy" width="200"> <a href="#"> <img src="Images/knapp.png" class="toltexitunesbutton" /></a> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/harbinger.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">oskri - harbinger</h2><p class="available">available now on itunes & beatport!</p><table class="toltexitunes"><tr><td class="toltexbuy" width="200"> <a href="#"> <img src="Images/knapp.png" class="toltexitunesbutton" /></a> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/philosophy.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">dubtheraphy - philosophy</h2><p class="available">available now on itunes & beatport!</p><table class="philosophy"><tr><td class="toltexbuy" width="200"> <a href="#"> <img src="Images/knapp.png" class="toltexitunesbutton" /></a> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/philosophy/1118970"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
</tr>
<tr>
<td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/anditgoes.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">crypehead - and it goes (like this)</h2><p class="available">available now on itunes & beatport!</p><table class="philosophy"><tr><td class="toltexbuy" width="200"> <a href="#"> <img src="Images/knapp.png" class="toltexitunesbutton" /></a> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/and-it-goes-like-this/1114352"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
</tr>
</table>
</div>
</div>
</div>
你们中任何人都知道问题是什么吗? :)
答案 0 :(得分:-1)
将#wrapper的位置更改为relative并检查..
如果您需要进一步的帮助,请考虑在JSFiddle.net中添加整个样式和HTML。找到实际错误会更容易。