메뉴 상단고정 관련 채택완료
상단 고정메뉴는 만들었는데, 위의 이미지처럼 양쪽이 1280px 넘어가는 부분이 background값이 설정이 안됩니다... 어떻게 해야할까요?ㅠㅠ
</strong></p>
<p><strong><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="062-714-1028" /></li>
</ul>
</div>
</div></strong></p>
<p><strong>
</strong></p>
<p> </p>
<p><strong>/* 초기화 */
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; }</strong></p>
<p>
<strong>/* 상단 레이아웃 */
#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;}</strong></p>
<p><strong>
답변 2개
#header div.hd 에 max-width:1280px; 삭제
#header div.hd ul 에 width: 100%; 추가
</p>
<pre>
#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%;
}
</pre>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
코드를 다시보니 #header 위에 브레이크포인터가 걸린 블록이 하나더 있을것 같은데요 #header 가 블록요소라서 정상적용됐다면 흰색배경이 전체 적용되있어야하는데 첨부된 스크린샷에는 중앙정렬되어 있네요 상위 블록에서 max-width 나 width값이 설정되 있는지 찾아보셔야됩니다.
max-width:1280px 삭제해보세요
</p>
<p>#header div.hd {margin:0 auto; <span style="background-color:#3498db;">max-width:1280px;</span>}</p>
<p>댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
----
그냥 margin으로 움직였어요!ㅎㅎㅎ