플록님께 급한 질문입니다...^^ 정보
플록님께 급한 질문입니다...^^본문
플록님께 급한 질문입니다..^^
지난번 많은 도움을 받았던 질문 [ http://sir.co.kr/bbs/board.php?bo_table=g4_qa&wr_id=57058 ]에서,
IE에서는 마지막 메뉴가 줄바꿈하고..

파폭에서도 마지막메뉴가 줄바꿈 하지만..
레이어메뉴위치가 위로 올라가버리네요..

또다른 사이트의 경우 IE는 이상없는데..
파폭에서만 레이어메뉴가 완전히 상단으로 올라가 버립니다..

두사이트 모두 아래 소스를 사용합니다..
레이어메뉴 위치를 어떻게 잡아야 될지 도와주세요..
=====================================
플록님의 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);?>
~~
$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전용태그를 추가해주세요.
투명처리된 영역이라면 너비,높이값에 약간의 여유를 주는 편법도 있긴합니다만,
디자인된 영역이라면 위처럼 정확히 맞춰주셔야 합니다.
그외 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인데.. 이부분을 실제 이미지 사이즈와같게 맞추니
익스랑 파폭에서 이상없이 작동됩니다..^^
스타일에서 수정되네요..^^..
~~
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레퍼런스(웹플&웹디에 있음)를 다운 받아서 익히시면 많은 도움이 되실듯 합니다.
테이블이 갖고있는 평면적인 관점에서 탈피하는 기회가 되셨으면 좋겠습니다.
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레퍼런스(웹플&웹디에 있음)를 다운 받아서 익히시면 많은 도움이 되실듯 합니다.
테이블이 갖고있는 평면적인 관점에서 탈피하는 기회가 되셨으면 좋겠습니다.
주말엔 CSS공부많이해야 겠네요..
감사드립니다..^^
감사드립니다..^^