현재 민트테마 사용중이구요,
(민트테마주소 : http://sir.co.kr/g5_theme/475?page=2)
(민트테마예시사이트 : http://theme.sir.co.kr/gnuboard5/demo/mint)
예시 사이트를 기준으로,
현재 제 사이트는 위 사진처럼 변형시켜놓은 상태입니다.
그런데,
빨간색으로 표시한 부분의 배너를
어떻게 저렇게 중간으로 모이게 할 수 있는지가 궁금합니다.
이것저것 설정 바꿔보았는데 저렇게는 잘 안되더라구요...
도와주십시오..ㅠㅠ
혹시 몰라서,
mint/theme/mint/css/mobile.css
상단레이아웃부터 하단레이아웃까지
적어봅니다.
▼▼▼▼▼▼▼▼▼▼▼▼▼▼
Copy
/* 상단 레이아웃 */#hd {width:100%;background:#fff;position:relative;-webkit-box-shadow: 0 2px 3px rgba(83, 83, 93, 0.28);-moz-box-shadow: 0 2px 3px rgba(83, 83, 93, 0.28);box-shadow: 0 2px 3px rgba(83, 83, 93, 0.28);}#hd #hd_wr{max-width:840px;margin:0 auto;width:100%;position:relative;}#hd:after {display:block;visibility:hidden;clear:both;content:""}#hd_h1 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}#logo {text-align:left;height:125px}#logo a{margin-top:15px;display:inline-block}#hd_sch_open{display:none}#hd_sch {text-align:center;}#hd_sch h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}#hd_sch form {position:relative;background:#ececec;border-radius:5px}#hd_sch form:after {display:block;visibility:hidden;clear:both;content:""}#hd_sch #sch_stx {width:127px;padding-left:10px;border:0;background:none;height:35px !important;line-height:35px !important;vertical-align:middle;}#hd_sch #sch_submit {margin:0;padding:0 ;height:35px !important;line-height:35px !important;border:0;background:#00d7c1;border-radius:0 5px 5px 0 ;color:#fff;vertical-align:middle;cursor:pointer;width:40px}#hd_sch #sch_submit:hover, #hd_sch #sch_submit:focus{background:#00c6b2;transition: 0.8s;-webkit-transition: 0.8s;-moz-transition: 0.8s;-ms-transition: 0.8s;-o-transition: 0.8s;}#sch_stc_label{position:absolute;top:0;left:10px;height:35px !important;line-height:35px !important;color:#666}#hd_nb {clear:both;background:#ecf0f7;text-align:center}#hd_nb li {display:inline-block}#hd_nb li:nth-last-of-type(1) {border-right:0 !important}#hd_nb a {display:inline-block;padding:10px 7px;text-decoration:none}@media all and (min-width : 601px) { #logo{margin-left:20px} #hd_sch {position:absolute;top:20px;right:95px}}@media all and (max-width : 600px) { #logo {text-align:center;} #hd_sch_open {display:block;position:absolute;top:0px;left:0px;padding:0;border:0;background:url(../img/sch_btn.gif) no-repeat 50% 50%;text-indent:-999px;overflow:hidden;width:70px;height:70px;} #hd_sch{display:none;background:#fff;padding:0 20px 20px;border-bottom:2px solid #00d7c1;border-top:1px solid #fff} #hd_sch #sch_stx{width:77%;padding-left:3%;float:left} #hd_sch #sch_submit {width:20%;float:left} #logo img{height:35px;}}@media all and (max-width : 375px) { #logo {height:80px} #logo a{margin-top:10px} #hd_sch_open{height:55px;background-size:60%;width:45px} #logo img{height:60px;}}/* 중간 레이아웃 */#wrapper {background:#eee;width:100%;}#wrapper:after {display:block;visibility:hidden;clear:both;content:""}#container {position:relative;max-width:800px;margin:0px auto;z-index:1;padding:20px}#container:after {display:block;visibility:hidden;clear:both;content:""}#container_title {margin:0 0px 10px;font-size:1.2em;font-weight:bold;text-align:center;border-bottom:2px solid #ddd;padding-bottom:20px;}/*index*/.latest{width:100%;float:left}#main_work ul:after {display:block;visibility:hidden;clear:both;content:""}#main_work ul li{background:#fff;letter-spacing:-0.01em}#main_work ul li.main_work_1{background:#f8f8f8;}#main_work .work_txt span{ display:block;padding:5px 0;color:#808080;line-height:1.5em}#lt_notice{clear:both}#lt_notice,#lt_board,#lt_board2,#lt_gall{margin-top:20px}@media all and (min-width : 601px) { .col_l_60{width:60%} .col_l_40{width:40%} .col_l_30{width:30%} .col_l_35{width:35%} .col_l_25{width:50%} #main_work ul{margin-left:0px} #main_work ul{margin-top:20px} #main_work ul li{overflow:hidden} #main_work .work_img img{max-width:100px;width:100%;height:auto} #lt_board2 .lt{margin-left:20px}}@media (min-width :701px) { #main_work .work_img{width:35%;height:122px;line-height:112px;display:block;float:left;} #main_work .work_txt{width:65%;height:122px;display:block;float:center;} #main_work .work_txt span.work_txt_tit{margin-top:20px ;font-weight:bold;font-size:1.25em;color:#111}}@media (min-width:601px) and (max-width :700px) { #main_work .work_img{width:35%;height:100px;line-height:100px;display:block;float:left;} #main_work .work_txt{width:65%;height:100px;display:block;float:left;} #main_work .work_txt span.work_txt_tit{line-height:100px;padding:0 ;font-weight:bold;font-size:1.25em;color:#111;} #main_work .work_txt span.work_txt_p{display:none}}@media all and (max-width : 600px) { #main_work{margin-top:20px} #main_work ul li{float:left;width:33.3%;text-align:center;} #main_work .work_img{display:block;} #main_work .work_img img{max-width:100px;width:80%;height:auto} #main_work .work_txt span.work_txt_p{display:none;} #main_work .work_txt span.work_txt_tit{margin:0 0 15px;font-size:1.2em;color:#111;font-weight:bold}}@media all and (max-width : 375px) { #container_title{padding-bottom:13px} #container {padding:15px 10px} #main_work{margin-top:10px} #main_work ul li{width:100%;clear:both} #main_work .work_txt span.work_txt_p{display:block;padding:0 0 15px} #main_work .work_txt span.work_txt_tit{padding-top:0;margin:0;font-size:1.2em;color:#111;font-weight:bold} #lt_notice,#lt_board,#lt_board2,#lt_gall{margin-top:10px}}/* 하단 레이아웃 */#ft {;border-top:1px solid #dde4e9;background:#fff;text-align:center}#ft h1 {width:0;height:0;font-size:0;line-height:0;overflow:hidden;}#ft_company{padding:20px 20px 10px}#ft_company a{font-weight:bold;display:inline-block;padding:0px 5px;font-size:1.12em;border-left:2px solid #eee}.bd_no{border:none !important}#ft_copy p{color:#888;padding-bottom:20px}#ft_copy .ft_sns{padding:15px 20px}#ft_copy .ft_sns a{padding:3px;}#top_btn{position:fixed;bottom:10px ;right:10px;border:none;z-index:99}/*group*/#group .lt{margin-top:20px}#group .lt_date{position:absolute;top:0;right:0;color:#5d938b}@media all and (max-width : 375px) { #group .lt{margin-top:10px}}
답변 2개 / 댓글 2개
채택된 답변
+20 포인트
2016-01-28 (목) 11:47:23
Copy
<div id="lt_board" class="latest col_l_40" style="text-align:right"> <a href="#" class="work_img"><img src="<?php echo G5_THEME_IMG_URL; ?>/bn1.gif" alt="배너이미지1"></a></div><div id="lt_board" class="latest col_l_60" style="height:122px"> <div style="padding-left:15px"> <a href="#" class="work_txt"><span class="work_txt_tit"><b>사업설명 1</b></span><br><br><span class="work_txt_p">사업에 관한 간략 설명<br>회사에 대한 간략한 설명</span></a> </div></div>
주먹구구식으로 만들어 보았습니다.
답변에 대한 댓글 1개
스페르첸드
2016-01-29 (금) 01:18:08
2016-01-28 (목) 02:55:19
테마 원본 상태라면 모르겠지만 반응형 코드라서 그림만으로는 정확히 어떻게 수정했는지 확인할 수 없기 때문에 해당 웹페이지 주소를 띄워주셔야 정확한 답변이 가능합니다.
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.
fm25님의 코드에서 결정적인 힌트를 얻어서 결국 해결했습니다 ^^
감사합니다.