CSS 레이아웃 좀 도와 주세요,
관련링크
http://a900.org
193회 연결
본문
현재 그누보드에 COMPANY 테마를 이용해서 홈페이지를 만들려고 하고 있습니다.
이 테마의 레이아웃 부분을 아래와 같이 왼편에 게시판 설명을 하고 오른쪽에 해당 게시판의 최신 게시물이 올라오도록 하고 싶습니다.
아직 CSS 설정에 대한 것을 제대로 이해 하지 못하고 있어 이 부분에 대한 것을 생각대로 못 하고 있습니다. 수십번 수정을 해 봤는데 잘 안되네요. CSS에 대한 자료들을 찾아보고 연구해 보려고 해도 개념 자체가 제대로 안 서서 그런지 이해를 못 하겠습니다.
한번만 도와 주세요.
현재 기존의 default.css를 수정한 부분입니다.
#main_bn li .bn_wr{width:1000px; margin:0 auto;padding-top:117px}
#main_bn li .bn_txt{background-color:rgba(39, 120, 197,0.8);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#902778c5,endColorstr=#902778c5);width:283px; height:205px;padding:25px;margin-top:100px}
#main_bn li .bn_txt h2{text-shadow: 0 1px 1px rgba(0, 0, 0, .3);color:#fff;font-size:2.667em;line-height:40px;margin-top:35px}
#main_bn li .bn_txt p{color:#fff;background:url(../img/bn_pbg.jpg) no-repeat top left;padding-top:20px;margin-top:20px ;font-size:1.34em;line-height:23px;}
#main_bn li .bn_board{position:absolute;background-color:rgba(220,220,250,0.4);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#902778c5,endColorstr=#902778c5);left:550px;width:400px; height:295px;padding:25px;margin-top:10px;}
기존 bn_wr의 top를 100px 올리고 bn_txt에서 마진을 100px 주었습니다. 그리고 새로 bn_board를 추가했구요.
실제 코드에 적용은 아래와 같이 했습니다.
<!-- 콘텐츠 시작 { -->
<div id="idx_wrapper">
<!--메인배너-->
<div id="main_bn">
<ul class="bn_ul">
<li class="bn_bg1">
<div class="bn_wr">
<div class="bn_board">
<?php
echo latest('theme/basic', 'board', 5, 18);
?>
</div>
<div class="bn_txt">
<h2>자유게시판</h2>
<p>인사, 질문등 자유롭게 이용가능합니다.<br>광고, 스팸 혹은 불법적인 글은 통보 없이 삭제됩니다.</p>
</div>
</div>
</li>
<li class="bn_bg1">
<div class="bn_wr">
<div class="bn_txt">
<h2>a900.org<br>현재 수정 작업중</h2>
<p>게시판 등은<br>사용 가능합니다</p>
</div>
원하는 디자인은 아래 게시판의 목록이나 최신글이 파란색 부분에 맞춰 지도록 하고 싶습니다.
답변 1
일단은..
#main_bn li .bn_wr에 position: relative; 주시고
#main_bn li .bn_board에 left: 550px;를 right: 0; 로 바꿔보세요
허걱.. 이렇게 빠른 답변 정말 감사합니다. 말씀하신대로 했더니 원하는 대로 딱 되었네요. 정말 감사드립니다.
답변을 작성하시기 전에 로그인 해주세요.
