코딩문의요 ㅠㅠ > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

코딩문의요 ㅠㅠ 정보

코딩문의요 ㅠㅠ

본문

지인분 만들어 드리는 사이트인데요,

메인과 서브 하단 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;}


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

여기까지 입니다.

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

많은 조언 부탁드려요

댓글 전체

#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를 꼭 필요한 경우에만 쓰시는게 어떨런지요.
전체 66,558 |RSS
그누4 질문답변 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT