코딩문의요 ㅠㅠ 정보
코딩문의요 ㅠㅠ관련링크
http://daasolee.cafe24.com/
204회 연결
본문
지인분 만들어 드리는 사이트인데요,
메인과 서브 하단 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;}
-----------------------
여기까지 입니다.
웹표준을 어설프게 알고 있어서..
많은 조언 부탁드려요
메인과 서브 하단 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;}
-----------------------
여기까지 입니다.
웹표준을 어설프게 알고 있어서..
많은 조언 부탁드려요
댓글 전체
footer 쪽에
position 을 주고 해보세요.
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를 꼭 필요한 경우에만 쓰시는게 어떨런지요.
이 부분에서 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 이 부분은
어느때만 사용하는거죠?
제가 웹표준을 잘 몰라서요 ㅎㅎ;;
어느때만 사용하는거죠?
제가 웹표준을 잘 몰라서요 ㅎㅎ;;