폭 100% 베너가 가운데정렬이 안되요

폭 100% 베너가 가운데정렬이 안되요

QA

폭 100% 베너가 가운데정렬이 안되요

본문

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

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

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

 

53235005d074483de56185b39b06246d_1482543674_7757.png
쇼핑몰의 폭이 1000px인데 배너 내용이 고정이 안되고 이미지처럼 폭을 벗어납니다.
아래는 css 소스인데요.

어느부분이 잘못되서 이런건가요?

 

 
#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;

 

 

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

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

답변을 작성하시기 전에 로그인 해주세요.
전체 112
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT