매뉴를 중간으로 옮기려면...? 채택완료
맨위에 매뉴 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개
원래 너비 1000px 인 #hd_wrapper를 100%로 변경하신게 검정바가 좌우 가득차길 원해서 같은데 맞나요?
그렇다면 그냥 #hd_wrapper 를 감싸는 새로운 요소를 하나 더 추가하세요.
그래놓고 새로 추가한 hd_wrapper_outer에 배경색을 넣어주심 되겠지요.
#hd_wrapper에서 변경하신 너비값은 원래대로 돌려놓으시고 background: transparent 로 변경하시거나 삭제해주시고, 마진값으로 상하 여백을 주셨는데 이 부분은 hd_wrapper_outer가 상하 마진을 같도록 변경해주시고요.
flex의 경우는 브라우저 지원사항이 아직 갈립니다.
답변에 대한 댓글 2개
덕분에 css 공부도 됐습니다~ 감사합니다^^
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
감사합니다.