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

최근글 게시판별 배치도 채택완료

시와별 5년 전 조회 3,447

 

 

company 테마를 이용해 홈페이지를 만들었습니다.

초기화면의 최근글 배치가 아래로 노출이 됩니다.

가로로 배치를 하려고 하는데 css 와 index를 어디를 수정을 해야하는지요?

아래는 관련 index  소스와 관련 css 입니다.
고수님들 좀 도와주시면 감사합니다.


</p>

<p><div id="comp_lt">

    <div class="li_notice">

        <?php

        // 이 함수가 바로 최신글을 추출하는 역할을 합니다.

        // 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수);

        // 테마의 스킨을 사용하려면 theme/basic 과 같이 지정

        echo latest('theme/basic', 'notice', 4, 18);

        ?>

    </div>

      <div class="li_gall">

        <?php

        // 이 함수가 바로 최신글을 추출하는 역할을 합니다.

        // 사용방법 : latest(스킨, 게시판아이디, 출력라인, 글자수, 캐시타임, option);

        // 테마의 스킨을 사용하려면 theme/basic 과 같이 지정

        $options = array(

            'thumb_width'    => 143, // 썸네일 width

            'thumb_height'   => 89,  // 썸네일 height

            'content_length' => 40   // 간단내용 길이

        );

        echo latest('theme/gallery', 'gallery', 3, 25,1, $options);

        ?>

    </div>   </div>

   


---------------------
▼ 관련 css
   
</p>

<p>#comp_if{float:left;border-left:1px solid #c8d7d6;border-right:1px solid #c8d7d6}

#comp_if li{height:192px;width:248px;border-top:1px solid #eee;position:relative}

#comp_if li h2{position:absolute;top:25px;left:20px;font-size:1.333em}

#comp_if li p{position:absolute;top:50px;left:20px;color:#566472;font-size:1.083em;line-height:1.4em}

#comp_if li a{display:block;width:100%;height:100%;text-indent:-99999px;overflow:hidden}

#comp_if li.com_bg1 a{background:url(../img/com_bg1.jpg) no-repeat bottom right #e7f0f6}

#comp_if li.com_bg2 a{background:url(../img/com_bg2.jpg) no-repeat bottom right #2676c5}

#comp_if li.com_bg2 h2,#comp_if li.com_bg2 p {color:#fff}

#comp_if li.com_bg3 a{background:url(../img/com_bg3.jpg) no-repeat bottom right #e7f0f6}

#comp_if li:first-child{border:none}

#comp_lt{float:left;padding:25px;width:900px;overflow:hidden}

#comp_lt .li_notice{border-bottom:1px solid #eee;padding-bottom:30px;height:140px;}

#comp_lt .li_gall{border-bottom:1px solid #eee;padding-bottom:30px;height:140px;}</p>

<p>   

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

답변 2개

채택된 답변
+20 포인트
#comp_lt{float:left;padding:25px;width:900px;overflow:hidden}
#comp_lt:after{content:''; clear:both;display : table;}
#comp_lt .li_notice{border-bottom:1px solid #eee;padding-bottom:30px;height:140px;float:left;}
#comp_lt .li_gall{border-bottom:1px solid #eee;padding-bottom:30px;height:140px;float:left;}

css구문을 다음과 같이 추가하면 옆으로 붙으실겁니다.

로그인 후 평가할 수 있습니다

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

시와별
5년 전

 

 

정말 감사합니다. 그런데 위의 이미지 처럼
1. 공지와 갤러리 박스 사이에 간격을 주는 문제
2. 갤러리와 공지의 가로 배열이 같게 하는 문제
는 어디를 만져야 하는지요?

로그인 후 평가할 수 있습니다

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

답변을 작성하려면 로그인이 필요합니다.

로그인