-2
私のウェブサイトに自分の背景が表示される問題や、ウェブサイトの幅に合わせてcol＃1のラベルボックスを修正する方法に問題があります。 私は希望のディスプレイの外観を実現するために自分のウェブサイトを微調整する方法を考え出しました。 フォントやテキストは、私自身のバージョンでは単なるプレースホルダですが、ここに私のコードは次のとおりです。要するにHTML/CSS：自分のウェブサイトを修正するのに助けが必要
body {
background-image: url("taustakuva.png");
background-repeat: no-repeat;
background-position: left bottom;
width: 560px;
}
#content {
padding: 0;
margin: 0;
width: 100%;
height: 300px;
background-color: #e3f6fc;
border-style: solid;
border-widtH: 5px;
border-color: #add8e6;
}
#header {
padding: 0px 0px 4px 4px;
margin: 0;
color: green;
text-align: center;
font-size: 15px;
width: 100%;
height: 35px;
background-color: #add8e6;
}
form {
width: 100%;
}
p.subheader {
text-align: center;
font-size: 20px;
}
button {
display: inline-block;
margin: 0 auto;
height: 43px;
padding: 0;
width: 128px;
}
#col1 {
padding: 10px;
width: 100% margin: auto;
height: 20px;
background-color: #e3f6fc;
}
#col2 {
margin-right: 10px;
margin-left: 10px;
width: 240px;
float: left;
}
#col3 {
margin-right: 10px;
margin-left: 10px;
witdh: 200px;
float: left;
}
#hakubutton {
background-image: url(hakunappi.png);
display: block;
}
#footer {
width: 100%;
height: 10px;
padding-top: 5px;
}<body>
<div id="header">
<h1>Lorem ipsum dolor sit amet</h1>
</div>
<div id="content">
<div id="col1">
<form method="post" action="">
<label for="name">Lorem ipsum</label>
<input type="text" value="" />
<br/>
</div>
<p class="subheader">Lorem ipsum dolor sit amet</p>
<div id="col2">
<form action="index.php">
Lorem ipsum
<select name="type">
<option value="skycraper" selected>Lorem ipsum</option>
<option value="own">Lorem ipsum</option>
<option value="2floor">Lorem ipsum</option>
<option value="hotel">Lorem ipsum</option>
</select>
<br/>
<br/>Lorem ipsum
<select name="mode">
<option value="solar">Lorem ipsum</option>
<option value="wood">Lorem ipsum</option>
<option value="longdistance" selected>Lorem ipsum</option>
<option value="noheat">Lorem ipsum</option>
</select>
<br/>
<br/>Lorem ipsum
<select name="rooms">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br/>
<br/>Lorem ipsum
<select name="size">
<option value="30" selected>30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
</select>
</form>
</div>
<div id="col3">
<form action="index.php">
<label for="name">Lorem ipsum</label>
<input type="text" value="" />
<br/>
<br/>
<label for="name">Lorem ipsum</label>
<input type="text" value="" />
<br/>
<br/>Lorem ipsum
<select name="condition">
<option value="bad" selected>Lorem ipsum</option>
<option value="ok">Lorem ipsum</option>
<option value="good">Hyvä</option>
</select>
<br/>
<br/>m2
<input type="radio" name="ownership" value="rent">Lorem ipsum
<input type="radio" name="ownership" value="own">Lorem ipsum
<br>
</form>
<br/>
</form>
</div>
<button id="hakubutton">
</button>
<div id="footer">
</div>
</div>
</body>
</html>：ここ
は私のウェブサイトである： https://gyazo.com/b40f0e2298e6e42a03ae71b09c7ee805 とここにあります達成しようとしていること： https://gyazo.com/c35099cd12d512686e0b559cf6bc5620
コードから作業フィドルまたはペンを作成してください。 – connexo
デバッグのヘルプを求める質問（** "なぜこのコードは機能していませんか？"）**は、質問自体に**必要な動作、特定の問題またはエラー、およびそれを再現するのに必要な最短コード**を含める必要があります。これは、問題の検証とデバッグをできるだけ簡単に行うだけでなく、問題がライブWebサイトで修正されると、問題の有効性を保持するためにも必要です。 [mcve]の作成方法を参照してください。それに加えて、現在のタイトルはあなたの問題を絶対に記述しません。あなたはもっと記述的なものを使ってください。 :) – Siguza
また、「ここは私のウェブサイトです」というのは、HTMLやCSSから作られたウェブサイトにつながるものではなく、ただのイメージです。 – connexo