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

콘텐츠 클래스와 슬라이더 클래스가 겹치지 만 슬라이더의 콘텐츠가 콘텐츠의 콘텐츠를 밀어 내리고 있습니다. 슬라이더의 ul holder의 크기는 슬라이더의 크기보다 작고 content 태그는 li 태그의 내용이 아니라 content div와 정렬됩니다.

스타일 수정의 경우 빠른 수정을 위해 콘텐츠 상단에 패딩을 적용하거나 슬라이드하려는 그림의 적절한 크기를 ul로 지정할 수 있습니다. 나는이 특정 플러그인에 익숙하지 않아 스크립팅 픽스 (scripting fix)가 있는지 확신 할 수 없다. 초기화 할 때 컨테이너 높이를 지정할 수 있습니다.

Answer 2

이미지가 떠있는 경우 아래에있는 컨테이너를 지워야합니다.

.content { 
clear: both; 
}