묻고답하기
레이아웃 DIV문제 두번째...
2007.08.31 14:11
음흠..
http://bo-nara.com/?mid=notice&document_srl=191
이부분 보시면..ㅠ
카피라이트 부분이...
맨 아래로 가야하는데;;
가질 않고..
저렇게 되어있네요..ㅠㅠ;;
푸터부분은...
레이아웃//
<!--푸터부분 시작-->
<ol id="footer">
<li id="copyrighter">
<li id="gradater"></li>
</li>
</ol>
<!--푸터부분 시작-->
//CSS
/* Site Layout - Footer */
#footer { position:relative; top:4px; width:1024px; background-color:#428CCF; z-index:99;}
#copyrighter { position:relative; width:426px; height:80px; background:url(../images/cpr.gif); z-index:99;}
#gradater { position:absolute; top:0px; left:871px; width:153px; height:80px; background:url(../images/cpr_gr.gif); z-index:99;}
이렇게 되어있구요...;;ㅠ
더 자세하게 첨부하자면...;;
소스길어 ㅈㅅ;;ㅠ
레이아웃///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<!-- js 파일 import -->
<!--%import("css/default.css")-->
<!--%import("js/activeX.js")-->
<div id="bodyWrap">
<!--헤더부분 시작-->
<div id="header">
<div id="topping">
<div id="t_logo"><div>
<div id="f_menu">
<script language="javascript" type="text/javascript">fm("http://bo-nara.com/layouts/bo-nara_skin/images/t_flash_m.swf", "t_flash_m.swf", 780, 72, "N", "N");</script>
</div>
</div>
</div>
<div id="t_bann"></div>
</div>
<!--헤더부분 끝-->
<!--메인부분 시작-->
<div id="b_main">
<div id="m_login"><img width="100%" height="100" src="http://bo-nara.com/common/tpl/images/widget_bg.jpg" class="zbxe_widget_output" style="clear:both;" widget="login_info" skin="xe_official" colorset="default" widget_cache="0" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="" widget_width="200" widget_width_type="px" widget_position="" widget_sequence="155" />
</div>
<div id="b_calendar"><img src="http://bo-nara.com/common/tpl/images/widget_bg.jpg" height="100" class="zbxe_widget_output" widget="calendar" skin="cozy_simple" colorset="blue" widget_cache="0" mid_list="data,faq,free,intro,intro2,map,notice,qna" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="Y" widget_width="200" widget_width_type="px" widget_position="" widget_sequence="202" style="width:200px;float:left;" />
</div>
<div id="lt_comm"><img src="http://bo-nara.com/common/tpl/images/widget_bg.jpg" height="100" class="zbxe_widget_output" widget="newest_comment" skin="cozy_simple" colorset="blue" widget_cache="0" title="최근 댓글들" list_count="5" mid_list="data,faq,free,intro,intro2,map,notice,qna" widget_margin_top="" widget_margin_left="" widget_margin_right="" widget_margin_bottom="" widget_fix_width="Y" widget_width="200" widget_width_type="px" widget_position="" widget_sequence="205" style="width:200px;float:left;" />
</div>
<div id="sh_info"></div>
<div id="m_part">{$content}
</div>
<div id="q_menu"><script language="javascript" type="text/javascript">fm("http://bo-nara.com/layouts/bo-nara_skin/images/q_menu.swf", "q_menu.swf", 88, 218, "N", "N");</script>
</div>
<!--푸터부분 시작-->
<ol id="footer">
<li id="copyrighter">
<li id="gradater"></li>
</li>
</ol>
<!--푸터부분 시작-->
</div>
<!--메인부분 끝-->
</div>
CSS~~~///////////////////////////////////////////////////////////
@charset "utf-8";
/*
NHN UIT Lab. WebStandardization Team (http://html.nhndesign.com/)
Jeong, Chan Myeong 070601~070630
*/
/* Default Skin - Start */
/* Site Layout - Body Wrap */
body {}
#bodyWrap { position:relative; width:1024px; margin:0,0,0,0; padding:0 0 0 0;}
/* Site Layout - Header */
#header { position:relative; width:1024px;}
#topping { position:relative; width:1024px; height:72px; background:url(../images/t_bg.png); z-index:99;}
#t_logo { position:relative; width:208px; height:72px; background:url(../images/t_logo.gif) no-repeat left top; z-index:99;}
#f_menu { position:relative; left:209px; width:780px; height:72px;z-index:99;}
#t_bann { position:relative; width:1024px; height:200px; z-index:99; background-color:#FFCCCC;}
/* Site Layout - Main */
#b_main { position:relative; left:4px; top:2px; width:1020px; z-index:99;}
#m_login { position:relative; width:200px; z-index:99;}
#b_calendar { position:relative; width:200px; z-index:99;}
#lt_comm { position:relative; width:200px; z-index:99;}
#sh_info { position:relative; width:200px; height:249px; background:url(../images/sh_info.gif) no-repeat left top; z-index:99;}
#m_part { position:absolute; top:0px; left:204px; width:700px; z-index:99;}
#q_menu { position:absolute; top:0px; left:918px; width:88px; z-index:99;}
/* Site Layout - Footer */
#footer { position:relative; top:4px; width:1024px; background-color:#428CCF; z-index:99;}
#copyrighter { position:relative; width:426px; height:80px; background:url(../images/cpr.gif); z-index:99;}
#gradater { position:absolute; top:0px; left:871px; width:153px; height:80px; background:url(../images/cpr_gr.gif); z-index:99;}
/* Default Skin - End */
이휴..ㅠ;
좋은하루요~
댓글 8
-
Simulz
2007.08.31 14:37
-
kalcapt
2007.08.31 14:39
아...
감사합니다~~^^
DIV공부를 체계적으로 해야겠네요..ㅠ
지식의 전무상태에서 기본 레이아웃을 대충 분석해서 한거라..ㅠ
div로 정렬이 안되서 ul ol 다 넣어봤는데 ㅎㅎ;;
정말 감사드립니다~~^^* -
kalcapt
2007.08.31 14:44
윽...............
말씀하신대로 바꾸니깐..;;ㅠ
이렇게 되네요..;;
주소 다시 접속해보시면 ㅠㅠㅠㅠㅠㅠㅠㅠㅠ -
Simulz
2007.08.31 17:04
<DIV>
<DIV></DIV>
</DIV>
처럼 다음 DIV 시작할 때는 4칸씩 들여쓰기를 해보세요.
소스가 너무 길어 헷갈릴 때에는 아래 처럼 주석을 달아주면 편집할 때 삽입할 곳, 문제점, 빠진 곳을 찾기 쉬워집니다.
<!--Start_1-->
<DIV>
<!--Start_11-->
<div></div>
<!--End_11-->
<!--Start_12-->
<div>
<!--Start_121-->
<div></div>
<!--End_121-->
</div>
<!--End_12-->
</div>
<!--End_1-->
-
베니
2007.08.31 19:04
relative를 써야 할 이유가 없어보이는데 relative가 너무 많아서 보기가 어렵네요. 게다가 버그조차 있어서 relative는 별로 권해드리지도...
'float'를 공부해보시기 바랍니다.
대략... 간단하게 이런 구조는
<div id="site_wrapper" style="width:1024px">
<div id="header" style="width:100%">
</div>
<div id="sidebar" style="width: 200px; float: left">
<div id="body" style="width: 824px; float: right">
</div>
<div id="footer" style="clear: both; width:100%">
</div>
</div>
이런식으로 써주시는게 일반적입니다. (근데 저렇게만 하시면 padding, margin 넣다가 IE6에서 개판납니다. ;;; 후덜덜... 심오한 IE의 세계)
CSS를 따로 쓰느니 이렇게 인라인으로 써드리는게 나을것 같아서 ... ㄱ-);; -
Simulz
2007.08.31 19:58
망할 IE6~
MS 측에서 IE7로 강제 업그레이드 하도록 해야합니다 ㅠㅠ.... -
비나무
2007.09.02 23:23
강제 업그레이드하면 절대 안 되는 곳에 근무하고 있답니다... ㅠ.ㅠ;;;;;
IE6를 어쩔 수 없이 사용하고 있어요... 흑흑흑... -
kalcapt
2007.08.31 21:20
아하................;;
그렇군요..
relative와 absolute차이를 몰라서 남발..ㅋㅋ;;
float을 공부해보라하시니.. 공부해봐야겠네요^^
css사용하니깐.. 뭐 상대적으로 소스가 간결해지고 그래서 보기는 좋네요 ㅋㅋ;;
수정도 간편하고..;;
주석 일일이 달기는 귀찮아서 ㅋㅋ;;Every body thanks to you to reply me........... (Suddenly... korean words doesn't work...........;;)
DIV 태그 정렬이 되어 있지 않습니다.
<div id="t_bann"></div> 위에 있는 </div> 태그를 삭제하세요.
메인 부분 시작에 대한 <div id="b_main"> 태그 중 닫기 태그가 없습니다 </div> 태그를 삽입하세요.
푸터부분 시작에 대한 DIV 태그가 없습니다 <div>태그를 삽입하세요.
(푸터는 DIV로 감싼 후 id="footer" 를 지정하세요. OL은 목록을 나타낼 때 사용합니다.)