플록님께 급한 질문입니다...^^ > 그누4 질문답변

그누4 질문답변

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

플록님께 급한 질문입니다...^^ 정보

플록님께 급한 질문입니다...^^

본문

플록님께 급한 질문입니다..^^
 
지난번 많은 도움을 받았던 질문 [ http://sir.co.kr/bbs/board.php?bo_table=g4_qa&wr_id=57058 ]에서,
IE에서는 마지막 메뉴가 줄바꿈하고..
1_copy1.gif
 
파폭에서도 마지막메뉴가 줄바꿈 하지만..
레이어메뉴위치가 위로 올라가버리네요..
2_copy.gif
 
또다른 사이트의 경우 IE는 이상없는데..
파폭에서만 레이어메뉴가 완전히 상단으로 올라가 버립니다..
3.gif
 
두사이트 모두 아래 소스를 사용합니다..
레이어메뉴 위치를 어떻게 잡아야 될지 도와주세요..
 
=====================================
플록님의  gb_ypSlideRF.php 중에서..
=====================================
~~

$list = array();

// 위 에서 명시한 그룹외에 제외시키고자 하는 그룹을 수동으로 추가
$exc = "('그룹아이디1', '그룹아이디2', '그룹아이디3')";

$sql= "select G.gr_id, G.gr_2, G.gr_subject, B.bo_use_category, B.bo_category_list, B.bo_new, B.bo_use_search, B.bo_7, B.bo_table, substring_index( bo_subject, ';', 1) bo_subject from $g4[group_table] G inner join $g4[board_table] B using (gr_id)  where G.gr_1 > 0 and G.gr_id not in {$exc} and B.bo_order_search < $menu_order order by bo_order_search ";

$result = sql_query($sql);
for ($i=0; $row = sql_fetch_array($result); $i++) {

  $list[$row['gr_id']]['gr_id'] = $row['gr_id'];
  $list[$row['gr_id']]['gr_subject'] = $row['gr_subject'];
  $list[$row['gr_id']]['gr_2'] = $row['gr_2'];//gr_2 특정그룹에 대한 별도의 링크

  $list[$row['gr_id']]['bbs'][] = array( 'bo_table'=> $row['bo_table'], 'bo_subject'=>$row['bo_subject'], 'bo_use_category'=>$row['bo_use_category'], 'bo_new'=>$row['bo_new'], 'bo_7'=> $row['bo_7'], 'sca'=>explode("|", $row['bo_category_list']));//bo_7 게시판 링크
}

// 그룹별 서브메뉴 개별 환경설정시 아래를 반드시 참고해야 합니다.
// 다양한 옵션을 이용하려면 이 개별 환경설정을 사용해야 합니다.
// 아래 세줄의 주석을 풀고 메뉴가 링크된 페이지로 가서 그룹 배열값을 얻는다.
//foreach( $list as $key => $value)
//$grId[] = $value['gr_id']; //분류 구분
//print_r2 ($grId);
// 배열값을 얻은후 다시 주석처리 합니다.
?>
<script language="javascript">
//###### 그룹별 서브메뉴 개별 환경설정 시작
// 일괄 환경설정시 아래 모두 주석처리합니다.
// 위에서 얻은 그룹 배열값을 참고해서 그룹별 서브메뉴의 시작위치,x좌표,y좌표,너비,높이만 설정
//  var <?=$grId[0]?> = new ypSlideOutMenu("<?=$grId[0]?>", "right", 0, 1, 122, 105)
//  var <?=$grId[1]?> = new ypSlideOutMenu("<?=$grId[1]?>", "up", 0, 1, 122, 147)
//  var <?=$grId[2]?> = new ypSlideOutMenu("<?=$grId[2]?>", "down", 0, 1, 122, 308)
//###### 개별 환경설정 끝

//###### 전체그룹 서브메뉴 일괄 환경설정 시작
//# 개별 환경설정시 모두 주석처리합니다.
//# 가장 게시판이 많은 그룹을 기준으로 높이를 설정하면 됩니다.
//# 서브레이어 기본영역은 투명처리되어 보이지 않으므로 약간 넉넉하게 잡아줍니다.

<?
//일괄설정 시작
foreach( $list as $value) {
//------------------------- 서브메뉴 아이디,액션,x좌표,y좌표,너비,높이만 설정
?>
  var <?=$value['gr_id']?> = new ypSlideOutMenu("<?=$value['gr_id']?>", "down", 0, 2, 122, 400);
<?
}
//일괄설정 끝
?>
  ypSlideOutMenu.writeCSS();
</script><?

//$gBtnpath = "이미지 폴더 경로";
$gBtnpath = "$g4[path]/images/top_menu";/* 그룹 버튼 이미지 폴더*/
if (is_dir($gBtnpath)) {
?><div style="dispaly:none" onLoad="MM_preloadImages('<? foreach( $list as $key=> $value) { echo"{$gBtnpath}/{$key}_off','{$gBtnpath}/{$key}_on')";}?>"></div><?
}

// ## group
//$menu_size= count( $list);
foreach( $list as $key=> $value) {

  $gSubject = ($key == $gr_id)?"<span style='font-weight:bold; color:#45436c;'>":"<span style='font-weight:bold;'>";
  $gSubject .= cut_str(get_text($value['gr_subject']),20,"") . "</span>";
  //수동 링크 그룹은 gr_2 필드에 전체 url 입력
  $gLink = (!empty($value['gr_2']))?$value['gr_2']:$g4['path'].'/'.'group.php?gr_id=' .$key;
  $gBtn = ($key == $gr_id)?$key. "_on.gif":$key. "_off.gif";

  ?><div id='groupMenu'><?

  if (!is_dir($gBtnpath)) {/* 이미지 폴더가 없다면 텍스트 스타일(기본) */
    ?><span id='<?=$key?>' class='grTsub'><a href='<?=$gLink?>' onmouseover="ypSlideOutMenu.showMenu('<?=$key?>')" onmouseout="ypSlideOutMenu.hideMenu('<?=$group['gr_id']?>')"><?=$gSubject?></a></span><?
    }
    else {
      /* 이미지 폴더가 있다면 이미지로 표시(옵션)
      * 기본 이미지 - 그룹아이디_off.gif *
      * 롤오버 이미지 - 그룹아이디_on.gif */
      ?><span id='<?=$key?>' class='grIsub'><a href='<?=$gLink?>' onmouseover="ypSlideOutMenu.showMenu('<?=$key?>');" onmouseout="ypSlideOutMenu.hideMenu('<?=$key?>')" class='groupName'><img src="<?=$gBtnpath?>/<?=$gBtn?>" width="110" height="30" border=0 name="<?=$key?>" alt="<?=$key?>"></a></span><?
    }

    ?><div id='boardDiv'>
    <div id="<?=$key?>Container">
    <div id="<?=$key?>Content" class="boardLayer"><?
    // # board       
    foreach( $value['bbs'] as $bbs) { 

        $bSubject = ($bbs['bo_table'] == $bo_table)?"<span style='font-weight:bold; color:red;'>":"<span>";
        $bSubject .= cut_str(get_text($bbs['bo_subject']),20,"…") . "</span>";
        //특정 게시판 링크는 bo_7 필드에 전체 url 입력한다. 나머지 게시판의 링크는 목록으로..
        $bLink = (!empty($bbs['bo_7']))?$bbs['bo_7']:$g4['bbs_path'].'/'.'board.php?bo_table=' .$bbs['bo_table'];

    ?><div class='boardSubject'><a href="<?=$bLink?>" class='boardName'><?=$bSubject?></a></div><?

    }

    ?></div></div></div>
    </div><?// group end
}//foreach 주메뉴 끝
 
?></div><!-- global end -->
<div style='clear: both;'></div><!-- 메뉴끝 줄 바꿈, 겹침 방지 -->
<?//print_r2 ($list);?>

댓글 전체

x좌표,y좌표가 동일하게 지정된 경우에도 브라우저에 따라 다르게 올라온다면 스타일에서 상위 영역의 설정을 1차적으로 점검해봐야 할것 같습니다.

그외 ie에서는 width, height값에 padding, border 값등을 더한 값을 주어야 하는점도 참고하세요.
일례를 들자면..
#aaa {
    width: 900px;
    padding: 0;
    margin: 0 auto;
    text-align: left;
}
/*aaa ie 전용태크 - ie에서는 width, height값에 padding, border 값등을 더한 값을 주어야 한다 */
* html #aaa {
    width: 910px;
}
이런식으로 ie전용태그를 추가로 넣어주셔야 합니다.

#aaa 자신은 마진,패딩값이 0 이더라도 이에 종속된 하위(내부) 영역에 마진, 패딩값이 존재하는 영역이 있다면 반드시 그 값을 더한 값을 갖는 ie전용태그를 추가해주세요.

투명처리된 영역이라면 너비,높이값에 약간의 여유를 주는 편법도 있긴합니다만,
디자인된 영역이라면 위처럼 정확히 맞춰주셔야 합니다.
플록님께 감사드리며..

스타일에서 수정되네요..^^..

~~

a.groupName { /*그룹제목 스타일*/
padding-top:0px;
color:green;
font-weight:bold;
height:110px;
text-align:center;
cursor:pointer;
display:block; /*포인터 영역 확대*/
}

위에서 기존 height 값이 25px인데.. 이부분을 실제 이미지 사이즈와같게 맞추니
익스랑 파폭에서 이상없이 작동됩니다..^^
쪽지로 질문하신 부분은 아래 링크를 참조하시면 충분히 해결 가능하시리라 봅니다.
http://www.sir.co.kr/bbs/board.php?bo_table=pl_css&wr_id=153
눈여겨 보실 부분은 float 속성입니다.
float 속성은 none, left, right 만 올 수 있습니다.

단편적인 예를 하나 들자면 같은 레벨에서 position 속성을 규정하지 않고  float:left;값을 갖는 영역을 쭈욱 나열하면 왼쪽부터 영역이 나오는 순서대로 순차적으로 수평 나열됩니다.
이때 줄바꿈을 하고 싶다면 clear:both; 속성을 갖는 영역을 원하는 위치에 하나 넣어주면 되구요.
단순한 문제인데 설명하려니 조금 어렵네요.

CSS레퍼런스(웹플&웹디에 있음)를 다운 받아서 익히시면 많은 도움이 되실듯 합니다.
테이블이 갖고있는 평면적인 관점에서 탈피하는 기회가 되셨으면 좋겠습니다.
전체 66,554 |RSS
그누4 질문답변 내용 검색

회원로그인

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