헤더가 웹 페이지에 나타나지 않습니다.

사이트 레이아웃을 만들고 있는데, 이유가 무엇이든 헤더가 문서의 HTML 버전에 표시되지 않습니다 (텍스트가 전혀 표시되지 않음). 나는 텍스트를 빠르고 쉽게 삽입 할 수 있도록 (예 : 템플릿을 만드는 것과 같은) 페이지를 구분하는 방법을 알아 내려고하고 있습니다. 또한 메뉴 막대와 작은 꼬리말을 추가하려고합니다. 레이아웃은 내용과 함께 오버레이 된 그라디언트입니다. 콘텐츠 레이아웃에는 바로 아래에 메뉴 막대가있는 머리글이 포함되며 나머지 콘텐츠는 두 개의 섹션 ("왼쪽"및 "기본")으로 나뉘며 하단은 매우 작은 바닥 글 (저작권). 다음과 같이 코드는 다음과 같습니다헤더가 웹 페이지에 나타나지 않습니다.

HTML :

<!DOCTYPE html> 
<html> 
<head> 
    <link href="style.css" rel="stylesheet" type="text/css"/> 
    <title>Welcome to AskMeMore.Org!</title> 
</head> 
<body> 
    <div id="background"> 
     <img src="gradient.jpg" height="50%" width="100%" /> 
    </div> 
    <div id="overlay"> 
     <div id="content"> 
      <div id="body"> 
       <div id="header">Header</div> 
       <div id="left">Hi</div> 
       <div id="main">Welcome</div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

CSS : 당신은 DIV 번호 배경 직후 이미지를 사용하는

#background { 
    background-repeat:repeat-x; 
    position:relative; 
    z-index:1; 
} 
#overlay { 
    position:relative; 
    top:-975px; 
    left:15%; 
    z-index:10; 
    background-color:#FFFFFF; 
    width:70%; 
} 
#content { 
    padding-left: 15px; 
    padding-right: 15px; 
    padding-top: 15px; 
    padding-bottom: 15px; 
    background-color:#FFFFFF; 
} 
#header { 
    background-color:#FFFFFF; 
    position:absolute; 
    top:0; 
    left:0; 
} 
#body { 
    background-color:#FFFFFF; 
} 
#left { 
    position:absolute; 
    top:0; 
    left:0; 
    background-color:#FFFFFF; 
    width:25%; 
    padding-top: 20px; 
    padding-left: 20px; 
} 
#main { 
    position:absolute; 
    top:0; 
    right:0; 
    background-color:#FFFFFF; 
    width:71%; 
    padding-top: 20px; 
    padding-left: 20px; 
}

출처

2012-08-30 tesseract4d

''을 만들고 콘텐츠 아래에 위치 시키려고하는 대신 CSS에서'body' 또는'# overlay'에'background-image'를 사용하면 어떨까요? –

<div id="background"> 
    <img src="gradient.jpg" height="50%" width="100%" /> 
</div> 

    #background { 
    ..remove all styles 
    background-repeat:repeat-x; // not required because you never used a background

만 오버레이 DIV를 사용하고 #overlay의 스타일로 사용 :

background: #00ff00 url('gradient.jpg') no-repeat center;

출처

2012-08-30 16:10:35 user1622689

헤더가 나타나지 않는 이유는 무엇입니까? – tesseract4d

z- 색인 : 1; 배경 및 Z- 지수 : 10; 다음에. 이것은 숨기고, chromes 검사 요소를 사용해보십시오. bacgkround div가 어디에 있는지를 알 수 있습니다 (아래). – user1622689

이 문제는 당신이 남아 있고 나는 당신이 전체 페이지의 배경이 너무이를 제거하려는 생각 main divs는 모두 top: 0으로 설정되며 헤더가 겹치면 top: 0으로 설정됩니다. left 및 main에는 불투명 (흰색) 배경이 있기 때문에 뒤쪽 내용을 차단합니다.

다음은 방금 배경색으로 약간 놀아 보았던 바이올린입니다. 나는 머리글을 빨간색으로 만들어 (정확히 어디에 있는지 쉽게 알 수 있도록) left 및 main을 투명하게 만듭니다. 여기 헤더가 보입니다. 당신이 투명 left을 설정하는 줄을 주석으로 경우

http://jsfiddle.net/chrisvenus/RVxqM/

는 위의 라인은 녹색으로 설정하고 당신이 볼 수 immeditely 방법 빨간색 헤더 셀 아웃이 블록.

두 가지 해결책이 있습니다. 우선 가장 좋은 점은 내용이 이동 된 img이 아닌 그라디언트에 적절한 CSS 배경 이미지를 만드는 것입니다.

두 번째 옵션은 아마도 절대 위치를 할 수있는 컨테이너 div 생성하는 다음 (즉, 정상 및 왼쪽 떠 주요이든 같은 헤더가 적절한 전통적으로 아이를 배치합니다.

정확한 솔루션 자신의 상황에 따라 다르지만 이것이 왜 잘못되어 사용자에게 가장 적합한 솔루션을 찾을 수 있는지 알려줍니다.

출처

2012-08-30 16:26:05 Chris

정확히 여기에서 달성하려고하는 것이 확실하지 않지만 헤더가 표시되지 않는 이유는 다른 요소와 정확히 같은 위치에 배치 했으므로 헤더를 덮고 있기 때문입니다.

몇 가지 CSS 자습서를 읽는 것이 좋습니다. 달성하고자하는 바를 정확하게 수행하는 방법을 설명하는 몇 가지 CSS 자습서가 있습니다.

빠른 구글이 제공 http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

출처