2012-07-09 7 views
0

고정 헤더가있는 웹 사이트를 만들고 유체 배치 여야합니다. 그렇게 할 수있는 방법이 있습니까? 그렇다면 어떻게? 어떤 도움을 주시면 감사하겠습니다.유체 및 고정 헤더

<div class="masterHeader"> 
    THIS IS HEADER TEXT 
    <br/> 

    <span style="float: left;"> LEFT SPAN </span> 
    <span style="float: right;"> RIGHT SPAN </span> 
</div> 

<div class="contentData"> 
</div> 

사용 스타일에 대해 다음 CSS :

는 HTML에
+0

그리고 그것에 관해 무엇이 유동적이어야합니까? 머리글 자체 또는 열이있는 레이아웃이 있습니까? 헤더가 높이 위치로 고정되어야합니까? – insertusernamehere

+0

어쩌면 이것이 당신이 찾고있는 것입니다 : http://stackoverflow.com/questions/11349952/css-layout-with-both-fixed-and-liquid-columns/11350665#11350665 – insertusernamehere

답변

0

해골은 다음과 같다

.masterHeader 
{ 
    display: block; 
    height: 80px; 
    position: fixed; 
    text-align: center; 
    min-width: 700px; 
    width: 100%; 
} 

.contentData 
{ 
    float: left; 
    margin-top: 100px; 
    padding-bottom: 15px; 
    padding-left: 2px; 
    position: relative; 
    width: 100%; 
} 
+0

아니요, 그게 아니라고 물었습니다. . 헤더 너비는 900px 여야하고 여백은 0이어야합니다. 위치에 고정되어야합니다. 또한 유체 레이아웃의 속성을 가져야합니다. Pls 대답. 나는 이것에 초보적이다. 그리고이 모든 것은 너비가되어야하는 컨테이너로 싸여 야합니다 : 100 %,하지만 마지막 것은 선택 사항입니다. – AxelKishore

+1

"유동적 인 레이아웃의 속성을 가져야합니다."라는 말이 무슨 뜻인지 알지 못합니다. 당신은 고쳐지고 다시 그것이 유체가되고 싶다 !!!!!!!!!! 여기 액체가 무슨 뜻이야? 크기를 조정하려면 "px"대신 CSS에서 %를 사용하십시오. – Narendra

+0

페이 스북 헤더를 좋아하는 경우 브라우저 크기가 조정되면 콘텐츠가 적절하게 이동합니다 – AxelKishore

0

이 CSS3 미디어 쿼리 및/또는 HTML4 미디어 속성으로 수행 할 수 있습니다, 참조하시기 바랍니다 데모 용 http://affinitysearch.com (힌트 : 브라우저 창 크기 조정).

기본 구문은 다음

기본 스타일 (모바일 용 내장)

600PX 및 스타일 상기 <link rel="stylesheet" href="/css/style.css">는 :

960 및 스타일 상기 <link rel="stylesheet" media="only screen and (min-width:600px)" href="/css/600.css">는 : <link rel="stylesheet" media="only screen and (min-width:960px)" href="/css/960.css">

이 방법은 호환성 대부분의 브라우저에서.