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

매뉴를 중간으로 옮기려면...? 채택완료

리얼티스 7년 전 조회 3,137

맨위에 매뉴 width=1000를 100%로 바꾸었더니...

매뉴글씨들이 아래처럼 됐습니다.

 

양쪽에 공간을 줘서, 가운데로 오게하려면

어떻게 해야 하나요?

 

 

 

 

/* 팝업레이어 */ #hd_pop {z-index:1000;position:relative;margin:0 auto;width:970px;height:0} #hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff} .hd_pops_con {} .hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right} .hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}

 

/* 상단 레이아웃 */ #hd {z-index:4;position:absolute;top:0px;left:0;min-width:100%;width:100%} .hd_zindex {z-index:10 !important} #hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #hd_wrapper {margin:60px auto;height:55px;width:100%;zoom:1;background:#000000;position:relative;padding-left:0px} #hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""} #logo {float:left;padding:0;background:#000000;height:55px;width:150px;padding-left:0px} #logo a{display:inline-block;vertical-align:middle;margin-top:3px}

 

/*상단_로그인*/ #tnb {position:Absolute;top:-30px;right:0;} #tnb:after {display:block;visibility:hidden;clear:both;content:""} #tnb li{float:left;border:1px solid #none;padding:3px; margin-left:3px;border-radius:3px;font-size:0.917em;background:#ffffff } #tnb li a{color:#646464;} #tnb li.tnb_adm{background:#BABABA;} #tnb li.tnb_adm a{color:#000000;}

 

/* 메인메뉴*/ #gnb {position:relative;margin: 0;float:left} #gnb:after {display:block;visibility:hidden;clear:both;content:""} #gnb h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #gnb_1dul {padding:0;zoom:1;} #gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""} .gnb_1dli {z-index:10;position:relative;float:left;width:200px;text-align:center;} a.gnb_1da {padding-right:0px;display:inline-block;  text-overflow: ellipsis;  overflow: hidden;  white-space: nowrap;font-weight:bold;line-height:2.95em;text-decoration:none;color:#fff;height:55px;line-height:55px;display:block;font-size:1.30em} a.gnb_bg{background:url('../img/gnb_bg.gif') 100px 50%  no-repeat; margin-left:0px;} .gnb_bg:focus, .gnb_bg:hover {background-color:#000000 ;text-decoration:none} .gnb_1dli_air .gnb_1da {background-color:#000000;color:#fff}

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

답변 2개

채택된 답변
+20 포인트

원래 너비 1000px 인 #hd_wrapper를 100%로 변경하신게 검정바가 좌우 가득차길 원해서 같은데 맞나요?

그렇다면 그냥 #hd_wrapper 를 감싸는 새로운 요소를 하나 더 추가하세요.

 

   

  ...

 

 

그래놓고 새로 추가한 hd_wrapper_outer에 배경색을 넣어주심 되겠지요.

#hd_wrapper에서 변경하신 너비값은 원래대로 돌려놓으시고 background: transparent 로 변경하시거나 삭제해주시고, 마진값으로 상하 여백을 주셨는데 이 부분은 hd_wrapper_outer가 상하 마진을 같도록 변경해주시고요.

 

flex의 경우는 브라우저 지원사항이 아직 갈립니다.

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

답변에 대한 댓글 2개

리얼티스
7년 전
아~ 그렇군요.. 한번 해보겠습니다 ^^
감사합니다.
리얼티스
7년 전
와~ 되네요~ㅎㅎ
덕분에 css 공부도 됐습니다~ 감사합니다^^

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

7년 전

#hd_wrapper{

display:flex;

justify-content:center;

}

 

추가 하세요

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

답변에 대한 댓글 1개

리얼티스
7년 전
바쁘신 시간에 답변감사합니다 ^^

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

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

로그인