메뉴 상단고정 관련
본문
상단 고정메뉴는 만들었는데, 위의 이미지처럼 양쪽이 1280px 넘어가는 부분이 background값이 설정이 안됩니다... 어떻게 해야할까요?ㅠㅠ
<div id="header">
<div class="hd">
<ul>
<li><a href=""><img src="/img/logo.png" alt="logo img" /></a></li>
<li><a href="">사업개요</a></li>
<li><a href="">입지환경</a></li>
<li><a href="">프리미엄</a></li>
<li><a href="">평면안내</a></li>
<li><a href="">언론보도</a></li>
<li><a href="">관심고객등록</a></li>
<li><a href="">오시는길</a></li>
<li><img src="/img/num.png" alt="*** 개인정보보호를 위한 전화번호 노출방지 ***" /></li>
</ul>
</div>
</div>
/* 초기화 */
html {height: 150%; margin:0 auto; padding:0 auto;}
body {margin:0;padding:0; font-family:'나눔고딕', Nanum Gothic, Gothic; overflow-y:auto; overflow-x:hidden; }
/* 상단 레이아웃 */
#header {text-align:center; margin:-20px 0 0 0; background-color:#ffffff;}
#header div.hd {margin:0 auto; max-width:1280px;}
#header div.hd ul {background:#ffffff; margin:0; padding:0; list-style:none; position:fixed; height:80px;}
#header div.hd ul li {display:inline-block; float:left;}
#header div.hd ul li a {display: block; text-decoration: none; padding: 20px 20px; font-size:18px; color:#282828; font-weight:500;}
#header div.hd ul li a:hover { border-bottom:3px solid #153368;}
#header div.hd ul li:first-child {margin:0 100px 0 0;}
#header div.hd ul li:first-child a:hover { border-bottom:none;}
#header div.hd ul li:nth-child(2), #header div.hd ul li:nth-child(3), #header div.hd ul li:nth-child(4), #header div.hd ul li:nth-child(5), #header div.hd ul li:nth-child(6), #header div.hd ul li:nth-child(7), #header div.hd ul li:nth-child(8) {margin:15px 0 0 0;}
#header div.hd ul li:nth-child(9) {margin:20px 0 0 100px;}
답변 2
#header div.hd 에 max-width:1280px; 삭제
#header div.hd ul 에 width: 100%; 추가
#header div.hd {margin:0 auto;}
#header div.hd ul {
background:#ffffff;
margin:0;
padding:0;
list-style:none;
position:fixed;
height:80px;
width: 100%;
}
알려주신대로 하니 나오긴했는데, 중앙정렬이 깨지네요ㅠㅠ 저는 중앙정렬때문에 저렇게 쓴거였거든요ㅠㅠㅠ
----
그냥 margin으로 움직였어요!ㅎㅎㅎ
코드를 다시보니 #header 위에 브레이크포인터가 걸린 블록이 하나더 있을것 같은데요
#header 가 블록요소라서 정상적용됐다면 흰색배경이 전체 적용되있어야하는데 첨부된 스크린샷에는 중앙정렬되어 있네요
상위 블록에서 max-width 나 width값이 설정되 있는지 찾아보셔야됩니다.
max-width:1280px 삭제해보세요
#header div.hd {margin:0 auto; max-width:1280px;}
답변을 작성하시기 전에 로그인 해주세요.