묻고답하기
메인메뉴를 왼쪽정렬이 아닌 중앙정렬로 할려면...?
2008.02.02 06:07
[선행버전] 제로보드XE beta ver 0.2.9을 사용중에 있습니다.
메인메뉴를 왼쪽정렬이 아닌 중앙정렬로 할려면 해당레이아웃의 CSS파일의
어느부분을 어떻게 변경해야 하는지 알고 싶군요.
고수님들의 한수 가르침을 받고 싶습니다.
새해 복많이 받으시길 바랍니다.
메인메뉴
← 왼쪽정렬
메인메뉴
← 중앙정렬 →
댓글 19
-
LeagueON
2008.02.03 06:02
-
googlexe
2008.02.03 13:27
/zbxe/layouts/xe_official/css/default.css파일에서
수정해야 할부분이 아래 파란색 부분에 해당되는것 같은데
어떻게 해야하는지 자세히좀 부탁드려도 될까요?
제가 초보라서 리그온님께서 작성해놓으신 게시글을 전부읽고나서
포함된 댓글내용까지 필요한 부분을 따라 수정을 해보았지만
여전히 해결은 안되더군요.
임의로 마진을 일정부분 정하여 대략적으로 중앙정렬처럼 할수는 있겠지만
메뉴가 늘어날때마다 변경해야하는 불편함도 있고 해서 부탁을 드려봅니다.
#gnb { position:absolute; top:82px; left:0; height:38px; overflow:hidden; white-space:nowrap; margin-bottom:10px;} -
2008.02.04 12:50
#gnb는 수정하실 필요 없구요. 따로 클래스를 하나 만들어서(예를들어 gnbBody라고 하지요) 그 속성을 LEAGUE님 말씀처럼 margin: 0 auto;로 주신후에 layout.html에 메뉴선언한 부분(다시말해서 아이디 이름이 gnb로 시작하는 부분)바로 위에,
<div class="gnbBody">로 해서 감싸주시면 된다는 뚯입니다. ^^ -
googlexe
2008.02.04 17:26
답변주셔서 감사드립니다.
아래 default.css파일과 layout.html 파일의 빨간색부분이 말씀 하신 것 처럼 추가로 삽입한 부분입니다.
안타깝게도 테스트한 결과 별다른 변화없이 좌측정렬 그대로 입니다.
제가 잘못 이해하여 적용한 것인지요?
한번 살펴봐 주시고 잘못되어 있으면 구체적으로 수정을 부탁을 드리고 싶습니다.
현재 저는 제로보드에서 제공하고있는 xe_official 기본 레이아웃을 사용하고 있으며
[선행버전] 제로보드XE beta ver 0.2.9을 사용중에 있습니다.
--------------------------------------------------
/zbxe/layouts/xe_official/css/default.css
--------------------------------------------------
#gnbBody { margin: 0 auto;}
#gnb { position:absolute; top:82px; height:38px; overflow:hidden; white-space:nowrap; margin-bottom:10px;}
--------------------------------------------------
/zbxe/layouts/xe_official/layout.html
--------------------------------------------------
<!--GNB-->
<div class="gnbBody">
<ul id="gnb">
<!-- main_menu 1차 시작 -->
<!--@foreach($main_menu->list as $key => $val)--><!--@if($val['link'])-->
<!--@if($val['selected'])-->
{@ $menu_1st = $val }
<!--@end--><li <!--@if($val['selected'])-->class="on"<!--@end-->><a href="{$val['href']}" <!--@if($val['open_window']=='Y')-->onclick="window.open(this.href);return false;"<!--@end-->>{$val['link']}</a></li>
<!--@end--><!--@end-->
<!-- main_menu 1차 끝 -->
</ul> </div>
<!--//GNB--> -
쿠로쿠마
2008.02.04 21:06
(1)일단 적어주신 소스를 보면 gnbBody가 css에서는 클래스로 정의되어 있는데 layout.html 에서는 ID로 정의되어 있다는 점이 우선 틀렸습니다.
(2)CSS의 gnb에서 position이 absolute로 적용되게 되면 상위의 auto적용이 무시됩니다. 그러므로, 이부분을 gnbBody로 옴겨놓으세요.
(3)그다음이 gnb의 하위부분을 중앙으로 모아야 함으로 gnb의 margin 속성중 좌우를 auto로 해줍니다.
이정도면 아마도 확실히 이해하셨을줄 아나 확인겸 위의 css의잘못된부분을 고친 css를 첨부합니다. ^______^=
.gnbBody { position:absolute; top:82px; margin: 0 auto;}
#gnb { height:38px; overflow:hidden; white-space:nowrap; margin-bottom:10px; margin: 0 auto 10px auto;} -
쿠로쿠마
2008.02.04 21:11
아!! gnbBody에서 absolute로 되어있으니 margin:0 auto는 삭제하셔도 됩니다. 있어도 관계는 없으나 필요없는 코드는 삭제하는게 보기 좋겠죠? ^______^;
-
googlexe
2008.02.04 21:24
쿠로쿠마님~답변주셔서 감사드립니다.
말씀주신대로 테스트를 하였습니다.
이번에는 상단좌측에 메뉴가 붙어서 나오더군요.
왜그러는 것일까요? -
쿠로쿠마
2008.02.04 22:23
아까 위에서 제일먼저 지적한 (1)번을 제대로 고치셨는지요?
gnbBody를 layout.html에서 class로 선언하셨다면 css 에선 반드시 .gnbBody로 선언하셔야 하구요, layout.html에서 ID로 선언하셨다면 css 에선 반드시 #gnbBody로 선언하셔야 합니다. 위의 현상은 gnbBody의 속성이 적용되지 않아서 생기는 현상입니다.
다시한번 화이팅~~!! ^_____^; -
googlexe
2008.02.05 08:06
답변주셔서 거듭 감사드립니다.
수정부분을 켑춰하여 이미지로 올립니다.
layout.html파일 수정부분입니다.
default.css파일 수정부분입니다.2개의 파일 첨부해 올립니다.
파일을 직접확인해 주시면 고맙겠습니다. -
2008.02.05 12:39
혹시나해서 직접 XE의오피셜 레이아웃의 HTML과 CSS를 고쳐보았는데 예상대로 중앙에 오는걸 어제 밤에 확인했습니다.
전 아직 0.2.8버젼이구요. 혹시 다른 부분도 수정하신것은 아니겠지요?
이곳은 일본이라 사무실내에서는 인터넷이 보안상 안되므로 집에 돌아가는대로 첨부하신 소스를 보고 늦어도 8시까지는 답변 드리겠습니다. 원래 CSS란게 쩜하나 잘못찍어도 예상치 못하는 결과가 나오거든요. ^_______^= -
googlexe
2008.02.05 14:10
다른부분은 일체 수정하지 않았습니다.
아~ 직접 테스트까지하셔서 성공한 후에 답변을 주셨는데
저는 뭔가 잘못 적용하여 안되었던것이 아닌가 답답하기만 합니다.
아무튼 관심갖고 따뜻하게 답변해 주셔서 진심으로 감사드립니다.
그럼 저녁때쯤 확인 하신후에 전해주실 답변에는 좋은결과를 기다리겠습니다.
ps:혹시 어젯밤에 테스트하실때 중앙정렬에 성공하였던 파일을 첨부해 주신다면
간단히 해결될듯 싶은데 부탁을 드려봅니다. -
쿠로쿠마
2008.02.05 21:17
에고.. 죄송합니다. 제가 급한일때문에 이제야 들어왔네요.
네, 그게 빠를것 같군요. css랑 layout.html을 올리겠습니다. 바뀐데는 위에 명시한 부분밖에 없구요.
이곳을 클릭하시면 어제 제가 확인한 테스트용 레이아웃이 뜹니다. ^_____^= -
쿠로쿠마
2008.02.05 21:36
googlexe 님 올린 화일을 보니 제가 올린화일은 0.2.8 버젼인데 googlexe 님께서 올린 layout.html보니까 0.2.9버젼이네요.
css는 큰 변화는 없는것 같은데 html의 메뉴부분 설정이 쪼금 다르네요. 0.2.9에서 0.2.8 버젼의 레이아웃을 사용하게되면 0.2.9의 추가
기능을 사용할수 없을 뿐만아니라 화면에 제대로 표시가 되지않을 가능성도 있겠군요.
봐서는 별문제는 없을것 같긴한데... ^_____^; 혹시 안되면 0.2.9안정버젼이 나올때까지만 기다려주세요. 안정화버젼나오면 그때 업그레이드 할려고 하거든요. 급하시다면 CSS화일을 위에서부터 쭈욱 한번 살펴보시고, 속성의 포함관계를 그려보시기 바랍니다.
그냥, css화일을 읽어보는것 보다는 속성관계를 박스형태로 그려보면 이해하기 쉽답니다. 아자~아자~ 화이팅~~ ^_____^= -
googlexe
2008.02.05 22:17
바쁘신데 저와의 약속때문에 서둘러 귀가를 하시게 되었나싶어
죄송한 마음입니다.
답변주신 링크된 사이트에 들러 정상적인 위치를 확인하였습니다.
첨부해 주신 파일을 계정에 올리고 테스트를 해보았습니다.
IE6.0 / IE7.0 / Firefox2.0.0.11에서 각각 테스트해보았습니다.
역시 별다른 변화없이 여전히 좌측상단에 메뉴가 위치하는 상황입니다.
도대체 어디서 부터 잘못된 것인지 ....
일단 이정도에서 이문제는 당분간 보류하고
추후에 임시로 계정을 하나 더마련하여 테스트를 해볼 생각입니다.
그리고 결과는 이곳 댓글에 올려놓겠습니다.
장시간에 걸쳐 답변해 주시느라 대단히 고생이 많으셨습니다.
아울러 쿠로쿠마님의 친절하고 따뜻한 배려에 깊히 감사의 말씀을 올립니다.
"새해 복 많이 받으시길 바랍니다." -
쿠로쿠마
2008.02.05 23:25
잘안풀린땐 일에서 잠시 벗어나 휴식을 취하는것도 한 방법이지요. 저도 아직 초보입니다. 서로 같이 정보공유하고 배워나가면 좀더 재미있을것 같네요. 아울러 이런 장소를 마련해주신 제로님께도 감사 또 감사 드립니다~ ^_____^=
이곳에 오시는 모든 분들,
새해 복많이 받으세요~ ^_____^= -
moonsoo
2008.02.11 23:18
댓글들을 읽고 있으니 ... 왠지 기분이 좋아집니다 ~~ ^^ 쿠로쿠마님과 googlexe님의 댓글에 추천 한방씩 때릴랍니다~~
-
mccallister
2008.02.17 01:22
googlexe님, 저도 님처럼 똑같이 왼쪽위에 메뉴가 떠버려서 고민하고 있었었는데
.gnbBody { position:absolute top:82px}
#gnb { top:82px; height:38px; overflow:hidden; white-space:nowrap; margin-bottom:10px; margin:0 auto; }
이런식으로 하니 중앙정렬이 잘되었습니다.^^
<div class="">대신 <div id="">로 해도 됩니다.^^ 클래스정의가 되는 형태가 css내에는 없어서 #으로 통일시켜주는편이
나을듯 하네요.
궁금한점이 하나 있는데 두번째열에 margin:0 auto;만 있어도 중앙정렬될줄 알았는데 테스트해보니 .gndbody{po...}가 없으니
안되더군요, 이부분 가르쳐주시면 정말 감사드리겠습니다.^^;;
아직 성공못하셨다면 성공하시길 바랍니다.^^ -
googlexe
2008.02.24 17:52
쿠로쿠마님~
일전에 설명해 주셨던 내용대로 수정한 후 새로운 계정에서
0.2.9안정화버젼으로 업그레이드를 마친후 레이아웃을 초기화시킨후 테스트한 결과
드디어 성공적으로 가운데 정렬을 완성할 수 있었습니다.
다시 한번 더 진심으로 감사를 드리며
관심갖고 격려해주시고 답변주셨던
리그온님,moonsoo 님,mccallister 님께도 아울러 깊은 감사를 드립니다.
-
이재명956
2009.03.06 18:55
흠.. 따라해봤는데...
파이어 폭스에서는 변동이 전혀 없군요.. --;;
익스플로어 7에서는 제대로 작동하지만 파폭에서는 작동하지 않습니다.
사파리에서도 되지 않는군요.. 흠...
다른 방법이 없을까요?
메뉴의 위치를 결정하는 div의 css를 수정해주시면 됩니다.
div의 너비는 회색박스만큼.. 중앙정렬을 했을때 좌우여백까지 포함한 가로길이를 설정하시고..
메뉴를 감싸는 div를 추가로 하나 생성해 주신 뒤, margin: 0 auto; 한줄 추가해주시면 됩니다.
이해가 되시려나 모르겠네요.