index.php에서 include한 quick메뉴 css가 안읽힙니다 ㅠ

index.php에서 include한 quick메뉴 css가 안읽힙니다 ㅠ

QA

index.php에서 include한 quick메뉴 css가 안읽힙니다 ㅠ

답변 1

본문

 

3076706311_1557364043.3648.png

 

문제 이미지입니다.

 

theme/theme/index.php 에서

<?php
    include_once('./quickmenu.php');
?>    하였습니다

 

지금 css를 읽긴하는데 어딘가에 문제가생긴거같습니다..

서버주소는  http://rlawjdrb01.dothome.co.kr/ 입니다

 

css quick  소스입니다

 /** 퀵메뉴 **/
.quick-menu {
    position: fixed;
    top: 50%;
    left: auto;
    right: 0;
    transform: translateY(-50%);
    width: 300px;
    height: 52%;
}

.quick-menu > .quick-top {
    background: linear-gradient(to right, #d6be8f, #eaddba, #c09364);
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    padding: 20px 30px;
}

.quick-menu > .quick-top > ul > li {
    width: 50%;
    text-align: center;
}

.quick-menu > .quick-top > ul > li > .img-box {
    width: 89px;
}

.quick-menu > .quick-top > ul > li > h1 {
    font-weight: 200;
    font-size: 24px;
    letter-spacing: -2px;
    display: block;
    vertical-align: baseline;
    white-space: nowrap;
}

.quick-menu > .quick-section {
    background-color: #000;
    color: #fff;
    padding: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.quick-menu > .quick-section > form {
    position: relative;
    padding-bottom: 60px;
}

.quick-menu > .quick-section > form > ul:not(:first-child) {
    margin-top: 20px;
}

.quick-menu > .quick-section > form > ul > li:first-child {
    width: 30%
}

.quick-menu > .quick-section > form > ul > li:last-child {
    width: 65%;
}

.quick-menu > .quick-section > form > ul > li > span {
    display: block;
    width: 70px;
    font-weight: 200;
    line-height: 36px;
}

.quick-menu > .quick-section > form > ul > li > input {
    width: 100%;
    background-color: transparent;
    border: 2px solid #fff;
    outline: none;
    color: #fff;
    padding: 10px 0;
    padding-left: 5px;
}

.quick-menu > .quick-section > form > button {
    position: absolute;
    top: auto;
    bottom: 0;
    width: 250px;
    height: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, #d6be8f, #eaddba, #c09364);
    border: none;
    cursor: pointer;
    height: auto;
    padding: 10px 0;
    border-radius: 50px;
    outline: none;
}

.quick-menu > .quick-section > form > button > span {
    line-height: 0;
    font-size: 18px;
    display: block;
    padding: 10px 0;
    letter-spacing: -1px;
    font-weight: 600;
}

.quick-menu > .call {
    width: 80%;
    text-align: center;
    background: linear-gradient(to right, #d6be8f, #eaddba, #c09364);
    border: none;
    height: 50px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 70px;
    border-radius: 50px;
    margin-top: 10px;
    cursor: pointer;
    outline: none;
}

.quick-menu > .call > span {
    display: block;
    font-weight: 300;
    letter-spacing: -1px;
    font-size: 12px;

}

.quick-menu > .call > span:last-child {
    font-family: tmon;
    font-size: 30px;
}

.quick-menu > .kakao {
    width: 200px;
    position: absolute;
    left: auto;
    right: 0;
    bottom: 19%;
}

.quick-menu > .kakao > span {
    position: absolute;
    left: auto;
    background-color: white;
    padding: 17.5px 35px;
    width: 100px;
    right: 10px;
    top: 0px;
    border-radius: 50px;
    z-index: 0;
    cursor: pointer;
    padding-left: 20px;
    font-weight: 600
}

.quick-menu > .kakao > .circle {
    width: 31px;
    background: linear-gradient(to right, #d6be8f, #eaddba, #c09364);
    border-radius: 50%;
    padding: 15px;
    position: absolute;
    right: 0;
    cursor: pointer;
}

.quick-menu > .kakao > .circle > .img-box {
    width: 31px;
}

.quick-menu > .quick-bottom {
    margin-top: 160px;
}

.quick-menu > .quick-bottom > span {
    display: block;
    text-align: right;
    font-size: 12px;
    cursor: pointer;
    color: #b29977;

이 질문에 댓글 쓰기 :

답변 1

http://rlawjdrb01.dothome.co.kr/theme/st-basic/css/index.css

위 css는 정상적으로 불러와지고 있습니다.

원하시는 모양이 정확히 뭔지 모르겠지만 아래 4가지 CSS를 수정해보세요.

 


.quick-menu > .kakao{position:relative;display:inline-block;width:200px;margin-top:100px;}
.quick-menu > .kakao > span {position:absolute;left:auto;background-color:white;padding:11px 35px;width:100px;right:10px;height:60px;top:0px;border-radius:50px;z-index:0;cursor:pointer;padding-left:20px;font-weight:600;}
.quick-menu > .kakao > .circle {background:linear-gradient(to right, #d6be8f, #eaddba, #c09364);border-radius:50%;padding:15px;position:absolute;right:-20px;cursor:pointer;}
.quick-menu > .quick-bottom {margin-top:70px;}
.quick-menu > .quick-bottom > span {display:block;text-align:center;font-size:12px;cursor:pointer;color:#b29977;}
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 1,284
© SIRSOFT
현재 페이지 제일 처음으로