Html 페이지가 doctype으로 이상하게 보임

HTML 페이지를 작성했고 별도의 파일에 일부 CSS가 있습니다. 그런 다음 나는 html에 doctype 선언을 추가해야한다는 것을 깨달았다. 나는 그것을했고 나의 페이지는 완전하게 엉망이되었다! 모든 종류의 선언을 시도했지만 모두 같은 결과를 보였다. Html 페이지가 doctype으로 이상하게 보임

이

내 HTML입니다 (현재는 크롬과 협력, 그리고 DOCTYPE없이) :

<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
     <title>Luca Rood - Home</title> 
    </head> 
    <body background="images\background.jpg"> 
     <div id="header"> 
      <div id="header-back"></div> 
      <div id="top-spacing"></div> 
      <div id="content"> 
       <a href="index.html" title="Luca Rood - Home"> 
        <img id="image" src="images\logo.png" alt="Luca Rood"> 
       </a> 
      </div> 
     </div> 
    </body> 
</html>

을 그리고 이것은 내 CSS입니다 :

body { 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: 100% 100%; 
    margin: 0px 0px 0px 0px; 
    } 

#header { 
    position: relative; 
    height: 15%; 
    } 

#header-back { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: #000000; 
    opacity: 0.3; 
    z-index:1; 
    } 

#top-spacing { 
    height: 20%; 
    width: 100%; 
    } 

#content { 
    position: relative; 
    width: 80%; 
    height: 60%; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    z-index:2; 
    } 

#image { 
    height: 100%; 
    }

이 도와주세요. 사전에

감사합니다,

루카

출처

2013-03-21 Luca Rood

"엉망이 된"이유가 무엇인가요? – Blender

'doctype'을 "추가"한 것은 무엇입니까? 왜 CSS 대신 제출하지 않았습니까? –

doctype을 사용하기로 선택한 경우 (필요한)이 doctype에 따라 브라우저와 함께 살아야합니다. Doctype을 사용하면 브라우저에 특정 방식으로 동작하도록 지시합니다. 이론 상으로는 모든 브라우저가 똑같이 동작해야하므로 doctype을 선택해야하는 이유가 더 많거나 적습니다. 따라서 어떤 doctype을 사용할지 결정해야하고 이후에 CSS를 변경해야합니다. Doctype을 선택하지 않으면 브라우저가 페이지를 "버크 (quirks)"모드로 렌더링하고 페이지가 최상의 상태로 보이더라도이를 원하지 않습니다. – pebbo

당신은 고전적인 비율을 높이 문제가있는 이상이보십시오. 당신이 body 스타일 height:100%를 추가하고 height:100%을뿐만 아니라 가지고있는 html 요소 상에 스타일을 추가해야합니다, 그것을 해결하기 위해 :

<style> 
    body{ 
     /*...*/ 
     height:100%; 
    } 
    html{ 
     height:100%; 
    } 
</style>

가 작동 희망!

출처

2013-03-21 01:27:13 Markasoftware

대단히 감사합니다 !!! 네가 내 목숨을 구했어! –

-1

< HTML> 태그

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

출처

2013-03-21 01:12:20 RonEskinder

이것은 정확히 문제입니다. 묻는 사람은 분명히 그/그녀는 많은 doctypes을 시도하고 그들은 작동하지 않았다. – Markasoftware

Html 페이지가 doctype으로 이상하게 보임

답변

관련 문제