Cozy Home 에서 가르쳐주지 않아 염치없지만 여기에 올려봅니다.
우선 아직 만들고 있는 중인 제 홈페이지는 http://avestaart.org 입니다.
화면 상단의 메뉴바는 가로 넓이가 1020으로 제한되게 설치되었는데
하단에 있는 Copyright가 들어가는 하단바는 가로 넓이가 무제한이고 제한되는 설정이 없습니다.
이 copyright 하단바를 상단 메뉴바처럼 1020으로 제한되게 하는 방법이 없을까요?
이 곳에 물어봐서 다시 한 번 죄송하다는 말씀 드리며.
워낙 고수신 것 같아서 물어봤습니다.
감사합니다.
하단 파란색 배경부분이 가로 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 부분에 옵션을 추가해줘도 좋습니다.
?
거의 다 해결되어 가는데 한 번 더 묻겠습니다.
길이는 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>
<!--@if($li->login_type != none)-->
<!--@if(!$is_logged)-->
<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>
<!--@else-->
<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>
<!--@end-->
<!--@end-->
<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><!--//footer_wrap-->
</div><!--//container-->
해당 푸터(카피라이트) 부분에 style="width:1020px;" 추가하시면 해당 영역의 가로 사이즈가
1020px로 고정됩니다. 물론 경우에 따라 margin:auto; 등의 옵션도 추가하셔야 겠지요