ul 영역에 관한 질문좀..
본문
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
include_once(G5_LIB_PATH.'/thumbnail.lib.php');
$imgwidth = 175; //표시할 이미지의 가로사이즈
$imgheight = 120; //표시할 이미지의 세로사이즈
?>
<style>
#oneshot { position:relative;width:728px;}
#oneshot .la_title{position:absolute; left:0; top:0; z-index:100; background:#000; padding:5px; font-size:1em; color:#fff;margin:0 0 0 5px;filter:alpha(opacity=50);opacity:.5;}
#oneshot .img_set{width:<?php echo $imgwidth ?>px; height:<?php echo $imgheight ?>px; background:#fafafa;padding:0;}
#oneshot .subject_set{width:<?php echo $imgwidth - 13 ?>px; height:58px; padding:5px 10px 10px 3px; z-index:1; bottom:0; left:0;}
#oneshot .subject_set .sub_title{color:#333;height:17px;overflow:hidden;padding:3px 0 0 0;font-size:1.2em;font-family:NanumBarunGothic,dotum;}
#oneshot .subject_set .sub_content{color:#8c8a8a;height:30px;overflow:hidden;padding:3px 0 0;font-family:NanumGothic,dotum;}
#oneshot ul {list-style:none;margin:0;padding:15px 0 20px 0;}
#oneshot li{float:left;list-style:none;text-decoration:none;}
.subject_set a:link, a:visited {color:#333;text-decoration:none}
.subject_set a:hover, a:focus, a:active {color:#e60012;text-decoration:none}
/* 폰트불러오기 */
@font-face {font-family:'NanumBarunGothic';src: url('<?php echo $latest_skin_url ?>/NanumBarunGothic.eot');}
@font-face {font-family:'NanumGothic';src: url('<?php echo $latest_skin_url ?>/NanumGothic.eot');}
.portfolio{padding:0 0 5px 0}
.portfolio .tit{padding:10px 20px;background:#fff;color:#000;font-weight:bold;font-size:15px;font-family:NotoSansKR Regular;}
</style>
<div id="oneshot">
<div class="portfolio">
<div class="tit">PORTFOLIO</div>
</div>
<ul>
<?php for ($i=0; $i<count($list); $i++) { ?>
<li>
<div class="img_set">
<a href="<?php echo $list[$i]['href'] ?>">
<?php
$thumb = get_list_thumbnail($board['bo_table'], $list[$i]['wr_id'], $imgwidth, $imgheight);
if($thumb['src']) {
$img_content = '<img class="img_left" src="'.$thumb['src'].'" alt="'.$list[$i]['subject'].'" width="'.$imgwidth.'" height="'.$imgheight.'">';
} else {
$img_content = 'NO IMAGE';
}
echo $img_content;
?>
</a>
</div>
</li>
<?php } ?>
</ul>
</div>
<div style="clear:both;"></div>
ul에 패딩값을 주려고 하는데 ul영역이 li부분을 감싸지 못하더라고요.. 그래서 높이를 수동으로 줘야하는데 원래 다 감싸줘야하는거 아닌가요? ㅠㅠ 소스도 잘 감싸줬다고 생각하는데.. 뭐가 잘못된건지 모르겠어요.. 도와주세요..
답변 1
</ul>
=>
<div style="clear:both"></div>
</ul>
css에서 :after 속성사용하는게 좋습니다만, 일단은 위 코드로 처리 해보세요.
float속성 때문에 높이를 가지지 못한것 때문입니다.
감사합니다^^
답변을 작성하시기 전에 로그인 해주세요.
