묻고답하기
css 질문입니다.
2011.01.18 21:57
안녕하세요~ 너무 몰라서... 오늘도 간단한거 같은데 못하고 있습니다..ㅠㅠ
지금 문제는 위에 그림으로 해놨는데요..
모두 레이어 입니다. m1, m2, m3 를 저렇게 배치를 해야하는데요.
m2는 margin:0 auto로 가운데 넣었는데요.
m1이나 m3는 넣으면 저 위치가 아닌 아래쪽에 위치합니다.
예를들면 m1이 minignb 글씨 써진곳에....
이부분을 어떻게 코딩해야 될까요?ㅠ
http://newultra3.hubweb.net/psy
이게 현재 상태 입니다.
위 소스는 아래에 첨부합니다~
도움 부탁드려요~
CSS
/* UI Object */
body{_text-align:center; padding:0; margin:0}
#wrap{width:100%; _width /**/:100%; margin:0;_text-align:left}
#header{width:100%; height:100px; background:url(../images/minignb_bg.gif) repeat-x}
#mini_gnb{ width:900px; height:31px; margin:0 auto; padding:0;}
#container{width:900px;margin:0 auto; border-bottom:2px solid #95d3f0;background-color:#fafafa}
#container:after{display:block; clear:both;content:''}
.snb{float:left;width:200px; height:300px}
#content{float:right;width:690px; text-align:center; padding-top:10px; background-color:#ffffff; padding-left:10px}
#logo { position:absolute; width:150px; height:70px; padding-top:20px}
#footer{width:900px; margin:0 auto; height:100px; text-align:center}
/* //UI Object */
/* snb layout */
.photobox,
.naver_search_rank,
.google_ad { margin:0 1px;}
/* //snb layout */
/* Navigator */
#navigator { margin:0 auto; padding:0; width:96px; height:31px}
#navigator li{ position:relative; float:left; display:inline;}
#navigator li.navicon a{ display:block; float:left; width:48px; height:31px; overflow:hidden;background:url(../images/btn01.gif) no-repeat}
#navigator li.navicon span,
#navigator li.navicon a span{ position:absolute; width:0; height:0; overflow:hidden; visibility:hidden; font-size:0; line-height:0;}
#navigator li.navicon.home a{background-position:left -20px}
#navigator li.navicon.home.active a{background-position:-100px -20px}
#navigator li.navicon.shop a{background-position:-148px -20px}
#navigator li.navicon.shop.active a{background-position:-48px -20px}
/* //Navigator */
/* mini_gnb */
#account { float:right; top:0; margin:0; padding:0; text-align:right;}
#account li {display:inline; list-style:none; padding:0 1px 0 5px;}
/* //mini_gnb */
HTML
<div id="wrap">
<!-- header -->
<div id="header">
<div id="mini_gnb">
<Navi">!--@if($layout_info->Navi == "show")-->
<div id="navigator">
<li class="navicon home<Navi_Opt=='home'">!--@if($layout_info->Navi_Opt=='home')--> active<">!--@end-->"><a href="school" title="홈으로 이동합니다."><span>HOME</span></a></li>
<li class="navicon shop<Navi_Opt=='shop'">!--@if($layout_info->Navi_Opt=='shop')--> active<">!--@end-->"><a href="freeboard" title="샵으로 이동합니다."><span>SHOP</span></a></li>
</div>
<!--@end-->
<div id="account">
<!--@if($logged_info)-->
<is_admin=="Y'>!--@if($logged_info->is_admin=="Y")-->
<li><a href="https://www.google.com/adsense/report/overview" target = "_blank">애드센스</a></li>
<li><a href="{getUrl('','module','admin')}" onClick="window.open(this.href);return false;" >관리</a></li>
<!--@end-->
<li><a href="{getUrl('act','dispMemberLogout')}">로그아웃</a></li>
<li><a href="{getUrl('act',dispMemberInfo,'member_srl','')}">회원정보</a></li>
<!--@else-->
<li><a id="loginbtn" style="cursor:pointer;">Login</a></li>
<li><a href="{getUrl('act','dispMemberSignUpForm')}" title="회원가입">회원가입</a></li>
<!--@end-->
</div>
</div>
댓글 1
-
reon
2011.01.18 22:19
-
스카이피아
2011.01.18 23:09
답변 감사합니다. 멍청한 방법으로 하다보니 두어시간 해도 간단한게안되서 질문남겼는데 바로 아주 간단하게 해결되네요;; 중앙이 네비게이터 왼쪽은 아직없구.. 오른쪽은 account 입니다. 다시한번 감사드립니다~ -
reon
2011.01.18 23:16
잘 해결 되셨다니 저도 기분 좋네요.
일단 적어주신 CSS 내용에는 m1, m2, m3 이런게 없는 관계로 머리굴려 찾는게 머리 아파서 제 나름대로 답변 달아보겠습니다 .ㅋ
그림처럼 m1 가장 왼쪽, m2는 중간, m3는 오른쪽에 나열하고 싶으신거죠?
CSS 부분
----------------------------
.m1 { float:left; width:100px; }
.m2 { float:left; width:100px; }
.m3 { float:left; width:100px; }
#header { clear:both; }
----------------------------
html 부분
-------------------------------
<div class="m1">내용</div>
<div class="m2">내용</div>
<div class="m3">내용</div>
<div id="header">
---------------------------
제가 필요할것 같지도 않은 #header 를 적은 이유는 딴건 없고요.
m1 m2 m3 에서 float:left 속성을 주어 모두 왼쪽 배열을 하면 차례대로 왼쪽으로 질서 있게 붙습니다.
문제는 마지막 m3 에서도 float:left 왼쪽 나열이 되기 때문에 혹시 #header 박스가 왼쪽으로 끌려갈수 있기 때문에
그걸 방지 하기 위해서 위에 객체의 float: 의 영향을 안받도록 하는 clear:both 를 주기 위해서 적었어요.
m3 바로 다음에 올 박스가 header가 될수도 있고 다른게 될수도 있겠죠...^^