HTML/CSS：需要幫助修復我的網站

-2

我在使我的背景img出現在我的網站上或者如何修復第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

來源

2016-09-16 Jared

請從您的代碼創建一個工作小提琴或鋼筆。 – connexo

尋求調試幫助的問題（**「爲什麼這個代碼不工作？」**）必須包含所需的行爲，特定的問題或錯誤以及在問題本身**中重現**的最短代碼。這不僅對於我們儘可能直接對問題進行驗證和調試是必要的，而且在問題在現場網站上得到解決之後，還要保持問題的有效性。瞭解如何創建[mcve]。除此之外，目前的標題絕對沒有描述你的問題。你能否使用更具描述性的？ :) – Siguza

此外，「這裏是我的網站」不會導致一個網站製成的HTML和CSS，但只是一個圖像。 – connexo

您預計pu在css中的背景圖片的url內引用背景圖片：url（taustakuva.png）; background-repeat：no-repeat; background-position：left bottom;
width：560px; } 那麼對於第二個問題，請注意下面的代碼是第一位在你的CSS頁面

*{ 
margin: 0; 
padding: 0; 
width: 100%; 
}

我相信這個回答你的問題。

來源

2016-09-16 14:48:54

HTML/CSS：需要幫助修復我的網站

回答

相關問題