css 질문좀..
본문
안녕하세요 홈페이지 만들다가 막혀서 질문드립니다 ㅠ
홈페이지 총 가로사이즈가 960px 인데요..
중간에 좌우로 슬라이드되는 이미지가 1600px 이에요
근데 이게 백그라운드가 아니라 img로 이미지를 걸어버린거라
브라우저가 작아지면 하단에 스크롤바가 생기면서 오른쪽에 엄청난 여백이 발생되더라구요...
화면이 작아지면 좌우 그림이 사라지는....그런.....해결방법이 없을까요?
슬라이드 css는
#main {width:100%;height:420px;margin:0 auto;}
#rolling {margin:0 auto;padding:0;position:relative;z-index:1}
이렇게 해놓았습니다...
마크업은..
<div id="main">
<ul id="rolling">
<li><img src="images/main_img0.jpg" /></li>
<li><img src="images/main_img1.jpg" /></li>
<li><img src="images/main_img2.jpg" /></li>
</ul>
</div>
20인치 이상 모니터에서 보면 아래그림처럼 정상적으로 나오고요
작은화면으로 보면 아래그림 처럼 됩니다.... 가운데 정렬해도 이렇게 됩니다.
답변 2
이렇게 이미지를 css로 바꿔 보는건 어떠실지..^^
<style type="text/css">
#main {width:100%;height:420px;margin:0 auto;}
#rolling {width:100%; height:420px; margin:0px;padding:0px;position:relative;z-index:1}
#rolling li{margin:0px; padding:0px; width:100%;min-width:960px; height:420px;}
#rolling li.main_img0{background:URL('images/main_img0.jpg') no-repeat top center;}
#rolling li.main_img1{background:URL('images/main_img1.jpg') no-repeat top center;}
#rolling li.main_img2{background:URL('images/main_img2.jpg') no-repeat top center;}
</style>
<div id="main">
<ul id="rolling">
<li class="main_img0"><!-- 첫번째 이미지 --></li>
<li class="main_img1"><!-- 두번째 이미지 --></li>
<li class="main_img2"><!-- 세번째 이미지 --></li>
</ul>
</div>
@media｛｝라는 css 사용하면 해결할수 있어여
답변을 작성하시기 전에 로그인 해주세요.
