오버 플로우가 CSS에서 오는 곳을 찾을 수 없습니다.

Question

안녕하세요. 멋진 CSS 친구입니다! 그래서, 오늘 찾을 수없는 일종의 오버 플로우 문제에서 슬라이드 쇼가 나타나지 않는 문제가 있습니다. 나는 그것이 "눈에 보이는"것으로 바꿀 때 슬라이드 쇼가 나타나기 때문에 오버 플로우라는 것을 알지만 컨텐츠 배경은 사라지고 왜 이런 일이 일어나는지 알 수 없습니다. 이 사이트와 비슷한 문제를 찾으려는 다른 사람들에 대한 광범위한 연구를 해왔지만 비슷한 것을 찾을 수 없습니다.

:

#body { 
background:none #000; 
margin-top:21px!important; 
} 
#body.home { 
border:1px solid #4f4f4f; 
margin:0 auto; 
width:1100px; 
} 
#body.home div:first-child { 
overflow:hidden; 
} 
#body.home div:first-child div:first-child { 
border-bottom:0px solid #4f4f4f; 
border-right:1px solid #4f4f4f; 
float:left; 
padding:0 0 13px; 
width:510px; 
} 
#body.home div:first-child div:first-child h2 { 
margin:13px 0 0 20px; 
} 
#body.home div:first-child div:first-child h2 a { 
color:#fff; 
font-family:oswaldregular; 
font-size:18px; 
font-style:normal; 
font-weight:400; 
line-height:18px; 
margin:0; 
text-decoration:none; 
text-transform:uppercase; 
} 
#body.home div:first-child div:first-child p { 
color:#a5a5a5; 
font-size:14px; 
line-height:18px; 
margin:16px 0; 
padding:0 30px 0 20px; 
} 
#body.home div:first-child div:first-child p a { 
color:#a5a5a5; 
font-style:normal; 
margin:0; 
text-decoration:underline; 
} 
#body.home div:first-child div:first-child a { 
color:#af0000; 
font-size:14px; 
font-style:italic; 
line-height:18px; 
margin:0 0 0 20px; 
text-decoration:none; 
} 
#body.home div:first-child div:first-child a:hover { 
color:#ff0000; 
text-decoration:none!important; 
} 
#body.home div:first-child ul { 
border-bottom:1px solid #4f4f4f; 
list-style:none; 
margin:0; 
overflow:hidden; 
padding:0; 
} 
#body.home div:first-child ul li:first-child { 
border:none; 
} 
#body.home div:first-child ul li { 
border-left:1px solid #4f4f4f; 
float:left; 
width:auto; 
} 
#body.home div:first-child ul li h3 { 
margin:23px 0 5px 20px; 
} 
#body.home div:first-child ul li span { 
color:#a5a5a5; 
display:block; 
font-size:14px; 
line-height:18px; 
margin:1px 0 24px 20px; 
} 
#body.home div:first-child ul li a img { 
border-top:1px solid #4f4f4f; 
} 
#body.home div { 
border-bottom:none; 
overflow:hidden; 
} 
#body.home div div:first-child { 
border-bottom:none; 
border-right:0px solid #4f4f4f; 
float:left; 
width:510px; 
} 
#body.home div div:first-child ul { 
border-bottom:none; 
} 
#body.home div div:first-child ul li:first-child { 
width:238px; 
} 
#body.home div div:first-child ul li { 
border-right:1px solid #4f4f4f; 

padding:0; 
width:239px; 
} 
#body.home div div:first-child ul li a { 
display:block; 
float:none; 
} 
#body.home div div:first-child ul li a img { 
border-bottom:1px solid #4f4f4f; 
} 
#body.home div div:first-child ul li h4 { 
margin:9px 30px 0 20px; 
} 
#body.home div div:first-child ul li h4 { 
color:#fff; 
float:none; 
font-size:14px; 
font-style:normal; 
font-weight:700; 
line-height:18px; 
text-decoration:none; 
} 
#body.home div div:first-child ul li p { 
color:#a5a5a5; 
font-size:14px; 
line-height:18px; 
margin:1px 30px 0 20px; 
} 
#body.home div div:first-child ul li p a { 
color:#a5a5a5; 
display:inline; 
float:none; 
font-style:normal; 
margin:0; 
text-decoration:underline; 
} 
#body.home div div { 
float:left; 
width:510px; 
} 
#body.home div div h3 a { 
color:#FFF; 
font-family:oswaldregular; 
font-size:18px; 
font-style:normal; 
font-weight:400; 
line-height:18px; 
text-decoration:none; 
text-transform:uppercase; 
} 
#body.home div div ul { 
list-style:none; 
margin:0; 
padding:0; 
} 
#body.home div div ul li { 
border-top:1px solid #4f4f4f; 
overflow:hidden; 
} 
#body.home div div ul li a { 
display:block; 
float:left; 
margin:0 20px 0 0; 
} 
#body.home div div ul li a img { 
border-right:0px solid #4f4f4f; 
} 
#body.home div div ul li div { 
width:298px; 
} 
#body.home div div ul li div span { 
color:#a5a5a5; 
display:block; 
font-size:11px; 
line-height:18px; 
margin:11px 0 0; 
} 
#body.home div div ul li div h4 { 
color:#fff; 
float:none; 
font-size:14px; 
line-height:16px; 
text-decoration:none; 
} 
#body.home div div ul li div p { 
color:#a5a5a5; 
font-size:14px; 
line-height:18px; 
margin:2px 0 0; 
} 
#body.home div div ul li div p a { 
color:#a5a5a5; 
display:inline; 
float:none; 
margin:0; 
text-decoration:underline; 
} 
#body.home div div ul li div p a.more { 
color:#AF0000; 
display:inline; 
float:none; 
font-size:14px; 
font-style:italic; 
line-height:18px; 
text-decoration:none; 
} 
#body.home div div ul li div p a.more:hover { 
color:#ff0000!important; 
text-decoration:none!important; 
} 

내가 함께 일하고 오버 플로우를 제어하는 ​​코드는 세 번째 다운 : 콘텐츠에 대한

CSS : 여기

는 조금 더 상황을 설명하는 코드

#body.home div:first-child { 
overflow:hidden; 
} 

표시를 변경할 때 변경하는 유일한 것입니다.

그리고 여기에 슬라이드 쇼를위한 CSS입니다 :

<div id="body" class="home"> 
    <div> 
     <div><br><br> 
      <h2><a href="index.html">Welcome to our site!</a </h2> 
      <p> 
       Text. Text. Text. Text. 
      </p> 
      <a href="services.html">Read More</a>   </div> 

      <div id="slider"> 
       <div class="viewer"> 
        <div class="reel"> 

          <div class="slide"><img src="/images/img1.jpg" width="500" height="500" align="center" title="" /></div> 
          <div class="slide"><img src="/images/img2.jpg" width="500" height="500" align="center" title="" /></div> 
          <div class="slide"><img src="/images/img3.jpg" width="500" height="500" align="center" title="" /></div> 
          <div class="slide"><img src="/images/img4.jpg" width="500" height="500" align="center" title="" /></div> 
          <div class="slide"><img src="/images/img5.jpg" width="500" height="500" align="center" title="" /></div> 
          <div class="slide"><img src="/images/img6.jpg" width="500" height="500" align="center" title="" /></div> 
          <div class="slide"><img src="/images/img7.jpg" width="500" height="500" align="center" title=" " /></div> 
          <div class="slide"><img src="/images/img8.jpg" width="500" height="500" align="center" title="" /></div> 
          <div class="slide"><img src="/images/img9.jpg" width="500" height="500" align="center" title="" /></div> 


        </div> 
       </div> 
      </div> 
    </div> 

</div> 
      <script type="text/javascript"> 
      $('#slider').slidertron({ 
       viewerSelector: '.viewer', 
       reelSelector: '.viewer .reel', 
       slidesSelector: '.viewer .reel .slide', 
       advanceDelay: 6000, 
       speed: 'slow' 
      }); 
     </script> 

온 언제 어디서나 오버 플로우가 될 것 위치를 볼 수 있다면 마지막으로

#slider { 
position: relative; 
width: 500px; 
margin: 0px auto 0px auto; 
} 

#slider .viewer { 
width: 500px; 
height: 500px; 
overflow: hidden; 
margin: 0 auto; 
} 

#slider .viewer .reel { 
display: none; 
height: 500px; 
} 

#slider .viewer .reel .slide { 
position: relative; 
width: 500px; 
height: 500px; 
} 

, 여기에 내용에 대한 HTML은 슬라이드 쇼, 나에게 알려주시겠습니까? 왜냐하면 나는 지금이 코드를 며칠 동안보고 있었으므로 어느 곳에서 오버플로가 있을지 알 수 없습니다. 아!

시간과 도움을 미리 보내 주셔서 감사합니다.

Answer 1

I FIXED IT! div div가 왼쪽으로 떠 다니므로 float을 'none'으로 변경하려고 시도했습니다. 그리고 거기에 우리가 있습니다. 배경은 모든 것의 바로 뒤에 나타났습니다. 슬라이드 쇼가 나타나기 위해서는 오버플로를 눈으로보아야하지만 배경과 슬라이드 쇼를 사용하는 한 마음에 들지 않습니다. 정적 인 페이지이므로이 문제는 예상하지 않습니다. 나는 그들이 제안한 시간과 제안에 대해 모두에게 감사 드린다. 주말 동안 즐거운 시간을 보내십시오!