홈페이지, 스타일 문제 인지, 왜이렇게 되는지 잘 모르겠습니다. (깨짐)
로빈아빠님의 출석부 게임을 적용시켜 보았습니다.
설치할필요도 없이, 그냥 단순히 업로드만 하면 땡인 작품이었어요. 너무 간편하게 만들어주셨는데,
홈페이지에 업로드 하고 나서 보니까 아래 이미지처럼 깨져서 나오더라구요,
뭔가 CSS 에서 잘못되서 그런가;; 테이블 폭이 문제인가 .. 생각만 했지 어떻게 고쳐야 될지 엄두가 안나서
이렇게 질문했습니다. (어디서 부터 잘못된건지 실은 잘 모르겠어요 ㅠ_ㅠ;;)

로그인 먼저 하셔야 하는데, 테스트아이디 : test01 비밀번호 : test01 입니다.
사이트 주소는 : http://tf1club.speeds.kr/artools/attendance/attendance.php
깨짐현상을 보이는 attendance.php 소스코드도 필요하실거같아, 첨부해봅니다. 혹시 도움 주실수 없을까요?
<?include_once("./_common.php");include_once("$g4[path]/_head.php"); $_SESSION[game_besu1] = 3000; // 퍼펙트 게임포인트 배수 설정$_SESSION[game_besu2] = 1000; // ±1 게임포인트 배수 설정$_SESSION[game_besu3] = 500; // ±3 게임포인트 배수 설정$_SESSION[game_besu4] = 200; // 기본점수$_SESSION[game_besu5] = -10; // ±3 게임포인트 배수 설정 $_SESSION[game_range1] = 0; // 퍼펙트 게임포인트 배수 설정$_SESSION[game_range2] = 5; // ±1 게임포인트 배수 설정$_SESSION[game_range3] = 20; // ±3 게임포인트 배수 설정$_SESSION[game_range4] = 95; // ±3 게임포인트 배수 설정 // 게임 평균function mb_average($mb_id,$agelevel) { global $g4; $sql = "select count(po_id) as cnt from $g4[point_table] where mb_id='$mb_id' and po_rel_table = '@attendance' and SUBSTRING(po_rel_action,1,1) = '$agelevel' "; $row = sql_fetch($sql); $game_average = $row[cnt]; return $game_average; }//로그인 테이블기준 로그인 여부 체크function mb_loginchk($mb_id) { global $g4; if ($mb_id) { $sql = "select mb_id from $g4[login_table] where mb_id='$mb_id'"; $mb = sql_fetch($sql); if($mb[mb_id]) $message = "접속중"; else $message = ""; return $message; }} ?><li><script language="javascript" src="<?=$g4[path]?>/js/sideview.js"></script><script LANGUAGE="JavaScript">function Title() {document.title="STOP ON 1o0 By Nolan Gendron"; window.setTimeout("Title1();",1);}function Title1() {document.title="STOP ON 10o By Nolan Gendron"; window.setTimeout("Title();",1);}var counter=0;var total_count=0;function Counter1() { window.status="Counter: " + counter; document.game.number.value=counter; counter++; total_count++; Time=window.setTimeout("Counter1();",1); if (counter>=201) { counter=0; }} function Results() { window.clearTimeout(Time); document.game.number.value=counter; document.game.total_count.value=total_count; document.game.submit(); document.getElementById('btn_start').disabled = true; document.getElementById('btn_stop').disabled = true; } </script><style type="text/css"><!--#attendance_font td{ color: #FFFFFF; }.tt1 { font-family: verdana,돋음; font-size: 10px; color: #555555; line-height: 170%; }.test11 { background-color:#222222; border:0px; }--></style> <center> <script language="javascript" src="/flash/viewTitle.js" type="text/javascript"></script><script language="javascript">showTitle("/flash/", "viewTitle.swf", 500, 40, " - - - 출석부 포인트 게임 - - - ", "", "center", "0x00000");</script><BR> Start 버튼을 누르고 100점이 될때 Stop 버튼을 누르면 점수에 따라 출석 포인트가 지급됩니다. 하루에 1번만 가능합니다.</center><table width="700" height=170 border="0" align="center" cellpadding="0" cellspacing="0" background="img/att_base.png" class="tt1"> <tr> <td width="250" style='padding:30 0 0 160' valign=top><span class="tt1"><br><img src='img/ico_medal_a.png' alt='금메달'> 100점에 정확히 맞힐 경우 : <?=number_format($_SESSION[game_besu1]);?>포인트<br><img src='img/ico_medal_b.png' alt='금메달'> ±<?=$_SESSION[game_range2]?>점에 맞힐 경우 : <?=number_format($_SESSION[game_besu2]);?>포인트<br><img src='img/ico_medal_c.png' alt='금메달'> ±<?=$_SESSION[game_range3]?>점에 맞힐 경우 : <?=number_format($_SESSION[game_besu3]);?>포인트<br><img src='img/ico_medal_d.png' alt='금메달'> ±<?=($_SESSION[game_range4]-1)?>점에 맞힐 경우 : <?=number_format($_SESSION[game_besu4]);?>포인트 (기본점수)<br><img src='img/ico_medal_e.png' alt='금메달'> ±<?=$_SESSION[game_range4]?>점 초과해 맞힐 경우 : <?=number_format($_SESSION[game_besu5]);?>포인트 (감점)</span></td></span></td> <td valign="top" width=120 style='padding:30 0 0 0' align=center> <form name="game" action="attendance_update.php" method="post" target='att_update'> <input type=hidden name='total_count' value='0'> <input type=hidden name='start_time' value='<?=$g4['time_ymdhis']?>'> <input class="test11" type="text" name="number" VALUE="0" onFocus="this.blur();" style="font-size: 40;font-family:arial black;width:100;color:white"> <BR> <img id="btn_start" src="img/_start.png" border=0 onClick="Counter1(); counter=0;" style="cursor:hand;"> <input id="btn_stop" type=image src="img/_stop.png" border=0 onClick="Results(); counter=0;"> </form> </td> <td valign="top" align=right style='padding:69 40 0 0'> <table border="0" align="right" cellpadding="0" cellspacing="0"> <tr> <td height="20" align="right"><?=mb_average($member[mb_id],"a");?></td> </tr> <tr> <td height="20" align="right"><?=mb_average($member[mb_id],"b");?></td> </tr> <tr> <td height="20" align="right"><?=mb_average($member[mb_id],"c");?></td> </tr> <tr> <td height="20" align="right"><?=mb_average($member[mb_id],"e");?></td> </tr> </table></td> <td width="25"></td> </tr></table><br /> <? if(!$member[mb_id]) { echo "<center>로그인후 출석 게임이 가능합니다.</center>";}else { $row = sql_fetch("select * from $g4[point_table] where po_rel_table = '@attendance' and mb_id = '$member[mb_id]' order by po_datetime DESC limit 1"); if (!$row[po_id] || $row[po_datetime]<date("Y-m-d 00:00:00")) { echo "<center><B>$member[mb_nick]님</B> 오늘은 출석게임을 하지 않으셨네요? <img src='img/_start.png' align=absmiddle border=0 onClick=\"Counter1(); counter=0;\" style='cursor:hand;'> 버튼을 눌러서 포인트 점수를 올리세요.^^<BR><BR></center>"; } if ($row[po_id]) { echo "<center>마지막 출석 시간:$row[po_datetime] 획득 점수:<B>$row[po_point]</B> 점</center>"; }}?> <table width=100% align=center cellpadding="0" cellspacing="0"><tr height=25 align=center id="attendance_font"> <td width="40" background="img/count_bg.gif"><div style="margin-left:5px;">순서</div></td> <td width="7"><img src="img/count_bg._shodow.gif" width="7" /></td> <td width="80" background="img/board_image_bg.gif">로그인시간</td> <td width="30" background="img/board_image_bg.gif">레벨</td> <td width="100" background="img/board_image_bg.gif">닉네임</td> <td width="" background="img/board_image_bg.gif">접속여부</td> <td width="35" background="img/board_image_bg.gif">메달</td> <td width="35" background="img/board_image_bg.gif">번호</td> <td width="70" background="img/board_image_bg.gif">획득포인트</td> <td width="80" background="img/point_image.gif">총포인트</td></tr><tr> <td height="6" colspan="14" background="img/board_shodow.gif"></td></tr><? $sql = " select * from $g4[point_table] where po_datetime>='".date("Y-m-d 00:00:00")."' and po_rel_table = '@attendance' order by po_datetime";$result = sql_query($sql); $i2=0;for ($i=1; $row=sql_fetch_array($result); $i++) { $mb=sql_fetch("select * from $g4[member_table] where mb_id='$row[mb_id]'"); if (!$is_admin&&$mb[mb_level]>=8) continue; //관리자는 보안상 이유로 않보이게 함 $i2++; $arr2=explode("|",$row[po_rel_action]); $row[number]=$arr2[4]; // 자신이라면 체크 if ($row[mb_id] == $member[mb_id]) $bgcolor = "#FFFFFF"; $mb_nick = get_sideview($mb[mb_id], $mb[mb_nick], $mb[mb_email], $mb[mb_homepage]);// 본명사용시 사용 $mb_name = get_sideview($mb[mb_id], $mb[mb_name], $mb[mb_email], $mb[mb_homepage]); $mb_loginchk = mb_loginchk($mb[mb_id]); $medal=''; $medal_name=''; if ($row[po_rel_action][0]=='a') {$medal='a'; $medal_name='금'; } if ($row[po_rel_action][0]=='b') {$medal='b'; $medal_name='은'; } if ($row[po_rel_action][0]=='c') {$medal='c'; $medal_name='동'; } if ($row[po_rel_action][0]=='d') {$medal='d'; $medal_name='출석'; } if ($row[po_rel_action][0]=='e') {$medal='e'; $medal_name='감점'; }?> <tr bgcolor='<?=$bgcolor?>' onmouseout=this.bgColor='<?=$bgcolor?>' onmouseover=this.bgColor='#f1f1f1'> <td align="center" height=25><div style="margin-left:5px;"><?=$i2?></div></td> <td width="7"></td> <td align="center"><?=substr($mb[mb_today_login],11,8)?></td> <td align="center"><?=$mb[mb_level];?></td> <td align="center"><?=$mb_nick ?></td> <td align="center"><?=$mb_loginchk?></td> <td align="center"><img src="img/ico_medal_<?=$medal?>.png" title='<?=$medal_name?>'></td> <td align="center"><?=$row[number]?></td> <td align="right"><div style="margin-right:15px;"><?=$row[po_point]?></div></td> <td align="right"><div style="margin-right:15px;"><?=number_format($mb[mb_point])?>P</div></td> </tr> <tr><td colspan=14 height=1 bgcolor='#E0E0E0'></td></tr><? } ?></table><iframe style='width:0;height:0' name=att_update></iframe></li><?include_once("$g4[path]/_tail.php");if ($_GET[msg]) echo "<script>alert(\"".urldecode($_GET[msg])."\");</script>";?>
답변 2개 / 댓글 1개
저도 초보라 자세한 상담은 해드릴 수 없지만,
div margin padding position 등에 관한 기본 개념이 서면 혼자서 어느 정도 정렬 해결하실 수 있을겁니다.
저도 홈페이지 수정하다 하도 답답해서 일주일 날 잡고 html과 css를 거의 섭렵했습니다. 아직도 초보지만..ㅎ
http://www.homzzang.com/bbs/board.php?bo_table=html&sca=Style%2FSections
http://www.homzzang.com/bbs/board.php?bo_table=css margin, padding, position 부분
해당 부분의 스타일 아이디나 클래스가 다른 부분과 중복되서 영향을 받나 보네요.
독특하게 바꿔 보세요!!
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.