묻고답하기
레이아웃 수정 좀 봐주세요
2017.08.21 10:31
안녕하세요 초보입니다 ㅠㅠ
(1)기본 레이아웃으로 조금씩 작업하고 있는데 아래 그림처럼
상단 부분 밑에 나오는 게시판이나 텍스트 구간 바깥쪽에 선을 넣고 싶은데
아무리 찾아봐도 힘드네요, 조언해주실분 있으면 댓글 부탁드립니다.
@charset "utf-8";
/* Reset */
html,body{min-height:100%}
body{margin:0}
/* Skin to content */
.skip{margin:0}
.skip>a{display:block;text-align:center;line-height:28px;height:1px;overflow:hidden}
.skip>a:focus{height:auto}
/* Layout */
.container,
.footer>p{width:73%;margin:0 auto}
.header{position:relative;z-index:2;zoom:1;margin:0 0 17px 0}
.header>.side{position:absolute;z-index:2;right:0;bottom:57px;zoom:1}
.visual{position:relative;z-index:1;overflow:hidden;width:100%;margin:0 0 20px 0}
.body{position:relative;z-index:1}
.header:after,
.body:after{content:"";display:block;clear:both}
.content{padding:0 0 40px 0;zoom:1}
.content>*:first-child{margin-top:0}
.content img{max-width:100%;height:auto}
/* Header */
.header>h1{display:inline-block;*display:inline;zoom:1;margin:19px 0}
.header>h1>a,
.header>h1 img{display:block}
.header>h1>a{font-size:32px;text-decoration:none;color:#333}
/* Footer */
.footer{padding:25px 0 80px 0;background:#464D5C;border-top:1px solid #ffffff;color:#b7b7b7}
.footer p{font-size:12px}
.footer a{text-decoration:none;color:#666}
.footer a:hover,
.footer a:focus{text-decoration:underline}
/* Login */
.account{margin-right:15px !important}
/* Search */
.header .search{display:inline-block;*display:inline;zoom:1;vertical-align:top;margin:0}
.header .search>input{font-size:12px;vertical-align:top;border-radius:2px}
.header .search>input[type="text"]{background:#e5e6e8;border:1px solid #dedede;height:21px;line-height:21px;padding:0 4px;margin:0 -6px 0 0;width:126px}
.header .search>input[type="submit"]{background:#484d51;border:1px solid #272b30;color:#fff;height:23px;line-height:23px;padding:0 15px;margin:0;cursor:pointer;box-shadow:0 1px 0 #6d7174 inset}
/* GNB */
.gnb{position:relative;z-index:1;border:1px solid #080808;font-size:13px;height:31px;clear:both;background-color:#080808;background:-webkit-linear-gradient(top, #2e2d32, #0c0c0e);background:-moz-linear-gradient(top, #2e2d32, #0c0c0e);background:-o-linear-gradient(top, #2e2d32, #0c0c0e);background:-ms-linear-gradient(top, #2e2d32, #0c0c0e);background:linear-gradient(top, #2e2d32, #0c0c0e);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#2e2d32, endColorStr=#0c0c0e)}
.gnb:before{content:"";display:block;background:#3e3e40;width:100%;height:1px}
.gnb ul{margin:0;padding:0;list-style:none}
.gnb a{text-decoration:none;white-space:nowrap}
.gnb>ul{position:absolute;top:32px;left:-1px;right:-1px;background:#464d5d;opacity:.98;filter:alpha(opacity=98);height:0}
.gnb.open>ul{height:auto;border-bottom:1px solid #333}
.gnb>ul:after{content:"";display:block;clear:both}
.gnb>ul>li{position:relative;top:-32px;float:left;margin:0 -1px -8px 0}
.gnb>ul>li>a{display:block;border-left:1px solid #3e3e40;border-right:1px solid #3e3e40;line-height:32px;padding:0 20px;color:#fff;position:relative}
.gnb>ul>li>a:after{content:"";position:absolute;width:1px;height:100%;right:0;top:0;background:#080808;overflow:hidden}
.gnb>ul>li.active>a,
.gnb>ul>li.hover>a{border-top:1px solid #4a505c;line-height:30px;padding-bottom:1px;background-color:#2f333b;background:-webkit-linear-gradient(top, #383c45, #0c0d0f);background:-moz-linear-gradient(top, #383c45, #0c0d0f);background:-o-linear-gradient(top, #383c45, #0c0d0f);background:-ms-linear-gradient(top, #383c45, #0c0d0f);background:linear-gradient(top, #383c45, #0c0d0f);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#383c45, endColorStr=#0c0d0f)}
.gnb ul ul{display:block;position:relative;z-index:2;padding:0 20px;margin:0 0 0 -1px;border-left:1px solid #424856;height:0;overflow:hidden}
.gnb.open ul ul{margin-top:6px}
.gnb ul ul:before{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:#4b5265}
.gnb.open ul ul{padding:13px 20px;height:auto}
.gnb>ul>li:first-child>ul{border:0}
.gnb>ul>li:first-child>ul:before{content:normal}
.gnb ul ul a{display:block;line-height:20px;font-size:12px;color:#fff}
.gnb ul ul a:hover,
.gnb ul ul a:focus{text-decoration:underline}
/* Visial */
.visual>.list{position:relative;width:300%;left:-100%;z-index:1}
.visual>.list:after{content:"";display:block;clear:both}
.visual>.list.total1{width:auto;left:0}
.visual img{display:block;max-width:100%;height:auto;margin:0 auto}
.visual a{display:block;float:left;position:relative;color:#fff;text-decoration:none;font-family:Corbel,Arial,Helvetica,sans-serif}
.visual a[href=""]{cursor:default}
.visual .total1 a{float:none}
.visual .total2 a,
.visual .total3 a{width:33.33%;}
.visual a>p{margin:-24px 0 0 0;padding:0 100px;position:absolute;top:50%;left:0;right:0;text-align:center;font-size:47px;letter-spacing:-1px;line-height:1}
.visual.sub a>p{font-size:32px;text-align:left}
.visual>button{zoom:1;border:0;background:url(blank.gif);cursor:pointer;width:100px;position:absolute;z-index:2;top:0;bottom:0;margin:0;padding:0;color:#fff}
.visual>button:hover,
.visual>button:focus{background-color:rgba(0,0,0,.25)}
.visual>button>i{position:absolute;top:50%;left:50%;width:25px;height:50px;background:url(slideNav.png) no-repeat;margin:-25px 0 0 -12px;zoom:1}
.visual>.prev{left:0}
.visual>.next{right:0}
.visual>.prev>i{background-position:0 0}
.visual>.next>i{background-position:-25px 0}
/* LNB */
.body.sub .lnb{float:left;width:210px;margin:0 0 40px 0}
.body.sub .content{float:right;width:720px}
.body.sub .lnb>h1{margin:0;position:relative;z-index:2}
.body.sub .lnb>h1>a{display:block;line-height:36px;padding:0 18px;border-radius:3px;color:#fff;text-decoration:none;font-size:14px;border:1px solid #939395;background-color:#19191b;background:-webkit-linear-gradient(top, #2d2c31, #0c0c0e 80%, #131418 80%);background:-moz-linear-gradient(top, #2d2c31, #0c0c0e 80%, #131418 80%);background:-o-linear-gradient(top, #2d2c31, #0c0c0e 80%, #131418 80%);background:-ms-linear-gradient(top, #2d2c31, #0c0c0e 80%, #131418 80%);background:linear-gradient(top, #2d2c31, #0c0c0e 80%, #131418 80%);zoom:1}
.body.sub .lnb ul{list-style:none;margin:0;padding:0}
.body.sub .lnb ul a{display:block;text-decoration:none;color:#333;font-size:13px}
.body.sub .lnb>ul{position:relative;z-index:1;border:1px solid #dcdcdc;padding:1px;margin:-1px 0 0 0;border-radius:3px}
.body.sub .lnb>ul>li>a{line-height:36px;padding:0 10px 0 18px;border-top:1px solid #eee}
.body.sub .lnb>ul>li.active>a,
.body.sub .lnb>ul>li>a:hover,
.body.sub .lnb>ul>li>a:focus{background:#f5f5f5;color:#3192d7}
.body.sub .lnb>ul>li:first-child>a{border-top:0}
.body.sub .lnb ul ul{padding:10px 0;border-top:1px solid #eee}
.body.sub .lnb li li>a{line-height:20px;padding:0 10px 0 25px}
.body.sub .lnb li li.active>a,
.body.sub .lnb li li>a:hover,
.body.sub .lnb li li>a:focus{background:#f5f5f5;color:#3192d7}
(2)파일첨부를 하면 원래 자동으로 올라갔는데
호스팅 이전후 따로 하나씩 삽입을 해야 본문에 올라가는데
이게 스킨문제인지 아니면 설정이나 서버문제인지 통 알수가 없는데 조언좀 주세요
- [2023/08/23] 묻고답하기 쇼핑몰 기능
- [2021/07/20] 묻고답하기 사이트맵에서 클릭시 새창열기로 가능한가요? *2
- [2020/12/16] 묻고답하기 footer 하단에 고정하려면 어딜 수정해야 할까요?
- [2019/10/10] 묻고답하기 cafe24 XE3 STEP 3 단계에서 에러가 발생합니다. *3
- [2019/05/14] 묻고답하기 배경색을 이미지로 바꾸고 싶어요 *2
댓글 2
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
홍찬 | css에서 top에 화면 창 가운데라는 값 넣기 [1] | 2016.02.20 by XESTUDIO |
캣대디 | 실시간 새글 알림 애드온 특정게시판만 알림오게하려고 합니다. [5] | 2016.04.18 by 꽃민 |
꽃민 | 관리자만 알림 뜨려면... [2] | 2016.04.19 by 꽃민 |
꽃민 | 새글 알림 도와주세요..ㅠㅠ [2] | 2016.04.19 by 꽃민 |
happy19 | 휴... 배경색 설정만 했을뿐인데, 사이트가 날라갔어요. [1] | 2016.04.22 by YJSoft |
kjmedi626 | 관리자주소를 모르겠습니다...ㅠㅠ [4] | 2016.05.27 by kjmedi626 |
흑사탕 | footer 고정 [8] | 2016.06.14 by 흑사탕 |
kara**** | 스마트폰에서 스크롤 탑버튼 고정에 관하여 질문해요. [2] | 2016.07.06 by kara**** |
마이미2 | 2차 메뉴를 가로로 나타나게 하려고 합니다. [2] | 2016.07.15 by 마이미2 |
94blossom | 검색부분을 가운데로 하고싶은데요 어떻게 하는 건가요? [1] | 2016.08.02 by 라자루스 |
해운대살고싶다 | php 질문드립니다. | |
청*솔 | iframe 으로 붙혀넣기 했는데.! [2] | 2016.09.12 by 청*솔 |
영흥도우럭1 | 실시간 새글 알림 애드온..질문드립니다. | |
샤킹 | 스크롤 버튼 고정하는 방법 알려주세요!! | |
홍찬 | 2차 메뉴 열릴시 1차 메뉴 크기확장 안되게 하려면 어떻게 해야할까요? [1] | 2017.02.03 by DoorWeb |
파도. | 스케치북 최근게시물 상단 탭 오른쪽 여백 없애기 | |
쇼퍼 | php 5.16 php 5.2 이상으로 업데이트하기 | |
lifema**** | list.html에서 letter-spacing 수정 문의드립니다 [2] | 2017.03.13 by lifema**** |
쩡님아야 | 게시판과 슬라이드와의 연결고리 | |
영종몬 | 테이블 왼쪽 여백주는방법 [3] | 2017.07.03 by 영종몬 |