0
EDIT : 유효성 검사기를 통해 HTML을 실행하고 오류 및 경고없이 무료 HTML 코드를 배치합니다.기사 컨테이너가 확장되어 모든 콘텐츠를 표준 모드로 표시하고 쿼크 모드에서 잘 작동합니다. 잘못된 부분 만
다른 편집 : 좋아, 나는 우리가 어딘가에 도착하고 있다고 생각한다. 모든 것을 지적 해 주셔서 감사합니다. 유효화 된 버전으로 작동하도록 페이지를 만들 수있는 것 같았습니다. CSS를 약간 엉망으로 만들었지 만 이제는 훨씬 더 부드럽게 진행되고 있습니다.
다음은 웹 사이트의 샘플 페이지입니다. 가장 작은 것을 선택했습니다. DOCTYPE을 지정하지 않으면 페이지가 올바르게 실행됩니다. 일단 doctype을 추가하면 페이지가 손상됩니다.
기사 섹션은 콘텐츠를 숨기거나 스크롤하지 않고 모든 콘텐츠에 맞게 확장됩니다. 문제를 보여주기 위해 내가 아는 가장 쉬운 방법은 여러분이 볼 수있는 완벽한 CSS와 HTML을 제공하는 것입니다. 상단에 '! DOCTYPE html'을 추가하고 기사 섹션을 읽는 방법과의 차이점을 확인하십시오. 그 밖의 모든 것이 좋습니다! 모든 콘텐츠를 숨기고 사용자가 기사 컨테이너의 측면에서 스크롤바를 사용할 수있게하는 대신 모든 콘텐츠를 포함하도록 확장 중입니다. 모바일 버전에 대한 변수를 변경하기 전에이를 고쳐야하기 때문에 좌절감을 느낍니다.
quirks 모드로 실행하는 것이 좋지 않아서 표준 모드에서 올바르게 표시되도록 수정하려면 어떻게해야합니까? 전체 CSS 코드와 HTML 코드를 게시하는 것은 유감 스럽지만 문제를 설명하는 방법을 알고있는 유일한 방법입니다.
HTML을 쿼크 모드로 사용하려면 doctype을 추가하여 잘못된 표시를 확인하십시오.
<html lang="en">
<head>
<title>
CDD Research
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="style.css" rel="stylesheet">
</head>
<body>
<header>
<img class="mobile" alt="mobile logo" src="img/bestlogo.png" width="212" height="84">
<nav class="desktop">
<img alt="cdd research" src="img/bestlogo.png" width="283" height="112"><a href="index.html">Home</a> | <a href="cdd.html">CDD</a> | <a href="founder.html">Founder</a> | <a href="charityauction.html">Art for Charity</a> | <a href="donate.html">Donate</a> | <a href="resources.html">Resources</a> | <a href="http://gaanjo.com/">Gaanjō!</a>
</nav>
<nav class="mobile">
<div class="dropdown">
<button class="dropbtn">Navigation</button>
<div class="dropdown-content">
<a href="index.html">Home</a>
<a href="cdd.html">CDD</a>
<a href="founder.html">Founder</a>
<a href="charityauction.html">Art for Charity</a>
<a href="donate.html">Donate</a>
<a href="resources.html">Resources</a>
<a href="www.gaanjo!.com">Gaanjō!</a>
</div>
</div>
</nav>
</header>
<article>
<h1>Childhood Disintegrative Disorder Research is a 501(c)(3)nonprofit
</h1>
<img class="mobile" alt="snow child" src="img/snowchild.png" width="250" height="250">
<div class="cddleft">
<h3>
What is CDD?
</h3>
<p>
Childhood disintegration disorder robs children of their ability to interact with others in a most horrible way. Children with CDD begin life as any other child would, rapidly acquiring skills and exhibiting all the usual behaviors. Then without warning and for currently unknown reasons, the child regresses and loses critical acquired skills such as toilet training and the ability to speak coherently. Even with rapid onset, the child may tearfully beg caregivers for an explanation before losing the ability to speak.
</p>
<br>
<h3>How can you help?
</h3>
<p>
Through donations, charity auctions, sales, and promotional material, CDD Research puts the power in your hands to make the world a better place for children affected by this harrowing disease. Please take some time to browse CDD Research for resources and options to contribute to our cause.
</p>
<br>
<h3>How can we help?
</h3>
<p>
Our mission at CDD Research is to facilitate a complete understanding of childhood disintegration disorder by aiding researchers currently studying CDD as well as initiating new research projects. CDD Research endeavors to
facilitate the rapid development of promising new therapies and treatments for those affected by childhood disintegration disorder. CDD Research seeks sufficient understanding of childhood disintegration disorder through active recruitment of new participants for research programs, assistance with funding of full genomic sequencing for CDD-affected families, support of the MSSNG database, and the creation of innovative ways to compile new data.
</p>
</div>
<div class="cddright">
<img class="large" alt="snow child" src="img/snowchild.png" width="500" height="500">
<br>
<table class="social">
<tr>
<td>
<a href="http://www.facebook.com"><img class="social" alt="fb" src="img/fb.png" width="100" height="100"></a>
</td>
<td>
<a href="http://www.medium.com"><img class="social" alt="medium" src="img/mds.png" width="100" height="100"></a>
</td>
<td>
<a href="http://www.twitter.com"><img class="social" alt="medium" src="img/tw.png" width="100" height="100"></a>
</td>
</tr>
</table>
</div>
</article>
<footer>
<p>Copyright information <a href="mailto:[email protected]">[email protected]</a>
</p>
</footer>
</body>
</html>
그리고 CSS 코드.
html {
background-color: #000000;
font-family: helvetica, verdana, arial;
text-align: left;
font-size: 1em;
width: 100%;
height: 100%;
min-width: 995px;
margin: 0px;
padding: 0px;
}
header {
color: #FCD5EE;
text-transform: uppercase;
text-align: center;
font-weight: bold;
width: 100%;
height: 20%;
}
nav.desktop {
display: block;
}
nav.mobile {
display: none;
}
article {
background-color: #FFFFFF;
width: 95%;
height: 70%;
border: .5em solid #9AF4FB;
border-radius: 1.125em;
overflow-x: hidden;
overflow-y: scroll;
margin-left: auto;
margin-right: auto;
clear: auto;
}
footer {
color: #FCD5EE;
text-align: center;
font-weight: bold;
width: 100%;
height: 5%;
}
a {
color: #FCD5EE;
text-decoration: none;
}
a:hover {
color: #9AF4FB;
}
a.plain {
color: #000000;
font-weight: bold;
}
a.resource {
color: #000000;
font-size: 1.125em
}
a.resource:hover {
color: #000000;
}
a.item {
color: #000000;
}
p {
margin: 0px;
}
p.item {
font-weight: bold;
}
p.center {
text-align: center;
}
p.store {
font-size: 1.125em;
text-align: center;
}
h1 {
background-color: #FCD5EE;
font-size: 2em;
text-align: center;
font-weight: normal;
border: .25em solid #FCD5EE;
border-radius: 2em;
margin-top: 25px;
}
h2 {
font-size: 1.125em;
text-align: center;
font-weight: normal;
}
h3 {
background-color: #9AF4FB;
font-size: 1.5em;
text-align: center;
font-weight: normal;
border: .25em solid #9AF4FB;
border-radius: 1.5em;
margin-top: 0px;
}
h4 {
background-color: #FCD5EE;
font-size: 1.125em;
text-align: center;
font-style: italic;
width: 430px;
border: .25em solid #FCD5EE;
border-radius: 1.125em;
font-weight: normal;
margin-left: auto;
margin-right: auto;
}
ol {
background-color: #FCD5EE;
list-style-type: none;
border: .25em solid #FCD5EE;
border-radius: 1.5em;
padding: 0px;
}
ol.cdd {
font-size: 1.125em;
text-align: center;
font-weight: bold;
}
ol.address {
max-width: 350px;
font-size: 1.125em;
text-align: center;
font-weight: bold;
margin-left: auto;
margin-right: auto;
}
img.mobile {
display: none;
margin-left: auto;
margin-right: auto;
}
img.item {
display: inline-block;
}
img.resource {
display: block;
position: absolute;
margin-top: 25px;
}
img.large {
display: block;
margin-left: auto;
margin-right: auto;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
div.left3 {
width: 50%;
float: left;
}
div.right3 {
width: 48%;
float: right;
}
div.left2 {
width: 45%;
float: left;
}
div.right2 {
width: 55%;
float: right;
}
div.cddright {
width: 55%;
float: right;
}
div.cddleft {
width: 45%;
float: left;
}
div.dropdown {
position: relative;
display: inline-block;
}
div.dropdown-content {
display: none;
position: absolute;
background-color: #000000;
text-align: center;
width: 300px;
}
div.dropdown-content a {
display: block;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}
div.dropdown:hover div.dropdown-content {
display: block;
}
div.mobile {
display: none;
margin-left: auto;
margin-right: auto;
}
button.dropbtn {
background-color: #000000;
color: #FCD5EE;
font-size: 1em;
font-family: helvetica, verdana, arial;
text-transform: uppercase;
font-weight: bold;
width: 300px;
border: none;
}
table {
background-color: #9af4fb;
border: .25em solid #9af4fb;
border-radius: 1.125em;
margin-left: auto;
margin-right: auto;
}
table.desktop {
display: block;
background-color: #FFFFFF;
border: none;
margin-left: auto;
margin-right: auto;
}
table.social {
background-color: #FFFFFF;
border: none;
width: 75%;
text-align: center;
}
uhm. 왜 body 요소 외부에 nav 요소가 있습니까? 그리고 왜 당신은 quirks 모드로 이것을 테스트 할 것입니까? –
Kevin이 맞습니다. 헤더가 시체에 들어갑니다. – Vcasso
1. 단점 모드에서 "작동"== 깨짐/2. HTML 구조가 잘못되었습니다. (이 아닌)/4입니다.![]()
너비는 전체 픽셀이며 분수는 허용되지 않으므로 'px'를 입력하지 마십시오. (img 'width'는 _not_ CSS)/5. 어떤 브라우저에서? HTML을 validator.w3.org에 붙여 넣으십시오. –