하면서 내 메뉴의 항목을 중심으로하는 방법을 100 % 폭 배경

Question

나는 웹 사이트 일하고

: http://homegym.sg/index.php/

때 사용자가 스크롤 다운, 검은 메뉴가 나타날 것 같은 효과를 만드는 jQuery를 사용해 본 적이 화면의 상단. 그러나 나는 많은 방법을 시도해 왔지만 그것이 내가 원하는 것을 보여줄 수는 없다.

메뉴의 배경을 화면의 100 % 너비로 채우고 싶었습니다. 내 화면의 중간 부분은 너비가 고정되어 있지만 (960px) 사용자 화면이 960px 이상이면 배경을 채우기 위해 배경이 확장됩니다.

내 웹 사이트 배경에서는 메뉴 배경으로는 배경이 화면의 전체 너비를 채우는 것이지만, 가장 가까운 효과는 왼쪽으로 정렬하는 것입니다. 중심 맞춤).

#menu, CSS 발견되는 메뉴에 대한 나의 DIV 여기 menu.css

코드의 일부입니다 :

#menu { 

    width: 100%; 
    z-index:888; 
    display:none; 
    position:fixed; 
    top:0 ; 
    left: 0; 
} 

ul.topnav { 
    width: 100%; 
    list-style: none; 
    padding: 0 50px; 
    float: left; 
    text-align: left; 
    background: #222; 
    font-size: 1.2em; 
    background: url(../images/css_menu/topnav_bg.gif) repeat-x; 

} 

Answer 1

div#menu의 width이 100%을해야하며,이 div은 background를 가져옵니다

div#menu { 
    margin:0 auto; 
} 

또는 더 pedantically : 자동으로 메뉴의 수평 여백을 설정하십시오.
ul.topnav을 가운데로 맞추려면 width (모두 li) 중 margin auto 중 하나가 필요합니다.

는 귀하의 CSS되어 정의를 변경

: 나는 그것을 체크 아웃 한

#menu { 
    background: url("../images/css_menu/topnav_bg.gif") repeat-x scroll 0 0 transparent; 
    display: none; 
    left: 0; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 888; 
} 

ul.topnav { 
    font-size: 1.2em; 
    height: 35px; 
    margin: 0 auto; 
    width: 802px; 
} 

Answer 2

나는 당신이 직접하기 때문에 페이지에 테스트 할 수 없습니다 자바 스크립트 구문 분석 오류가 발생했습니다. 지금은 JSFiddle에 코드를 복사하는 것이 좋지 않지만 제안을 드릴 수는 있습니다.

div#menu { 
    margin-top: 0; 
    margin-right: auto; 
    margin-bottom: 0; 
    margin-left: auto; 
} 

Answer 3

하고, 문제가 부유 요소 및 마진이다. 이 CSS 속성으로 시도해보십시오. (로컬 테스트를 위해 경로를 절대 경로로 변경했습니다) :

#menu { 
    display: none; 
    left: 0; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 888; 
    background: url(http://homegym.sg/skin/frontend/default/electronics01-black/images/css_menu/topnav_bg.gif) repeat-x; 
} 

ul.topnav { 
    width: 820px; 
    list-style: none; 
    padding: 0 50px; 
    float: none; 
    text-align: left; 
    background: #222; 
    font-size: 1.2em; 
    margin: 0 auto; 
} 
ul.topnav li { 
    float: none; 
    margin: 0 auto; 
    padding: 0 15px 0 0; 
    position: relative; /*--Declare X and Y axis base for sub navigation--*/ 
    background: url(http://homegym.sg/skin/frontend/default/electronics01-black/images/css_menu/main-delimiter.png) 95% 4px no-repeat; 
} 

그러나 좋은 웹 사이트!