Cozy Home 레이아웃 관련

동시성

2016.09.01 09:51

653

Cozy Home 에서 가르쳐주지 않아 염치없지만 여기에 올려봅니다.

우선 아직 만들고 있는 중인 제 홈페이지는 http://avestaart.org 입니다.

화면 상단의 메뉴바는 가로 넓이가 1020으로 제한되게 설치되었는데

하단에 있는 Copyright가 들어가는 하단바는 가로 넓이가 무제한이고 제한되는 설정이 없습니다.

이 copyright 하단바를 상단 메뉴바처럼 1020으로 제한되게 하는 방법이 없을까요?

이 곳에 물어봐서 다시 한 번 죄송하다는 말씀 드리며.

워낙 고수신 것 같아서 물어봤습니다.

감사합니다.

프렌다

2016.09.01 09:54

작성하신 주소는 포워딩이 걸려있는지 안들어가지네요

해당 푸터(카피라이트) 부분에 style="width:1020px;" 추가하시면 해당 영역의 가로 사이즈가
1020px로 고정됩니다. 물론 경우에 따라 margin:auto; 등의 옵션도 추가하셔야 겠지요

추천 0
동시성

2016.09.01 10:09

주소는 http://avestaarto.org/xe 입니다.
저 부분을 어디 파일에 어느 부분에 추가하면 될까요?

추천 0
프렌다

2016.09.01 10:29

@동시성

하단 파란색 배경부분이 가로 100%가 아닌 1020px로 만들고 싶으신건가요?

<div class="footer_wrap">
<footer class="footer">
<div class="bottom_menu">
  <ul>
   <li><a href="/xe/index.php?mid=oblation">Oblation</a><span>|</span></li><li><a href="/xe/index.php?mid=ZBackup">Manager Board</a><span>|</span></li>         <li><a href="/xe/index.php?mid=avestaart&act=dispMemberSignUpForm">회원가입</a> <span>|</span></li>
   <li><a href="/xe/index.php?mid=avestaart&act=dispMemberLoginForm">로그인</a> <span>|</span></li>
         <li class="lang_area">
    <button class="select_lang">한국어</button>    <ul>
     <li><button onclick="doChangeLangType('en');return false;" type="button">English</button></li>    </ul>
   </li>  </ul>
</div>
<ul class="site_info"><li style="margin-bottom: 3px; display: block;">'아베스타 아트'는 진실과 거짓이 구분되지 않은 세계의 어두운 영역에 예술이란 도구를 이용해 진실의 빛을 밝히고 정의를 바로 세우고자 하는 사명을 갖고 2013년 창단한 '종합 문화 예술 단체'입니다.<br></li></ul>
<div class="copyright num">Copyright© 2013 Avesata Art. All Rights Reserved.</div>
</footer>
</div>

위 부분을

<div class="footer_wrap" style="width:1020px; margin:auto;">
<footer class="footer">
<div class="bottom_menu">
  <ul>
   <li><a href="/xe/index.php?mid=oblation">Oblation</a><span>|</span></li><li><a href="/xe/index.php?mid=ZBackup">Manager Board</a><span>|</span></li>         <li><a href="/xe/index.php?mid=avestaart&act=dispMemberSignUpForm">회원가입</a> <span>|</span></li>
   <li><a href="/xe/index.php?mid=avestaart&act=dispMemberLoginForm">로그인</a> <span>|</span></li>
         <li class="lang_area">
    <button class="select_lang">한국어</button>    <ul>
     <li><button onclick="doChangeLangType('en');return false;" type="button">English</button></li>    </ul>
   </li>  </ul>
</div>
<ul class="site_info"><li style="margin-bottom: 3px; display: block;">'아베스타 아트'는 진실과 거짓이 구분되지 않은 세계의 어두운 영역에 예술이란 도구를 이용해 진실의 빛을 밝히고 정의를 바로 세우고자 하는 사명을 갖고 2013년 창단한 '종합 문화 예술 단체'입니다.<br></li></ul>
<div class="copyright num">Copyright© 2013 Avesata Art. All Rights Reserved.</div>
</footer>
</div>

이렇게 변경, 혹은 css파일내에서 해당 footer_wrap 부분에 옵션을 추가해줘도 좋습니다.

추천 1
프렌다

2016.09.01 10:29

@프렌다

좌측 정렬을 의도하신거라면 margin:auto; 는 삭제해주세요.

추천 0
동시성

2016.09.01 11:07

@프렌다

거의 다 해결되어 가는데 한 번 더 묻겠습니다.

길이는 1020으로 줄었는데 margin:auto;를 넣어도 안 넣은 것과 마찬가지로 좌측 정렬이 됩니다.
싸이트 디자인 설정에서 layout.html을 수정해도
레이아웃 폴더내에 CSS 파일 수정해도 마찬가지입니다.

참고로 CSS 파일의 footer 부분은 다음과 같구요.

/* footer */
.footer_wrap   {background-color: #4961B8; width:1020px; margin:auto;}
.footer_wrap a   {color: #AAA;}
.footer_wrap a:hover   {color: #DDD;}
.bottom_menu li,
.site_info li   {display: inline-block;}
.bottom_menu li span,
.site_info li span   {margin: 0 8px; color: #737373;}
.bottom_menu li:last-child span,
.site_info li:last-child span   {display: none;}
.copyright   {padding-top: 3px; font-size: 12px; color: #888;}
.site_info   {margin-top: 10px; font-size: 11px; color: #888;}
.site_info:empty   {display: none;}

/* lang */
.lang_area   {position: relative;}
.lang_area>button   {color: #AAA;}
.lang_area>button:hover   {color: #DDD;}
.lang_area ul   {display: none; position: absolute; bottom: 100%; margin-bottom: 5px; background-color: #FFF; border: 1px solid #CCC;}
.lang_area li   {display: block; padding: 5px 10px; border-bottom: 1px dotted #DDD; white-space: nowrap;}
.lang_area li:last-child   {border-bottom: none;}

싸이트 디자인 설정에서 layout.html은 다음과 같습니다.

<div class="footer_wrap" style="width:1020px; margin:auto;">
<footer class="footer">
   <div class="bottom_menu">
       <ul>
           <li loop="$bottom_menu->list=>$key5,$val5"><a href="{$val5['href']}" target="_blank"|cond="$val5['open_window']=='Y'">{$val5['text']}</a><span>|</span></li>
           
           
           <li><a href="{getUrl('act','dispMemberSignUpForm')}">{$lang->cmd_signup}</a> <span>|</span></li>
           <li><a href="{getUrl('act','dispMemberLoginForm')}">{$lang->cmd_login}</a> <span>|</span></li>
           
           <li><a href="{getUrl('act','dispMemberInfo','member_srl',$logged_info->member_srl)}">{$lang->member_info}</a> <span>|</span></li>
           <li><a href="{getUrl('act','dispMemberLogout')}">{$lang->cmd_logout}</a> <span>|</span></li>
           
           
           <li class="lang_area" cond="count($lang_supported)>1">
               <button class="select_lang" loop="$lang_supported=>$key,$val" cond="$key == $lang_type">{$val}</button>
               <ul>
                   <li loop="$lang_supported=>$key,$val" cond="$key != $lang_type"><button type="button" onclick="doChangeLangType('{$key}');return false;">{$val}</button></li>
               </ul>
           </li>
       </ul>
   </div>
   <ul class="site_info"><li cond="$li->extra_text" style="display:block; margin-bottom: 3px;">{$li->extra_text}<br /></li><li cond="$li->address">주소: {$li->address} <span>|</span></li><li cond="$li->phone">전화번호: {$li->phone} <span>|</span></li><li cond="$li->fax">팩스: {$li->fax}</li></ul>
   <div class="copyright num">Copyright© {$li->site_name} All Rights Reserved.</div>
</footer>
</div>
</div>

추천 0