서브메뉴 타이틀과 설명글 겹침 현상
본문
이미 올린 질문이긴 한데, 해결이 안되어 재 질문 올립니다
하단 소스 찾아서 함께 남깁니다
홈페이지 관련 링크 : http://ssagae-ssagae.co.kr/bbs/board.php?bo_table=b0102
==================================================================
/********************************************************
■ Page Title : 페이지 타이틀 및 설명글
********************************************************/
.at-title { width:1000px; margin:0 auto; height:55px; position:relative; color:#000; background-color: #fafafa; border-bottom:1px solid #dfdfdf; }
.at-title .at-container { height:100%; position:relative; }
.at-title .page-title { font-size:24px; position:absolute; left:20px; bottom:15px; z-index:1; }
.at-title .page-desc { color:#888; position:absolute; right:20px; bottom:10px; z-index:1; }
@media all and (max-width:767px) {
.responsive .at-title { height:50px; }
.responsive .at-title .page-title { font-size:20px; left:15px; bottom:10px; }
}
FTP 프로그램 colorset.css 파일 내용 중 일부입니다
수정 방법 조언 부탁드릴게요
답변 3
/********************************************************
■ Page Title : 페이지 타이틀 및 설명글
********************************************************/
.at-title { width:1000px; margin:0 auto; height:55px; position:relative; color:#000; background-color: #fafafa; border-bottom:1px solid #dfdfdf; }
.at-title .at-container { height:100%; position:relative; }
.at-title .page-title { font-size:24px; /* position:absolute; */ left:20px; bottom:15px; z-index:1; }
.at-title .page-desc { color:#888; /* position:absolute; */ right:20px; bottom:10px; z-index:1; }
@media all and (max-width:767px) {
.responsive .at-title { height:50px; }
.responsive .at-title .page-title { font-size:20px; left:15px; bottom:10px; }
}
위와 같이 수정하시고
ctrl + shift + r 을눌러서 캐시를 삭제후에 확인하시거나
전체 적용하고 싶으시면
/extend/version.extend.php 파일을 열어서
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
define('G5_JS_VER', '171222');
define('G5_CSS_VER', '220916'); // 보통오늘날짜로 버전수정 , 날짜에 여러번하시면 뒤에 01형태로 붙이세요
?>
로 수정해보세요
감사합니다 덕분에 잘 수정 했네요~!!
.at-title .page-title { font-size:24px; position:absolute; left:20px; bottom:15px; z-index:1; }
.at-title .page-desc { color:#888; position:absolute; right:20px; bottom:10px; z-index:1; }
위의 page-title과 page-desc 가 position:absolute 로 되어 있기 때문입니다.
왜 굳이 absolute를 사용하는지는 모르겠지만, absolute를 사용하고자 한다면
page-desc 에 top: 00px (page-title의 height를 참고)를 주시면 됩니다.
그게 아니라면 page-title, page-desc 의 position, left, bottom 을 모두 지우고 padding 이나 margin 으로 조정을 하셔도 됩니다.
감사합니다 참고가 많이 되었습니다!
.at-title {
height: 55px; 삭제
}
.at-title .page-title {
position: absolute; 삭제
}
.at-title .page-desc {
position: absolute; 삭제
}