1
私の学校ではこの大会が行われているので、5つのベストウェブサイトがRaspBerry Piを獲得しています。私は現在私のジレンマを持っています。私は場所を失って見えたが、何も動作していないようだ。 JSFiddleのコードのいくつかへのリンクがあります。私のサイトのフォーマット
https://jsfiddle.net/kdn1x2hk/
私の問題は、私は私の情報のすべての私の真ん中の列のDIVを持っている、です。私は左にイメージを置くことができ、左にテキストを置くことができるようにフォーマットしようとしていますが、唯一の問題は、そのdivがテキストを完全に覆っているところに置いておきたいことです。テキストがどこに灰色の背景を超えているかを見ると、それは何か問題です。
<!DOCTYPE! html>
<html>
<head>
<style>
body,
html {
margin-top: -11px;
margin: 0;
height: 100%;
min-width: 1000px;
background-color: red;
}
.bg {
margin-left: 20%;
width: 60%;
background-color: grey;
border-left: thick solid black;
border-right: thick solid black;
}
.background {
background-image: url("images/background.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
min-height: 100%;
}
.banner {
width: 100%;
border-bottom: thick solid black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
border-bottom: thick solid black;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none!important;
font-family: "Arial Black", Gadget, sans-serif;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #FFD700;
color: black;
}
.header {
font-size: 80pt;
font-family: "Arial Black", Gadget, sans-serif;
color: black;
text-align: center;
min-width: 80pt;
}
.dotted_line {
border-top: 2px dashed black;
width: 70%;
}
.paragraph {
font-size: 15pt;
width: 500px;
margin-left: 0%;
color: black;
}
.sub_header {
text-align: center;
font-size: 50pt;
color: black;
}
.credit {
width: 560;
size: 20pt;
text-align: center;
font-style: italic;
}
.video {
width: 70%;
margin-left: 15%;
border: thick solid black;
}
.credit_link {
text-decoration: none;
}
#image {
width: 45%;
}
#text {
width: 45%;
float: left;
font-size: 15pt;
color: black;
padding-top: 20px;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
.format {
width: 90%;
margin-left: 10%;
}
</style>
</head>
<body>
<div class="background">
<div class="bg">
<img src="https://i.imgur.com/gsceMM5.png" class="banner">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="stats.html">Stats</a></li>
<li><a href="history.html">History</a></li>
<li><a href="info.html">Info</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<p class="header"> WELCOME</p>
<hr class="dotted_line" />
<p class="sub_header">What is Bitcoin?</p>
<video class="video" poster="images/thumbnail.jpg" controls>
<source src="videos/info.mp4" type="video/mp4">
</video>
<p class="credit">
(Credit to <a class="credit_link"
href="https://www.youtube.com/user/weusecoins">WeUseCoins</a> on
youtube.com)
</p>
<div class="format">
<img src="https://i.imgur.com/BGsKZms.png" id="image" />
<p id="text">
Bitcoin is a new currency that was created in 2009 by an unknown
person using the alias Satoshi Nakamoto. Transactions are made with no
middle men – meaning, no banks! Bitcoin can be used to book hotels on
Expedia, shop for furniture on Overstock and
buy Xbox games. But much of the hype is about getting rich by
trading it. The price of bitcoin skyrocketed into the thousands in 2017.
</p>
</div>
</div>
</div>
</body>
</html>
私のコード何らかの理由でここに組織さが、私はただ、重要なものをコピーし、病気に最終的に取得するので、私がしなければならないすべての組織やものを除外されていません。
恐ろしい;助けてうれしい！これで問題が解決されたことを確認したら、[**承認済みとしてマークする]（https://stackoverflow.com/help/someone-answers）を忘れずに、下の灰色のチェックボックスをクリックしてください投票ボタン - これを「未回答の質問」キューから削除し、質問者と質問回答者の両方に評判を与えます。質問をして15分後にそれをすることができます。もちろん、あなたが解決したように質問をマークすることで、物事が円滑に流れ続けるのに役立ちますが、私の答え（または誰かのもの）を正しいものとしてマークする義務はありません:) –