상태 | 완료 |
---|
안녕하세요, 백성찬님.
한참 삽질을 하다가... 여기와서 질문드려봅니다.
div 태그를 오른쪽 960px 부근에 위치하고 싶습니다.
제 생각을 테이블 태그로 표현하자면... 아래와 같습니다.
<table width=960 align=center ><tr>
<td><table align=right ><tr><td>
<p> 내용 </p><p> 내용 </p>
</td>< /tr>< /table>
</td>< /tr>< /table>
실제 사용되는 코드를 보여드리겠습니다.
HTML
<!-- 로그인 -->
HTML
<div id="acc"> <ul class="account"> <li class="log"> <!--@if($is_logged)--> <a href="./{getUrl("act','dispMemberLogout')}"><img src="./images/default/buttonLogout.gif" width="33" height="5" alt="LOGOUT" /></a> <!--@else--> <a href="./#loginWindow" onclick="jQuery('#loginWindow').css('display','block');" accesskey="L"><img src="./images/default/buttonLogin.gif" width="25" height="5" alt="LOGIN" /></a> <!--@end--> </li> <!--@if(!$is_logged)--> <li class="register"><a href="./{getUrl("act','dispMemberSignUpForm')}"><span>Register</span></a></li> <!--@else--> <li class="profile"> <button type="button" onclick="jQuery('#memberProfile').toggleClass('active');"><span>Profile</span></button> <!-- memberProfile --> <div id="memberProfile" class="memberProfile"> <!-- class="memberProfile" | class="memberProfile active" --> <button type="button" class="close" onclick="jQuery('#memberProfile').toggleClass('active');" accesskey="X"><span>Close profile layer</span></button> <h2 class="authorName">{$logged_info->nick_name}</h2> <ul> <!--@foreach($logged_info->menu_list as $key => $val)--> <li><a href="./{getUrl("act',$key,'member_srl','')}">{Context::getLang($val)}</a></li> <!--@end--> </ul> <button type="button" class="close" onclick="jQuery('#memberProfile').toggleClass('active');" accesskey="X"><span>Close profile layer</span></button> </div> <!-- /memberProfile --> </li> <!--@end--> <li class="language"> <!-- class="language" | class="language open" --> <em class="{$lang_type}"><span>{$lang_supported[$lang_type]}</span></em> <button type="button" class="sLanguage" onclick="jQuery('.language').toggleClass('open'); return false;"><span>Select Language</span></button> <ul class="languageList"> <!--@foreach($lang_supported as $key => $val)--><!--@if($key!= $lang_type)--> <li class="{$key}"><button type="button" onclick="doChangeLangType('{$key}');return false;"><span>{$val}</span></button></li> <!--@end--><!--@end--> </ul> </li> </ul> </div>
그리고 css파일은 다음과 같습니다.
CSS
@charset "utf-8"; /* NHN > UIT Center > Open UI Technology Team > Jeong Chan Myeong(dece24@nhncorp.com) */
CSS
/* acc */ #acc a{ text-decoration:none;} #acc a:hover, #acc a:active, #acc a:focus{ text-decoration:underline;}
CSS
#acc h1{ margin:0; position:relative; top:15px;} #acc h1.noMargin { margin:0; position:relative; left:0; top:0; } #acc h1 a{ display:block; margin:0; float:left; text-decoration:none;} div.black #acc h1 a{ background-position:0 0;} #acc h1 span{ position:relative; width:0; height:0; overflow:hidden; font-size:0; line-height:0; visibility:hidden; }
CSS
//#acc .account{ position:absolute; top:40px; right:0; margin:0; padding:0; z-index:2;} #acc .account{ position:absolute; top:6px; right:0; margin:0; padding:0; z-index:10;} #acc .account li{ position:relative; float:left; list-style:none; background-image:url(../images/account/lineaccVr.gif); background-repeat:no-repeat; background-position:left 4px;} div.black #acc .account li{ background-image:url(../images/account/lineaccVrBlack.gif);} #acc .account li *{ vertical-align:top;} #acc .account li li{ float:none; height:auto; background-image:none;}
어떻게 해야... 위 테이블 태그처럼 구현할 수 있나요?
부탁드립니다.. 꾸벅 (__)
최근 수정일 : 2009-11-13 22:59:20 - 백성찬(白星燦)
acc에 위치를 정해주든지 아니면 오른쪽에 위치한 박스 안에 acc를 넣으면 됩니다.