유체 측면이 하나 인 헤더 생성

첨부 된 와이어 프레임을 참조하십시오. 나는 청사진 CSS를 사용하고있다. 헤더를 제외한 모든 것이 980px 컨테이너에 있어야합니다.유체 측면이 하나 인 헤더 생성

헤더의 경우 왼쪽 열이 유동적으로 나타나게하고 싶습니다. 언제나 브라우저의 왼쪽을 터치하여 성장합니다. 한쪽에만 유동체 인 헤더가있는 컨테이너를 어떻게 만들 수 있습니까?

와이어 프레임이 문제를 설명하는 데 도움이되기를 바랍니다. 그렇지 않으면 알려주세요. 감사합니다

Wireframe

2012-01-21 AnApprentice

내가 옳다 경우 어디 보자, 당신은 당신의 헤더는 항상 위쪽과 왼쪽 모서리 오른쪽에있을 컨테이너의 위치에 영향을 미치지 싶어? 글쎄, 당신은 단지 당신의 컨테이너 밖으로 그 머리글을 가져 가지 마, 당신의 머리카락이 실제로 문서의 상단과 왼쪽 모서리에 있도록 귀하의 헤더가 절대 위치를 갖도록 귀하의 신체 여백이 0으로 설정되어 있는지 확인하십시오. 내가 제대로 질문을 해석했지만, 나는이 작업을 수행 할 수있는 유일한 방법은 컨테이너와 배너 영역의 Z- 인덱스 놀아 생각하면 확실하지

body { 
    margin: 0px; 
} 

.header { 
    width: 200px; 
    position:absolute; 
} 
.container { 
    width: 980px; 
    margin:0 auto; 
} 

<body> 
<div class="header"></div> 
<div class="container"></div> 
</body>

출처

2012-01-21 19:05:56 Paradise

죄송합니다. 컨테이너 (980px)에서 컨테이너의 왼쪽에 200px 넓게 머리글을 배치하고 싶습니다. 그런 다음 컨테이너 외부에서, 본문에서 div가 헤더의 왼쪽 가장자리에서부터 스트리치까지 (200 픽셀 단위)까지 지나치지 않도록하고 싶습니다. 유체 헤더 bkg를 오른쪽 브 라우저쪽으로 끝까지 이동하지 마십시오. 그게 도움이 되니? – AnApprentice

예를 들어, CSS는 다음과 같습니다 당신의 HTML에 대한 다음

body { margin: 0; } 
#container { width:980px; margin: 0 auto; z-index: 1; background-color: black; height:500px; } 
#logo { width:200px; height:50px; background-color: red; } 
#header-left { position: absolute; top:0; left:0; height:50px; width:50%; z-index: 0; background-color: red; }

:이 도움이

<div id="header-left"></div> 
<div id="container"> 
    <div id="logo"></div> 
</div>

희망.

출처

2012-01-22 05:53:15 smilledge

유체 측면이 하나 인 헤더 생성

답변

관련 문제