초보입니다ㅠㅠ html,css 질문입니다 채택완료

블루블랙 7년 전 조회 1,797

아래는 제가 쓴 html 과 css 소스입니다.

<style>

#step2 {
background-color:#7ddcd8;
width:100%;
height:auto;
overflow:hidden;
margin:0 auto;
padding-top: 70px;
}
#step2 .inner {
width:100%;
max-width:900px;
height:auto;
margin:0 auto;
overflow:hidden;
}
#step2 .inner img{
width:100%;
max-width:900px;
height:auto;
margin:0 auto;
overflow:hidden;
}
#step2 .iframe1 {
position:absolute;
left:50%;
top:50%;
margin-left:-390px;
margin-top:150px;
z-index:99;
overflow:hidden;
}

</style>

       <div class="inner">
                 <img src="img/step2.gif" alt="" border="0" />
        </div>
        <div class="iframe1">
                  <iframe width="800" height="550" src="https://youtube.com/embed/vcSONxCtnyA?rel=0;amp;autoplay=1" target="_blank">https://youtube.com/embed/vcSONxCtnyA?rel=0;amp;autoplay=1" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
          </div>
</div>

</body>

#html5 #css3

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

정렬:

채택된 답변

+20 포인트

베원

7년 전

top에 % 속성을 주니 브라우저마다 달라보일수밖에요.

근본적인 해결 방법은 이미지를 상단부, 하단부로 자르는 것입니다. 이 방법이 가장 좋구요.

차선책으로는 top % 속성을 뺴시고, margin-top역시 빼시구요. top에 적절한 픽셀을 넣어서 아래로 보내세요. 개발자 도구에서 하나씩 해보시면서 확인하시면 어느정도 넣어야 하는지 감이 오실겁니다. 이렇게 픽셀로 지정해버리면 브라우저마다 차이가 생기지 않습니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인

초보입니다ㅠㅠ html,css 질문입니다 채택완료

답변 1개

공유하기