集成jQuery Slider搞乱了设计

Question

我在集成ResponsiveSlider的页面时遇到了一些问题，因为每种类型都集成了设计。 div下的上升和隐藏下滑块，文本下降等...实际上的所有页面。

你可以找到一个真人版here

对不起，眼睛出血，我努力学习，但保持我的代码清洁是不是真的我的首要任务：/

HTML：

<div class="container"> 
    <div id="head"> 
     <header> 
     <img src="http://html5hub.com/wp-content/uploads/2013/07/default-share1.png" alt="photo profile"> 
     <ul> 
      <li><h1>Jack Foster</h1></li> 
      <li>7 Beer Street, London</li> 
      <li>Phone : 00000456789</li> 
      <li>contact@youdontknowjack.com</li> 
     </ul> 
     </header> 
     <nav> 
     <ul> 
      <li><a href="#">About me</a></li> 
      <li><a href="#">About me</a></li> 
      <li><a href="#">About me</a></li> 
      <li><a href="#">About me</a></li> 
     </ul> 
     </nav> 
     <!--Problem down here--> 
     <ul class="rslides"> 
      <li><img src="images/1.jpg" alt=""></li> 
      <li><img src="images/2.jpg" alt=""></li> 
      <li><img src="images/3.jpg" alt=""></li> 
     </ul> 
    </div> 
     <div class="content"> 
     <div id="history-back"> 
     <div id="history"> 
     <h2>History & Profile</h2> 
     <p>...</p> 
    </div> 
    </div> 
    <div id="skill"> 
     <h2>Skillset</h2> 
     <p>...</p> 
    </div> 
    <div id="studies-back"> 
    <div id="studies"> 
     <h2>Studies</h2> 
     <p>...</p> 
    </div> 
    </div> 
    <div id="work"> 
     <h2>Work</h2> 
     <p>...</p> 
    </div> 
    <footer> 
     <div> 
     <ul style="list-style: none"> 
      <li><a href="#">About me</a></li> 
      <li><a href="#">About me</a></li> 
      <li><a href="#">About me</a></li> 
      <li><a href="#">About me</a></li> 
     </ul> 
     </div> 
     <div> 
     <ul style="list-style: none"> 
      <li><a href="#">About me</a></li> 
      <li><a href="#">About me</a></li> 
      <li><a href="#">About me</a></li> 
      <li><a href="#">About me</a></li> 
     </ul> 
     </div> 
     <div> 
     <ul style="list-style: none"> 
      <li><a href="#">About me</a></li> 
      <li><a href="#">About me</a></li> 
      <li><a href="#">About me</a></li> 
      <li><a href="#">About me</a></li> 
     </ul> 
     </div> 
     </footer> 
     </div> 
    <script> 
    $(function() { 
    $(".rslides").responsiveSlides(); 
    }); 
</script> 

而蹩脚的CSS我写道：

*{ 
margin:0; 
padding:0; 
} 
.container { 
    width: 960px; 
    margin: 0 auto; 
    margin-left: 15%; 
    margin-right: 15%; 
    background: #ffffff; 
    -moz-box-shadow: 0px 0px 8px #bbbbbb; 
    -webkit-box-shadow: 0px 0px 8px #bbbbbb; 
    box-shadow: 0px 0px 8px #bbbbbb; 
    height: 100% 
} 
body { 
    color: black; 
    background: #eacece; 
    background: url(../images/tilepng.png); 
} 
body h2 { 
    font: ; 
    margin-bottom: 1em; 
} 
header { 
    position: relative; 
} 
header h1 { 
    font-style: ; 
} 
header ul { 
    padding: 3px; 
    float: right; 
    vertical-align: middle; 
    margin-right: 2em; 
    margin-top: 4em; 
} 
header li { 
    display: block; 
} 
nav ul { 
    padding: 10px; 
    background: #F9F9F9; 
    } 
nav li { 
    display: inline; 
    padding: 0px 10px 0px 10px; 
} 
#history-back { 
     min-height: 150px; 
     max-height: 200px; 
     background: url(../images/tilegif.gif); 
     } 
#history { 
     margin: 3em; 
     display: inline-block; 
     } 
#skill { 
     background: #ffffff; 
     margin: 3em 3em 3em 3em; 
} 
#studies-back { 
     min-height: 150px; 
     max-height: 200px; 
     background: url(../images/tilegif.gif); 
} 
#studies { 
     height: 100%; 
     margin: 3em 3em 3em 3em; 
     display: inline-block; 
} 
#work { 
     background-color: #ffffff; 
     margin: 3em; 
     margin-bottom: 3em; 
} 
footer { background: #313131; width: 960px; height: 100%} 
footer div { background: #313131; width:290px; padding: 15px; float:left; text-align: center} 

/* rslides styles */ 
.rslides { 
position: relative; 
list-style: none; 
width: 100%; 
padding: 0; 
margin: 0 0 20px 0; 
} 

.rslides li { 
position: absolute; 
display: none; 
width: 100%; 
left: 0; 
top: 0; 
} 

.rslides li:first-child { 
position: relative; 
display: block; 
float: left; 
} 

.rslides img { 
display: block; 
height: auto; 
float: left; 
width: 100%; 
border: 0; 
} 

远离做得很完美，但它可以完成工作，如果你有任何补充来缓解它的话，可以随意做。

Answer 1

您的内容类和滑块类重叠，但滑块的内容正在推送内容的内容。内容div与内容对齐，而不是li标签中的内容。滑块的ul保持器的尺寸小于滑块内的尺寸。

对于造型修复，您可以将填充应用到内容的顶部以进行快速修复，或者为您尝试滑动的图片提供适当的尺寸。虽然我并不熟悉这个特殊的插件，但我不确定是否有脚本修复。您可能可以在初始化时指定容器高度。

Answer 2

您的图片处于浮动状态，您需要清除它下面的容器。

.content { 
clear: both; 
}