테스트 사이트 - 개발 중인 베타 버전입니다

코딩문의요 ㅠㅠ

2013-05-15 23;31;17.jpg
지인분 만들어 드리는 사이트인데요,

메인과 서브 하단 footer부분 위쪽의 간격부분이

메인은 띄어지는데(35px), 서브페이지는 띄어지지가 않네요 ㅠㅠ

소스 첨부할게요.

첨부된 이미지 부분이 35px 띄어져야합니다..


------------------------------

#html, body {width:100%;height:100%;}


#wrap {width:100%; margin:0 auto;}

/* 대메뉴 큰 틀 */
#header {position:relative; width:100%; height:105px; margin:0 auto;}
#header .top {width:100%; height:25px; background-color:#404040;}
#header .top ul{position:relative; width:1000px; height:25px; list-style:none; padding:0; margin:0 auto;}
#header .top li{display:inline; float:left;}
#header .space { position:relative; height:20px;}
#header .gnb {width:1000px; height:40px; margin:0 auto;}
#header .gnb .logo1{width:190px; height:40px; float:left;}
#header .gnb .space{width:350px; height:40px; float:left;}
#header .gnb .menu .menu {width:460px; height:40px;}

/* 대메뉴 큰 틀 끝*/


/* 메인이미지 */
#main {width:100%;}
#main .mainimg {position:relative; width:1000px; height:550px; margin:0 auto;}
/* 메인이미지 끝*/

/* 줄 간격 */
#vspace {position:relative; width:100%; height:35px;}
#hspace {position:relative; width:35px; height:100%;}
/* 줄 간격 끝*/

/* main banner 01 */
#banner {position:relative; width:100%; height:455px; margin:0 auto;}
#banner .body {width:1000px; height:455px; margin:0 auto;}
#banner .body .banner01 {position:relative; width:265px; height:455px; padding-right:35px; float:left;}

#banner .body .banner01 .notice{position:relative; width:265px; height:90px; background:url(img/main/bg_notice.gif) 25px 0px 0px 0px no-repeat; float:left;}
#banner .body .banner01 .notice .tit{position:relative; width:179px; height:10px; float:left; padding:0; margin:0 auto;}
#banner .body .banner01 .notice .more{position:relative; width:26px; height:10px; float:right;}

#banner .body .banner01 .cscenter{position:relative; width:265px; height:100px; float:left; padding-top:35px;}

#banner .body .banner01 .mbanner{position:relative; width:265px; height:195px; float:left; padding-top:35px;}

#banner .body .banner02 {position:relative; width:700px; height:450px; float:left;}

#banner .body .banner02 .project{position:relative; width:700px; height:220px; background:url(/img/main/bg_project.gif) 25px 0px 0px 0px no-repeat; }
#banner .body .banner02 .project .tit{position:relative; width:227px; height:10px; float:left; padding:0; margin:0 auto;}
#banner .body .banner02 .project .more{position:relative; width:26px; height:10px; float:right;}
#banner .body .banner02 .project .img{ width:700px; height:180px; padding-top:38px; float:left;}

#banner .body .banner02 .column{position:relative; width:700px; height:194px; padding-top:40px;}
#banner .body .banner02 .column .tit{height:13px; float:left;}
#banner .body .banner02 .column .img{width:700px; height:159px; padding-top:22px; float:left;}


#recent {position:relative; width:100%; height:230px; margin:0 auto; padding-bottom:35px; }
#recent .ing{width:1000px; height:230px; margin:0 auto; padding-top:35px;}
#recent .ing .img1{position:relative; width:300px; height:230px; padding-right:50px; float:left;}
#recent .ing .img2{position:relative; width:300px; height:230px; padding-right:50px; float:left;}
#recent .ing .img3{position:relative; width:300px; height:230px; float:left;}

#bbanner {position:relative; width:100%; height:220px; margin:0 auto; background-color:#b3b2b1;}
#bbanner .body {width:1000px; height:220px; margin:0 auto;}
#bbanner .body .list{width:1000px; float:left;}
#bbanner .body .list ul{list-style:none; width:1000px; float:left;}
#bbanner .body .list li {width:184px; height:12px; color:#40403e; font-size:11.5px; word-break:normal; word-wrap:normal; float:left; }
#bbanner .body .list li span{height:14px; color:#ffffff; font-size:14px; font-weight:bold; padding-bottom:14px;}
#bbanner .body .list li p{width:184px; height:90px; margin-bottom:12px; }

/* main banner 01끝 */




/* 컨텐츠*/
#sub {position:relative; width:100%; height:auto; margin:0 auto;}
#sub .body {width:1000px; margin:0 auto;}
#sub .body .location {width:1000px; height:10px; color:#4b4b4b; font-size:11px; padding-bottom:50px; margin:0 auto;}
#sub .body .title {position:relative; width:1000px; height:55px; padding-bottom:30px; float:left; margin:0 auto;}
#sub .body .img {position:relative; width:1000px; height:200px; padding-bottom:50px; float:left; margin:0 auto;}
#sub .body .contents {position:relative; width:1000px; float:left; margin:0 auto;}


/* 서브 끝 */



/* banner 2 */
/* banner 2끝 */

/* banner 3 */
/* banner 3끝 */


/* copyright */
#footer {width:100%; height:70px; margin:0 auto; }
#footer .area {position:relative; width:1000px; height:70px; margin:0 auto;}
#footer .area .logo {width:120px; height:70px; float:left;}
#footer .area .adress {width:880px; height:25px; font:굴림; font-size:11px; color:#000000; padding-top:23px; float:left;}


-----------------------

여기까지 입니다.

웹표준을 어설프게 알고 있어서..

많은 조언 부탁드려요

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 4개

footer 쪽에
position 을 주고 해보세요.
position 을 어떻게 주는거죠?? ㅠ
#sub .body .contents {position:relative; width:1000px; float:left; margin:0 auto;}
이 부분에서 float:left 때문인듯 하네요. float시킨후 하단에서 clear를 해주지 않아서 높이값을 인식을 못하는 듯하네요.
<div class="contents"><img src="../img/sub01/sub01_contents.jpg" /></div> 밑에
<div style="clear:both"></div>를 해주시면 될듯합니다.

아니면 지금 모양에선
#sub .body .contents {position:relative; width:1000px;margin:0 auto;} 으로 굳이 float:left를 할 필요가 없어보이네요.


덧붙이자면 position:relative를 꼭 필요한 경우에만 쓰시는게 어떨런지요.
position:relative 이 부분은
어느때만 사용하는거죠?

제가 웹표준을 잘 몰라서요 ㅎㅎ;;

게시글 목록

번호 제목
284508
284499
284492
284490
284484
284481
284478
284476
284474
284472
284470
284458
284457
284454
284453
284447
284446
284444
284441
284440