2009.11.13 22:06:02 (*.156.51.20)
6,429
상태 | 완료 |
---|
안녕하세요, 백성찬님.
한참 삽질을 하다가... 여기와서 질문드려봅니다.
div 태그를 오른쪽 960px 부근에 위치하고 싶습니다.
제 생각을 테이블 태그로 표현하자면... 아래와 같습니다.
<table width=960 align=center ><tr>
<td><table align=right ><tr><td>
<p> 내용 </p><p> 내용 </p>
</td>< /tr>< /table>
</td>< /tr>< /table>
실제 사용되는 코드를 보여드리겠습니다.
<!-- 로그인 -->
<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>
<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파일은 다음과 같습니다.
@charset "utf-8";
/* NHN > UIT Center > Open UI Technology Team > Jeong Chan Myeong(dece24@nhncorp.com) */
/* NHN > UIT Center > Open UI Technology Team > Jeong Chan Myeong(dece24@nhncorp.com) */
/* acc */
#acc a{ text-decoration:none;}
#acc a:hover,
#acc a:active,
#acc a:focus{ text-decoration:underline;}
#acc a{ text-decoration:none;}
#acc a:hover,
#acc a:active,
#acc a:focus{ text-decoration:underline;}
#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; }
#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; }
//#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;}
#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를 넣으면 됩니다.