화면 크기에 관계없이 div가 같은자리에 떴으면 합니다.

화면 크기에 관계없이 div가 같은자리에 떴으면 합니다.

QA

화면 크기에 관계없이 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;
}

 

답변을 작성하시기 전에 로그인 해주세요.
전체 141
QA 내용 검색
filter #div ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT