0
EDIT：バリデーターを使用してHTMLをランするだけで、エラーと警告フリーのHTMLコードが配置されました。記事のコンテナが標準モードですべてのコンテンツを表示するように展開され、クォークモードで正常に動作します。部分が間違っている
他の編集：さて、私たちはどこかに行っていると思います。すべてを指摘してくれてありがとう。検証済みのバージョンで動作するページを手に入れることができているように見えますが、CSSを少しばかげてしまいましたが、今ははるかにスムーズに進んでいます。
ここでは、ウェブサイトのサンプルページですが、最小のものを選んでみました。 DOCTYPEが指定されていない場合、ページは正しく実行されます。 doctypeを追加すると、ページが分割されます。
記事のセクションは、コンテンツとスクロールを隠すことなく、すべてのコンテンツに合わせて拡張されています。私が問題を示すために知っている最も簡単な方法は、皆さんが見るための完全なCSSとHTMLを提供することです。上に「！DOCTYPE html」を追加し、記事セクションの読み方との違いを確認してください。それ以外はすべて大丈夫です！すべてのコンテンツを隠す代わりに、ユーザーが記事コンテナの横でスクロールバーを使用できるようにするために、すべてのコンテンツを含めるように拡張しています。モバイル版の変数を変更する前にこれを修正する必要があるので、私は不満です。
私はquirksモードでの実行が悪いと聞いたので、これを標準モードで正しく表示するにはどうすればよいですか？ CSSコードとHTMLコード全体を投稿して申し訳ありませんが、問題を説明する方法がわかっている唯一の方法ですが、これはあまりよくありません。
HTMLをquirksモードで使用する場合は、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要素があるのはなぜですか？あなたはなぜこれをすべてのモードでテストしますか？ –
ケビンが正しければ、ヘッダーが本体に入ります。 – Vcasso
1.クォークモードで「動作」== broken/2.あなたのHTML構造は無効です。 （ではなく）/ 4です。![]()
幅は全ピクセルで、端数は許されません.pxを置かないでください。 （img 'width'はCSSなし）/ 5.どのブラウザでですか？あなたのHTMLをvalidator.w3.orgに貼り付けてください。 –