CSS를 사용하는 가운데 상자

Question

나는 HTML + CSS로 디자인 한 레이아웃을 웹 페이지로 바꾸려고합니다. 메뉴는 왼쪽에 머무르고, 화면 전체 왼쪽 채워야 동안 도시 된 바와 같이, 중심 될 image

난 (고정 폭) 중앙 블랙 DIV 원하는 :

배치는 다음과 같다 위.

문제는 전체 왼쪽면을 채우기 위해 메뉴의 스타일을 지정하여 이미지에 표시된 마우스 오버 효과를 얻지 못하는 것입니다.

대단히 감사합니다.

Answer 1

메뉴 전체 ​​너비를 채우고 상단에 검은 색 로고 요소를 배치하면됩니다.

body, html { 
    margin: 0; 
    background: #494848; 
} 
#menu { 
    margin-top: 150px; 
    height: 250px; 
    background: #3a3a3a; 
} 
#menu ul { 
    margin: 0; 
    padding: 140px 0 0; 
} 
#menu li { 
    margin: 0; 
    list-style: none; 
    padding: 5px; 
} 
#menu li:hover { 
    background: #4c4c4c; 
} 
#menu li a { 
    display: block; 
    width: 550px; 
    margin: 0 auto; 
    color: #fff; 
    text-decoration: none; 
} 
#centered_wrapper { 
    width: 0; 
    margin: 0 auto; 
    position: relative; 
} 
#logo { 
    position: absolute; 
    height: 250px; 
    width: 350px; 
    margin-left: -175px; // half of width 
    background: #000; 
    z-index: 1; 
} 

당신은 것을 알 수 있습니다 : 메뉴 항목 가져 효과는 오른쪽에 표시됩니다 같은 CSS 뭔가와

<div id="menu"> 
    <div id="centered_wrapper"> 
    <div id="logo"></div> 
    </div> 
    <ul> 
    <li><a href="#">&gt; home</a> 
    <li><a href="#">&gt; azienda</a> 
    <li><a href="#">&gt; lavorazioni</a> 
    <li><a href="#">&gt; contattaci</a> 
    </ul> 
</div> 

. 수평 축에 50 %로 배치 된 반복되지 않는 배경 이미지를 적용하여이 문제를 해결합니다. 이미지의 반은 투명하고 이미지의 절반은 호버 효과입니다. 충분한 길이.

#menu li:hover { 
    background: url(hover_effect.png) repeat-y 50% 0; 
}