컨테이너의 겹침 요소

-1

나는 웹 사이트를 개발 중이며 내 컨테이너 클래스에 내 슬라이더를 추가 한 곳을 고수했다.컨테이너의 겹침 요소

내 사이드 바에 margin-top을 추가 한 후 내 슬라이드 바가 내 섹션을 겹치고 있습니다. 모든 태그가 margin-top을 얻고 있습니다.

이 문제는 어떻게 해결할 수 있습니까?

<body> 

<nav class="cf"> 
    <ul> 
     <li><a href="#" class="current">Home</a> </li> 
     <li><a href="#">About</a> </li> 
     <li><a href="#">Services</a> </li> 
     <li><a href="#">Porfolio</a> </li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 
<div id="container">

 <div class="info1"> 
       <img src="images/infoicon1.png" alt="icon1"> 
       <h1>Best services</h1><br> 
       <p>We offer you best web solutions for business.</p> 
     </div> 
<div class="info2"> 
       <img src="images/infoicon2.png" alt="icon1"> 
       <h1>Cloud System</h1><br> 
       <p>Be unique !! Get cloud system for your business.</p> 
     </div> 
     <div class="info3"> 
       <img src="images/infoicon3.png" alt="icon1"> 
       <h1>Contact us</h1><br> 
       <p>Start improving your online business.</p> 
     </div>

<div id="s3slider"> 
<ul id="s3sliderContent"> 
    <li class="s3sliderImage"> 
     <img src="wide/6.jpg"> 
     <span>Your text comes here</span> 
    </li> 
    <li class="s3sliderImage"> 
     <img src="wide/2.jpg"> 
     <span>Your text comes here</span> 
    </li> 
    <div class="clear s3sliderImage"></div> 
</ul>

,536,913,632 : 여기

내 HTML 코드입니다 a link : 10

그리고 여기 내 CSS 코드

body { 
    background: #ffffff; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 100%; 
    width: 100%; 
    margin: 0 auto; 
    padding: 0; 

nav { 
    background: #333333; 
    height: 60px; 
    margin-top: 8%; 
    } 
nav ul { 
    list-style: none; 
    padding: 0; 
    margin: 0 auto; 
    position: absolute; 
    left: 30%;} 

nav ul li { 
    float:left; 
    display: inline; 
    font-size: 120%; 
    padding:16px; 
} 
nav ul li a { 
    color: #ffffff; 
    text-decoration: none; 
    display: inline-block;} 

nav a:link, nav a:visited { 
    color: #ffffff; 
    height:60px;} 

#container { 
    position: relative; 
    width: 80%; 
    left: 10%;} 


#mainHeader { 
    margin-top: 1%; 
    display: block;} 

.info1 { 
    position: absolute; 
    background: #0088cc; 
    width: 30%; 
    border-radius: 9px;} 

.info1 img { 
    width: 30%; 
    height: 0 auto; 
    float:left; 
    margin-top: 1%;}`.info1 h1 { 
    float:left; 
    margin-top: 1%; 
    color: #ffffff; 
    margin-left: 8%;` 

.info1 p { 
    float:left; 
    width: 60%; 
    margin: 0; 
    margin-bottom: 1%; 
    padding-left: 3%;} 

#s3slider { 
    width:98%; /* important to be same as image width */ 
    height: 300px; /* important to be same as image height */ 
    position: relative; /* important */ 
    overflow: hidden;} /* important */ 



#s3sliderContent { 
    width: 98%; /* important to be same as image width or wider */ 
    position: absolute; /* important */ 
    top: 0; /* important */ 
margin-left: 0; /* important */` 

    .clear { 
    clear: both;}

예입니다!

출처

2013-04-25 user2317735

.info1이 position: absolute; 및 .info1 h1에 대한보다 효율적으로 사용 display:inline-block; 및 .info1 p보다는 float:left; 때문이다. 여전히 절대 위치에 배치되기를 원한다면 더 나은 해결책을 찾기 위해 Fiddle을 만드십시오.

출처

2013-04-25 00:53:03

매력적이었습니다. 감사합니다. – user2317735

컨테이너의 겹침 요소

답변

관련 문제