폭 100% 베너가 가운데정렬이 안되요 채택완료
어디에서 다운받은건지 기억은 안나는데요.
폭 100% 베너인데. 가운데 정렬이 안되고 창을 늘리고 줄이면
내용이 자꾸 좌, 우로 움직입니다.

쇼핑몰의 폭이 1000px인데 배너 내용이 고정이 안되고 이미지처럼 폭을 벗어납니다.
아래는 css 소스인데요.
어느부분이 잘못되서 이런건가요?
Copy
#da{height:270px;overflow:hidden;}.da-slider{width: 100%; height: 270px; position: absolute; margin: 0px auto; background:#eee; border-bottom: 1px solid #e9e9e9; -webkit-transition: background-position 1s ease-out 0.3s; -moz-transition: background-position 1s ease-out 0.3s; -o-transition: background-position 1s ease-out 0.3s; -ms-transition: background-position 1s ease-out 0.3s; transition: background-position 1s ease-out 0.3s; }.da-slide{width: 1000px;margin: 0px auto; top: 0px; left: 0px; font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; text-align: left; }.da-slide-current{z-index: 100;}.da-slider-fb .da-slide{left: 100%;}.da-slider-fb .da-slide.da-slide-current{left: 0px;}.da-slide h2,.da-slide p,.da-slide .da-link,.da-slide .da-img{ position: absolute; opacity: 0; /*left: 110%;*/}.da-slider-fb .da-slide h2,.da-slider-fb .da-slide p,.da-slider-fb .da-slide .da-link{ left: 10%; opacity: 1;}.da-slider-fb .da-slide .da-img{ left: 60%; opacity: 1;}.da-slide h2{ color: #fff; font-size: 46px; width: 50%; top: 20px; white-space: nowrap; z-index: 10; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); font-family: Malgun Gothic,'맑은 고딕', 'Economica', Arial, sans-serif; font-weight: 700;}.da-slide p{ width: 560px; margin: 0px auto; top: 95px; color: #916c05; font-size: 15px; line-height: 23px; height: 90px; overflow: hidden; /*font-style: italic;*/ font-family:Malgun Gothic,'맑은 고딕' dotum, 돋움, 'Economica', Arial, sans-serif; font-weight: 400;}.da-slide .da-img{ /*=======================이미지 배너============================*/ text-align: center; top: 20px; left: 100px; /*60%*/ border-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}.da-slide .da-link{ top: 210px; /*depends on p height*/ border-radius: 7px; border-bottom:1px solid #bbb; background:#f4f4f4; padding: 4px 9px 4px 9px; font-size: 13px; line-height: 25px; font-family:Malgun Gothic,'맑은 고딕' dotum, 돋움; color: #777; text-align: center;}.da-slide .da-link:hover{background: #fff; color: #444; }/*하단 원버튼*/.da-dots{ width: 100%; position: absolute; text-align: center; left: 0px; bottom: 20px; z-index: 2000; -moz-user-select: none; -webkit-user-select: none;}.da-dots span{ display: inline-block; position: relative; width: 14px; height: 14px; border-radius: 50%; background: #eee; border:2px solid #BD9D44; margin: 3px; cursor: pointer; /* box-shadow: 1px 1px 1px rgba(0,0,0,0.1) inset, 1px 1px 1px rgba(255,255,255,0.1);*/}.da-dots span.da-dots-current:after{ content: ''; width: 14px; height: 14px; position: absolute;background: #BD9D44; top: 0px; left: 0px; border-radius: 50%; /* background: rgb(255,255,255); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); */}.da-arrows{ -moz-user-select: none; -webkit-user-select: none;}.da-arrows span{ position: absolute; top: 35%; /* height: 30px; width: 30px; border-radius: 50%; background: #FF5265; */ cursor: pointer; z-index: 2000; opacity: 0; box-shadow: 1px 1px 1px rgba(0,0,0,0.1) inset, 1px 1px 1px rgba(255,255,255,0.1); -webkit-transition: opacity 0.4s ease-in-out-out 0.2s; -moz-transition: opacity 0.4s ease-in-out-out 0.2s; -o-transition: opacity 0.4s ease-in-out-out 0.2s; -ms-transition: opacity 0.4s ease-in-out-out 0.2s; transition: opacity 0.4s ease-in-out-out 0.2s;}.da-slider:hover .da-arrows span{ opacity: 1;}.da-arrows span:after{ content: ''; position: absolute; width: 60px; height: 60px; top: 5px; left: -30px; /*background: transparent url(../images/arrows.png) no-repeat top left;*/ background: transparent url(../images/btn_new.png) no-repeat top left; border-radius: 50%; /* box-shadow: 1px 1px 2px rgba(0,0,0,0.1);*/}.da-arrows span:hover:after{ box-shadow: 1px 1px 4px rgba(0,0,0,0.3);}.da-arrows span:active:after{ box-shadow: 1px 1px 1px rgba(255,255,255,0.1);}.da-arrows span.da-arrows-next:after{ background-position: top right;}.da-arrows span.da-arrows-prev{ left: 50px;}.da-arrows span.da-arrows-next{ right: 50px;}.da-slide-current h2,.da-slide-current p,.da-slide-current .da-link{ left: 10%; opacity: 1;}.da-slide-current .da-img{ left: 60%; opacity: 1;}
답변 1개
9년 전
전체 레이아웃의 css 에서
wirth:100%
그다음 레이아웃의 부분에서
position:absolute; margin:0 auto;
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
블랙앤화이트
9년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
height: 270px;
position: absolute;
margin: 0px auto;
background:#eee;
border-bottom: 1px solid #e9e9e9;
-webkit-transition: background-position 1s ease-out 0.3s;
-moz-transition: background-position 1s ease-out 0.3s;
-o-transition: background-position 1s ease-out 0.3s;
-ms-transition: background-position 1s ease-out 0.3s;
transition: background-position 1s ease-out 0.3s;
}
.da-slide{width: 1000px;margin: 0px auto;/*그다음 부분*/
top: 0px;
left: 0px;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
text-align: left;
}
전체와 그다음 부분 이예요.
024 .da-slide h2,
025 .da-slide p,
026 .da-slide .da-link,
027 .da-slide .da-img{
028 position: absolute;
029 opacity: 0;
030 /*left: 110%;*/
031 }
028 position: absolute; 이부분을 지우면 1000px틀안에 잘 적용되긴하는데.
모양이 좀 깨지고 2번째 내용부터 나오지않고 이상해지네요.
그렇기 때문에 전체부분과 그다음 레이아웃부분은 적용이 잘된거 같고
다른부분에 문제가 있는거 같아요.