홈페이지, 스타일 문제 인지, 왜이렇게 되는지 잘 모르겠습니다. (깨짐)
본문
로빈아빠님의 출석부 게임을 적용시켜 보았습니다.
설치할필요도 없이, 그냥 단순히 업로드만 하면 땡인 작품이었어요. 너무 간편하게 만들어주셨는데,
홈페이지에 업로드 하고 나서 보니까 아래 이미지처럼 깨져서 나오더라구요,
뭔가 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
저도 초보라 자세한 상담은 해드릴 수 없지만,
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 부분
해당 부분의 스타일 아이디나 클래스가 다른 부분과 중복되서 영향을 받나 보네요.
독특하게 바꿔 보세요!!
attend.php 안에 내용 스타일만 아무거나 바꾸면 되나요?
답변을 작성하시기 전에 로그인 해주세요.
