화면 크기에 관계없이 div가 같은자리에 떴으면 합니다.
본문
http://wappleedu.com/smart.html 상단 분홍색처럼 메뉴를 구현할건데요 중앙정렬이다보니
화면이 커지거나 줄어들면 중구난방입니다.
방법이 있을까요?
아래는 소스입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>와플에듀</title>
<style type="text/css">
.test {decoration:none; font-family: "나눔고딕";color:#099; font-size:14px; text-align:center; font-weight:bold !important;}
a.test:link { text-decoration:none; text-align:center; font-family: "나눔고딕";color:#090; font-size:14px; font-wieght:bold;}
a.test:visited { }
.test:hover { text-decoration:none;font-family: "나눔고딕";color:#cc0; font-size:14px;
font-wieght:bold;}
a.test:active { }
}
.test1 {decoration:none; font-family: "나눔고딕";color:#099; font-size:14px; text-align:center; font-weight:bold !important;}
#apDiv1 {
position: absolute;
left: 888px;
top: 61px;
width: 162px;
height: 114px;
z-index: 1;
background-color: #FF00FF;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle"><table width="780" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100" ><a href="#"class="test"><center>
<table width="780" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="70" class="test" >유아교육기관<br />
프로그램<div id="apDiv1"></div></td>
<td class="test">숲체험<br />
프로그램</td>
<td class="test">부모참여수업
<br />
체험프로그램</td>
<td class="test">운동회 및
야외<br />
체험프로그램</td>
<td class="test">발표회<br />
의상대여</td>
<td class="test">전국지사</td>
<td class="test">숲속캠핑장</td>
<td class="test">와플샵 </td>
<td class="test">고객지원</td>
</tr>
</table>
</center></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#FFFFFF"><table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="150" valign="top"> </td>
</tr>
<tr>
<td bgcolor="#ff0"><img src="wappleimg/0905/mobile.jpg" alt="" width="780" height="780" usemap="#Main" />
<map name="Main" id="Main">
<area shape="rect" coords="315,92,486,162" href="../../s1-4.html" />
<area shape="rect" coords="497,164,651,273" href="../../s1-1.html" />
<area shape="rect" coords="507,349,727,466" href="http://wappleshop.com" />
<area shape="rect" coords="476,514,631,631" href="../../s1-2.html" />
<area shape="rect" coords="284,600,454,702" href="../../s2-3.html" />
<area shape="rect" coords="105,480,292,581" href="../../blank.html" />
<area shape="rect" coords="53,293,256,403" href="../../s1-3.html" />
<area shape="rect" coords="99,168,318,246" href="http://focam.co.kr" />
<area shape="rect" coords="267,331,486,448" href="../../company01.html" />
</map></td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
답변 2
메뉴를 가운데 정렬로 하시는것 같아서 적어봅니다.
수정내용은 left를 50%로 잡으면 해당 div 가 가운데 정렬로 되는데
div 요소 가로크기의 반만큼 margin의 왼쪽으로 넣어주면
화면크기에 상관없이 가운데 정렬도 됩니다.
#apDiv1 { position: absolute; left: 50%; top: 61px; width: 162px; height: 114px; z-index: 1; background-color: #FF00FF; margin-left:-81px; }
포지션 css클라스로 고정하는방법이 있습니다 ^^
답변을 작성하시기 전에 로그인 해주세요.
