테스트 사이트 - 개발 중인 베타 버전입니다

그누보드5 메뉴바 사이즈를 조정하고 싶은데요.. 채택완료

와니안 11년 전 조회 8,225

그누보드5 기본형을 보시면 위쪽에 메뉴바가 있는데..

그게 옆쪽으로 길게 된 상태인데.. 이걸 아래쪽 아래쪽(게시판+사이드) 넓이하고 같게 하는 방법이 없을까요

강제로 사이즈를 설정하니깐 메뉴바가 좌측으로 가버리네요..ㅜㅜ 

 

방법이 없을까요?

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
f
11년 전

/css/default.css 에서 

</p><span class="selector" style="font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; line-height: normal; box-sizing: border-box; color: rgb(136, 136, 136);"><span class="simple-selector selector-matches" style="box-sizing: border-box; color: rgb(34, 34, 34);">#gnb</span></span><span style="color: rgb(34, 34, 34); font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; line-height: normal; box-sizing: border-box;"> {</span><ol class="properties monospace" style="box-sizing: border-box; font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; margin: 0px; padding: 2px 4px 0px 0px; list-style: none; clear: both; color: rgb(34, 34, 34); line-height: normal; white-space: nowrap;"><li title="" style="box-sizing: border-box; margin-left: 0px !important; padding-left: 38px; white-space: normal; text-overflow: ellipsis; overflow: hidden; cursor: auto;"><input class="enabled-button" type="checkbox" style="font-family: inherit; font-size: 10px; height: 12px; width: 18px; margin: 0px; flex-shrink: 0; visibility: hidden; float: left; vertical-align: top; position: relative; z-index: 1; left: -40px; top: 1px;"><span class="webkit-css-property" title="position:relative;" style="box-sizing: border-box; color: rgb(200, 0, 0); margin-left: -38px;">position</span>: <span class="expand-element" style="box-sizing: border-box;"></span><span class="value" style="box-sizing: border-box;">relative</span>;</li><li title="" class="parent" style="box-sizing: border-box; margin-left: 0px !important; padding-left: 38px; white-space: normal; text-overflow: ellipsis; overflow: hidden; cursor: auto;"><input class="enabled-button" type="checkbox" style="font-family: inherit; font-size: 10px; height: 12px; width: 18px; margin: 0px; flex-shrink: 0; visibility: hidden; float: left; vertical-align: top; position: relative; z-index: 1; left: -40px; top: 1px;"><span class="webkit-css-property" title="margin:-1px 0 0;" style="box-sizing: border-box; color: rgb(200, 0, 0); margin-left: -38px;">margin</span>: <span class="expand-element" style="box-sizing: border-box; -webkit-user-select: none; margin-right: 2px; margin-left: -6px; opacity: 0.55; width: 8px; height: 10px; display: inline-block; background-image: url(chrome-devtools://devtools/bundled/Images/statusbarButtonGlyphs.png); background-size: 320px 144px; background-position: -4px -96px;"></span><span class="value" style="box-sizing: border-box;">-1px 0 0</span>;</li><li title="" class="parent" style="box-sizing: border-box; margin-left: 0px !important; padding-left: 38px; white-space: normal; text-overflow: ellipsis; overflow: hidden; cursor: auto;"><input class="enabled-button styles-panel-hovered" type="checkbox" style="font-family: inherit; font-size: 10px; height: 12px; width: 18px; margin: 0px; flex-shrink: 0; visibility: hidden; float: left; vertical-align: top; position: relative; z-index: 1; left: -40px; top: 1px;"><span class="webkit-css-property" title="border-top:1px dotted #dde4e9;" style="box-sizing: border-box; color: rgb(200, 0, 0); margin-left: -38px;">border-top</span>: <span class="expand-element" style="box-sizing: border-box; -webkit-user-select: none; margin-right: 2px; margin-left: -6px; opacity: 0.55; width: 8px; height: 10px; display: inline-block; background-image: url(chrome-devtools://devtools/bundled/Images/statusbarButtonGlyphs.png); background-size: 320px 144px; background-position: -4px -96px;"></span><span class="value" style="box-sizing: border-box;">1px dotted <nobr style="box-sizing: border-box;"><span class="swatch" title="Click to open a colorpicker.
Shift-click to change color format." style="box-sizing: border-box; margin-left: 1px; margin-right: 2px; width: 10px; height: 10px; position: relative; top: 1px; display: inline-block; -webkit-user-select: none; background-image: url(chrome-devtools://devtools/bundled/Images/checker.png);"><span class="swatch-inner" style="box-sizing: border-box; width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(128, 128, 128, 0.6); background-color: rgb(221, 228, 233);"></span></span><span style="box-sizing: border-box;">#dde4e9</span></nobr></span>;</li><li title="" class="parent" style="box-sizing: border-box; margin-left: 0px !important; padding-left: 38px; white-space: normal; text-overflow: ellipsis; overflow: hidden; cursor: auto;"><input class="enabled-button" type="checkbox" style="font-family: inherit; font-size: 10px; height: 12px; width: 18px; margin: 0px; flex-shrink: 0; visibility: hidden; float: left; vertical-align: top; position: relative; z-index: 1; left: -40px; top: 1px;"><span class="webkit-css-property" title="border-bottom:1px solid #dde4e9;" style="box-sizing: border-box; color: rgb(200, 0, 0); margin-left: -38px;">border-bottom</span>: <span class="expand-element" style="box-sizing: border-box; -webkit-user-select: none; margin-right: 2px; margin-left: -6px; opacity: 0.55; width: 8px; height: 10px; display: inline-block; background-image: url(chrome-devtools://devtools/bundled/Images/statusbarButtonGlyphs.png); background-size: 320px 144px; background-position: -4px -96px;"></span><span class="value" style="box-sizing: border-box;">1px solid <nobr style="box-sizing: border-box;"><span class="swatch" title="Click to open a colorpicker.
Shift-click to change color format." style="box-sizing: border-box; margin-left: 1px; margin-right: 2px; width: 10px; height: 10px; position: relative; top: 1px; display: inline-block; -webkit-user-select: none; background-image: url(chrome-devtools://devtools/bundled/Images/checker.png);"><span class="swatch-inner" style="box-sizing: border-box; width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(128, 128, 128, 0.6); background-color: rgb(221, 228, 233);"></span></span><span style="box-sizing: border-box;">#dde4e9</span></nobr></span>;</li><li title="" class="parent" style="box-sizing: border-box; margin-left: 0px !important; padding-left: 38px; white-space: normal; text-overflow: ellipsis; overflow: hidden; cursor: auto;"><input class="enabled-button" type="checkbox" style="font-family: inherit; font-size: 10px; height: 12px; width: 18px; margin: 0px; flex-shrink: 0; visibility: hidden; float: left; vertical-align: top; position: relative; z-index: 1; left: -40px; top: 1px;"><span class="webkit-css-property" title="background:#ecf0f7" style="box-sizing: border-box; color: rgb(200, 0, 0); margin-left: -38px;">background</span>: <span class="expand-element" style="box-sizing: border-box; -webkit-user-select: none; margin-right: 2px; margin-left: -6px; opacity: 0.55; width: 8px; height: 10px; display: inline-block; background-image: url(chrome-devtools://devtools/bundled/Images/statusbarButtonGlyphs.png); background-size: 320px 144px; background-position: -4px -96px;"></span><span class="value" style="box-sizing: border-box;"><nobr style="box-sizing: border-box;"><span class="swatch" title="Click to open a colorpicker.
Shift-click to change color format." style="box-sizing: border-box; margin-left: 1px; margin-right: 2px; width: 10px; height: 10px; position: relative; top: 1px; display: inline-block; -webkit-user-select: none; background-image: url(chrome-devtools://devtools/bundled/Images/checker.png);"><span class="swatch-inner" style="box-sizing: border-box; width: 10px; height: 10px; display: inline-block; border: 1px solid rgba(128, 128, 128, 0.6); background-color: rgb(236, 240, 247);"></span></span><span style="box-sizing: border-box;">#ecf0f7</span></nobr></span>;</li></ol><span style="color: rgb(34, 34, 34); font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; line-height: normal; white-space: nowrap;">}</span><p>

width값을 넣고 margin 가로는 auto를 주면 될 것 같은데요.

 

결론: 

#gnb {position:relative;width:970px;margin:-1px auto 0;border-top:1px dotted #dde4e9;border-bottom:1px solid #dde4e9;background:#ecf0f7}

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

와니안
11년 전
와 정말정말 감사합니다.
답변이 안달려서 실망하고 있었는데 fear님 정말 감사해요ㅎㅎ 답변도 상세하게 해주셔서 덕분에 잘 해결했습니다. 감사합니다. 진심으로..
한가지 궁금한 점은 auto라는게 정확히 무엇을 의미하는지 설명해 주실 수 있나요?
가운데 정렬.. 뭐 이런 의미인가요?
f
fear
11년 전
margin은 바깥 여백이며 auto 값은 자동 설정입니다.
바깥 여백을 자동으로 설정한단 뜻으로
<div style="width:500px">
<div style="width:300px;margin:auto;"></div>
</div>
위와 같다면
500안에 300인 태그가 여백이 자동이므로 양쪽 100씩 얻게되어
중앙 정렬한것과 같게 됩니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인