폭 100% 베너가 가운데정렬이 안되요 채택완료

9년 전 조회 4,125

어디에서 다운받은건지 기억은 안나는데요.

폭 100% 베너인데. 가운데 정렬이 안되고 창을 늘리고 줄이면  

내용이 자꾸 좌, 우로 움직입니다.

 

53235005d074483de56185b39b06246d_1482543674_7757.png
쇼핑몰의 폭이 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개

전체 레이아웃의 css 에서

wirth:100%

 그다음 레이아웃의 부분에서

  position:absolute; margin:0 auto;

 

 

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

답변에 대한 댓글 1개

.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;
}
전체와 그다음 부분 이예요.


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번째 내용부터 나오지않고 이상해지네요.

그렇기 때문에 전체부분과 그다음 레이아웃부분은 적용이 잘된거 같고
다른부분에 문제가 있는거 같아요.

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

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

로그인
🐛 버그신고