CSS : 단색 네비게이션 막대의 투명 '섹션'

Question

CSS에 어려움이 있으며 누군가 나를 도울 수 있기를 바랍니다.

페이지의 양면에 펼쳐지도록 (단색으로 채워짐) navbar를 얻으려고하지만 아래 그림과 같이 내 로고가 짤 수있는 투명한 공간이 있습니다.

내 페이지 배경이 이미지이므로 {로고} 셀을 bg 색상으로 채울 수 없습니다. 도움이된다면 Twitter 부트 스트랩도 사용하고 있습니다.

누군가 나를 도와 줄 수 있습니까? 지금 당분간 붙어있어. : 당신은 절대적으로 위치하여 메뉴 바의 오른쪽을

http://jsfiddle.net/Jh4ya/6/

: S

Answer 1

아마 당신은이 같은 (필요 없음 이미지, 순수한 CSS)을 할 수

을

#right { 
    left: 250px; 
    right: 0px; 
    position: absolute; 
    height: 30px; 
    background: #469; 
    top: 0px; 
} 

나는 그것이 가장 깨끗한 방법 중 하나라고 생각합니다. 그것은 수도 몇 가지 폭의 문제에 직면

: 그것은

편집을 도움이되기를 바랍니다. 해결 방법으로 display: table-cell; 및 display: table; 속성을 사용할 수 있습니다. 이 포크를 참조하십시오 : http://jsfiddle.net/qxVce/

Answer 2

내 의견에 이런 말을했습니다. http://jsfiddle.net/slash197/Eh2xL/1/ 이것은 개념의 증거 일 뿐이며 값과 크기를 변경해야합니다.

HTML

<div class="bg"> 
    <div class="nav"> 
     <div class="logo">Logo</div> 
    </div> 
</div> 

CSS

body, html { 
    height: 100%; 
} 
.bg { 
    background: url("http://slashwebdesign.net/green-nature-wallpaper2.jpg") no-repeat center top; 
    width: 100%; 
    height: 100%; 
    padding: 30px 0px; 
} 
.nav { 
    background: url("http://slashwebdesign.net/nav.png") no-repeat center top; 
    height: 35px; 
} 
.logo { 
    margin-left: 100px; 
    color: #ffffff; 
}