창크기에 따라 자리가 밀리는 콘텐츠 질문
본문
<div id="header"><!--header-->
<div class="border"></div>
<div class="mn01"><!--mn01-->
<div class="info"> <!--information-->
<ul class="info_ul1"> <!--info_ul1-->
<li><a href="#" onclick="AddFavorite('index.html');"><span class="acc">★</span>즐겨찾기</a></li>
</ul> <!--info_ul1-->
<ul class="info_ul2"> <!--info_li1-->
<!--/if_login/-->
<!--<li class="logout"><a href="#">로그아웃</a></li>-->
<!--/else/-->
<li class="login"><a href="<!--/link_login/-->">로그인</a></li>
<!--/end_if/-->
<li class="bd01">|</li>
<li><a href="<!--/link_join/-->">회원가입</a></li>
<li class="bd01">|</li>
<li class="l_li1">
<a href="#">간편로그인▼</a>
<table class="info_table01" width:"100%" border:"0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td style=""class="info_box01" valign="top">
<dl class="info_dl info_dl1">
<dd><a href="<!--/link_login_naver/-->">네이버로그인</a></dd>
<dd><a href="<!--/link_login_kakao/-->">카카오로그인</a></dd>
<dd><a href="<!--/link_login_facebook/-->">페이스북로그인</a></dd>
</dl>
</td>
</tr>
</table>
</li>
<l class="bd01"i>|</li>
<li class="l_li2">
<a href="<!--/link_mypage/-->">마이페이지▼</a>
<table class="info_table02" width:"100%" border:"0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td style=""class="info_box02" valign="top"s>
<dl class="info_dl info_dl2">
<dd><a href="<!--/link_order/-->">구매 배송 조회</a></dd>
<dd><a href="#">장바구니</a></dd>
<dd><a href="#">베베멤버쉽</a></dd>
</dl>
</td>
</tr>
</table>
</li>
<li class="bd01">|</li>
<li class="l_li3">
<a href="#">고객센터▼</a>
<table class="info_table03" width:"100%" border:"0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td style=class="info_box03" valign="top">
<dl class="info_dl info_dl3">
<dd><a href="#">자주묻는질문</a></dd>
<dd><a href="#">1:1문의하기</a></dd>
<dd><a href="#">공지사항</a></dd>
</dl>
</td>
</tr>
</table>
</li>
<li class="bd01">|</li>
<li><a href="#">판매자로그인</a></li>
</ul><!--info_ul2-->
</div> <!--information-->
/*header*/
#header {width:100%; height:265px;
margin: 0 auto;
/*border-bottom: 1px solid #eee; */
background-color:#FFDD00;}
#header:after{content:""; display:block; clear:both;}
.border{border-bottom: 1px solid #F4CD00; position: absolute; width:100%; top:30px;}
.mn01{width: 1100px;
height: 230px;
margin: 0 auto;
background-color:#FFDD00;}
.info_ul1{position:absolute; padding-left: 2px; top:5px;}
.info_ul1 li{display: inline-block; }
.info_ul1 li a{font-size:11px; color:#333; }
.info_ul1 li a:hover{border-bottom: 1px solid #666;}
.acc{color:#80BE25; font-size: 13px;}
.info_ul2{float:right;
position: absolute;
left:1065px;
top:5px;
z-index: 9999;}
.info_ul2 li {display: inline-block;
line-height: 11px;
text-align: center;}
.info_ul2 li a{font-size:12px; color:#333;}
.info_ul2 li a:hover{border-bottom: 1px solid #333;}
.login a{color:gray;}
.login a:hover{color:#0074A4; border-bottom:1px solid #0074A4 !important;}
.info_dl{background-color:white;
border:1px solid #666;
padding: 7px 0 7px 7px;
width:100%; height:100%;
margin-top: 10px;}
.info_dl{text-align: left;}
.info_table01{position: absolute; right:214px;}
.info_table02{position: absolute; right:138px;}
.info_table03{position: absolute; right:71px;}
.info_dl1 a, .info_dl2 a, .info_dl3 a {font-size:11px;
color:gray;
text-align: center;
line-height: 18px;}
.info_dl{display:none;}
==================================================================================
<div id="fixed">
<ul>
<li><img src="image/main/kakao5.jpg"></li>
<li><img src="image/main/tel.jpg"></li>
<li><img src="image/main/bank3.jpg"></li>
<li><img src="image/main/nt3.png"></li>
</ul>
</div>
<div id="top">
<a href="#"><p>▲</p><p>TOP</p></a>
</div>
#section{width:100%; height:100%; background-color:#fff;}
#fixed{position:fixed; margin: auto; top:33%; left:15%;}
#fixed ul{/*padding: 30px 0 0px 285px;*/ }
#fixed ul li{padding-bottom: 10px;}
#top{position:fixed;
right:17%;
top:90%;}
#top a{font-size: 14px;
color:white;
font-weight:bold;
color:#0074A4;
text-align: center;}
#top{background-image: url(/image/main/top.jpg);}
안녕하세요
인터넷 창을 작게하면 로그인 로그아웃 등 글씨가 밀려움직이고
픽시드를 준 따라다니는 콘텐츠도 창 크기에 따라 자리를 자꾸 이동하는데
안그러게 하려면 어떻게 해야하나요? ㅠㅠ 창크기를 최대로 화면에 맞췄을때만 원하는 대로 나오고
창을 작게하거나 화면을 확대/축소해도 이동하네요 ㅠㅠ 어떤 게 문제인지 알려주세요 ㅠㅠㅠ
답변 2
position:absolute 를 저런식으로 사용하시면 창크기에 따라 당연히 틀어질 수 밖에 없습니다.
1. position:absolute 상위 엘리먼트의 크기를 되도록 고정시키는게 좋을 듯 하구요,
2. 레이아웃에 따라 position:absolute의 위치를 left로 포지션 잡을지 right로 포지션 잡을지 고려하시고
3. fixed의 레이아웃이 어떤지 모르겠는데 top이나 left를 %에서 px로 변경 가능하면 그렇게 처리하시는게 좋을 듯 합니다.
4. 창크기에 따라 다른 px값이나 %값을 주고 싶으시면 css media query 로 검색해보시고 반응형으로 작업해주시는게 좋을 듯 합니다.
안녕하세요. 인아이디어입니다.
혹시 URL 주소를 알 수 있을까요 ?
해당 소스만으로는 확인하기가 어렵습니다 :(