묻고답하기
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
지긋지긋한 중간 정렬 -_-;;
2009.01.28 00:05
전 왜 맨날 중간정렬에서 헤맬까요 ㅠ
default.css
layout.html
적용된 사이트 입니다. www.earthhero.me/q2 입니다.
메뉴가 중간 정렬이 안되요 ㅠ. 도움을 요청하여 봅니다.
개념이 아직 확립이 안됐나봐요 ㅠ
default.css
/* 상단 메뉴 영역 및 관련된 버튼 스타일 */ #topMenuBox { float:left; width:1020px; height:40px; background:url("../images/top_menu_bg.gif") no-repeat left top; text-align:center;} #menu { text-align:center; width:1020px; list-style:none; margin:0 auto; padding:0;} #menu * {margin:0; padding:0;} /* 전체적인글씨색 */ #menu a {display:block; color:#000; text-decoration:none; clear:both;} /* 1차메뉴 가로간격 */ #menu li {position:relative; float:left; margin-right:2px;} /* 1,2차메뉴 세로간격 */ #menu ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none;} /* 2,3,4차메뉴 설정 */ #menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:113px; margin:0;} #menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1;} #menu ul li a:hover {background-color:#c5c5c5;} /* 2,3,4차메뉴 가로간격 (left를"2,3,4차메뉴 설정" width값이랑 같이 한다) */ #menu ul ul {left:113px; top:1px;} /* 1차메뉴 설정 */ #menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url("../images/header.gif") no-repeat left top; width:100px;} #menu .menulink:hover, ul.menu .menuhover {background:url("../images/header_over.gif") no-repeat left top;} #menu .sub {background:url("../images/arrow.gif") 136px 8px no-repeat;} #menu .topline {border-top:1px; solid #aaa;}
layout.html
<!-- 상단 메뉴 --> <div id="topMenuBox"> <ul class="menu" id="menu"> <!--@foreach($top_menu->list as $key1 => $val1)--><!--@if($val1['text'])--> <!--@if($val1['selected'])--> {@ $menu_1st = $val1 } <!--@end--> <li <!--@if($val1['selected'])-->class="on"<!--@end-->><a href="{$val1['href']}" <!--@if($val1['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->class="menulink">{$val1['text']}</a>
<!--@if($val1['list'])--> <ul><!--@foreach($val1['list'] as $key2 => $val2)--><!--@if($val2['text'])--> <li <!--@if($val2['selected'])-->class="on"<!--@end-->><a href="{$val2['href']}" <!--@if($val2['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->class="sub">{$val2['text']}</a> <!--@if($val2['list'])--> <ul><!--@foreach($val2['list'] as $key3 => $val3)--><!--@if($val3['text'])--> <li <!--@if($val3['selected'])-->class="on"<!--@end-->><a href="{$val3['href']}" <!--@if($val3['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->class="topline">{$val3['text']}</a> <!--@if($val3['list'])--> <ul><!--@foreach($val3['list'] as $key4 => $val4)--><!--@if($val4['text'])--> <li <!--@if($val4['selected'])-->class="on"<!--@end-->><a href="{$val4['href']}" <!--@if($val4['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val4['text']}</a> </li><!--@end--><!--@end--> </ul><!--@end--> </li><!--@end--><!--@end--> </ul><!--@end--> </li><!--@end--><!--@end--> </ul><!--@end--> </li><!--@end--><!--@end--> </ul> </div>
적용된 사이트 입니다. www.earthhero.me/q2 입니다.
메뉴가 중간 정렬이 안되요 ㅠ. 도움을 요청하여 봅니다.
개념이 아직 확립이 안됐나봐요 ㅠ
댓글 7
-
궁금이2
2009.01.28 02:54
css에서 #topMenuBox { float:left; --> center로 수정하시면 되지 않을까요... -
......
2009.01.28 09:48
float: center;라는건 없습니다. -
궁금이2
2009.01.28 10:11
음냐... 섣부른 댓글을 달았군요... 초보이다보니 ^^;
아랫글로 공부하겠습니다. 고맙습니다. -
......
2009.01.28 09:53
가장 좋은 방법은...
ul부분을 감싸는 div의 포지셔닝을 relative로 설정해주시고 flaot를 지워주세요.
그다음 ul부분의 float를 놔둔채 포지셔닝을 absolute로 지정해주시고요.
그다음 top과 left를 이용하여 위치조정을 하면 될겁니다.
float:left가 있을경우 마진을 auto로 설정해도 가운데 정렬을 못합니다. ㅎㅎ
top과 left를 사용하여 직접 값을 넣어서 그냥 가운데로 맞춰주세요. ㅎ -
earthhero.me
2009.01.29 23:49
결국은 손을 대야하는군요. ^^; 메뉴를 많이 넣으면 자동으로 중앙 정렬을 하게끔 하려했는데
답변 감사합니다. ^^ -
우유가짱
2009.01.28 11:01
topMenuBox 의 width:auto;로 주고 margin:0 auto; 로 하면 어떨까요? float은 빼구오. -
......
2009.01.28 11:25
width엔 auto가 없습니다.
넓이 값을 적어주지 않았을 경우 100%로 인식합니다.
그리고 마진이나 패딩값이 있을경우 그부분까지 합산해서 100%로 인식하고요.