레이어 질문입니다. 이틀째 못풀어 내고 있습니다.
아래는 포토샵에서 잡은 디자인입니다.
얇은 붉은 선은 슬라이스이며 굵은 붉은선은 레이어를 올릴 부분입니다.
굵은 붉은색 레이어는 주메뉴(플래쉬)이며 아래에 다른<td>에 플래쉬를 넣을 생각입니다.
(일단은 코딩 전에 이미지로 먼저 올려 놓고 테스트중입니다.)
문제는 이 싸이트가 중앙 정렬이라 레이어를 relative로 올려야 하는데
<td>안쪽에 relative로 레이어를 올리니 테이블이 밀립니다. 전 위에 올리길 원하는데
밀리기만해서 난감합니다. 도와 주십시오 ㅠㅠ
아래는 소스입니다.
---------------------------------------------------------------------------------------
<?
include_once("./_common.php");
include_once("$g4[path]/lib/latest.lib.php");
include_once("$g4[path]/lib/outlogin.lib.php");
include_once("$g4[path]/head.sub.php");
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<title>오토XXX</title>
<!--플래시 함수-->
<script language="javascript" src="../js/flashShow.js"></script>
<!--플래시 함수-->
<link href="../css/style_alp.css" rel="stylesheet" type="text/css">
<!-- PNG24 투명하게하는 코드 시작, 이미지 출력 소스 끝에 class="png24" 넣어줘야함-->
<script language="javascript">
<!--
function setPng24(obj) {
obj.width=obj.height=1;
obj.className=obj.className.replace(/\bpng24\b/i,'');
obj.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
obj.src='';
return '';
}
//-->
</script>
<style type="text/css">
.png24 {
tmp:expression(setPng24(this));
}
.png241 { tmp:expression(setPng24(this));
}
</style>
<!-- PNG24 투명하게하는 코드 끝 -->
<style type="text/css">
text { line-spacing:-2px }
</style>
<style type="text/css">
<!--
.style4 {font-family: dotum; font-size: 11px; font-weight: bold; color: #999999; }
.style10 {
font-family: dotum;
font-size: 11px;
color: #999999;
}
.style12 {font-family: dotum}
.png242 { tmp:expression(setPng24(this));
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="left" valign="top">
<td background="../images/top_bg.gif"> </td>
<td width="990" background="../images/top_bg.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="80" align="left" valign="top"> </td>
<td width="110" align="left" valign="top"><img src="../images/logo.gif" width="110" height="148"></td>
<td align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="73" align="left" valign="top"> </td>
</tr>
<tr>
<td align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="Layer1" style="position:relative; left:0px; top:0px; width:800px; height:350px; z-index:10"><img src="../images/menu.png" width="800" height="350" class="png24"></div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td background="../images/top_bg.gif"> </td>
</tr>
<tr align="left" valign="top">
<td> </td>
<td width="990"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top"><img src="../images/main_fla.jpg" width="990" height="345"></td>
</tr>
<tr>
<td align="left" valign="top"><img src="../images/main_content_top.gif" width="990" height="22"></td>
</tr>
<tr>
<td align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="left" valign="top">
<td width="10"> </td>
<td> </td>
<td width="10"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="30" align="left" valign="top"> </td>
</tr>
</table></td>
<td> </td>
</tr>
<tr align="left" valign="top">
<td> </td>
<td width="990" height="94"><img src="../images/copy.gif" width="990" height="94"></td>
<td> </td>
</tr>
</table>
</body>
</html>
댓글 2개
바로 응용이 가능할 것 입니다.
<div style="position:relative; top:0px; left:0px; width:200px; height:200px;">
<div style='position:absolute; top:0px; left:0px; z-index:1;'>사랑하는 내님아</div>
<div style='position:absolute; top:0px; left:0px; z-index:2;'>으히히히히히</div>
<div style='position:absolute; top:0px; left:0px; z-index:3;'>ㅋㅋㅋㅋㅋㅋ</div>
<div style='position:absolute; top:0px; left:0px; z-index:4;'>ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ</div>
</div>