當瀏覽器調整大小時，圖片正在移動

我是一名新程序員，我正在使用HTML和CSS製作網站，但我遇到了一個主要問題。我在頁面上放置了圖片（即關閉BODY標籤之前的圖片），我希望它們留在一個位置，但是每當我調整瀏覽器大小時，它們就會開始移動到所有位置。我搜索和搜索，但似乎沒有任何幫助爲我工作，不完全與我的問題有關，或只是太混亂。有些人甚至問過同樣的問題，但其他人試圖回答似乎陷入困境或困惑，所以我發現他們沒有什麼幫助。請幫忙，謝謝。當瀏覽器調整大小時，圖片正在移動

HTML低於...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1  /DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>New Product</title> 

<style> 
body {background-image:url('gradient_back_ground_05.jpg'); 
background-repeat:repeat-x;} 
</style> 

<style type="text/css"> 

.textOverlay 
{ 
position: relative; left: 375px; top: 1px; 
} 

</style> 

<link href="zzv_styles.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<div class="picture"> 

<div class="textOverlay"> 

<h2><font color=white><font face="Arial, Helvetica, sans-serif"><em>We Proudly Presents<br />a Brand New Product.</em></font></font></h2> 

</div> 
</div> 

<div align="center"><img src="assets/zz_banner.jpg" alt="Banner" width="700" height="140" /></div> 
<p class="body_text"><img src="assets/info_box.png" alt="Information Box" width="350" height="500" hspace="5" vspace="5" border="0" align="right" /> 
<p class="body_text"><img src="assets/zz_logo.png" alt="Logo" width="350" height="125" hspace="5" vspace="5" border="0" align="left" /> 
<p class="body_text"><img src="assets/bulleted_info_box.png" alt="Bulleted Box 1" width="350" height="125" hspace="5" vspace="5" border="0" align="left" /> 
<p class="body_text"><img src="assets/bulleted_info_box.png" alt="Bulleted Box 2" width="350" height="125" hspace="5" vspace="5" border="0" align="left" /> 
<div align="center"><img src="assets/RN_footer.jpg" alt="Footer" width="700" height="110" /></div> 

</body> 
</html>

這裏是CSS

@charset "UTF-8"; 
/* CSS Document */ 

.image { 
    position: relative; 
    width: 100%; /* for IE 6 */ 
} 

h2 { 
    position: absolute; 
    top: 30px; 
    left: 0; 
    width: 100%; 
}

來源

2013-06-26 Jeremiah

您是否有鏈接觀看它的真實生活？ –

對不起，但沒有。我仍然在構建它，所以我還沒有把它放在網絡上。 – Jeremiah

'zzv_styles.css'裏的內容，除了你已經放在這裏的CSS嗎？ –

我想你想要的包裝：http://jsfiddle.net/derekstory/QqKmR/

CSS

#wrapper{width: 800px; margin: auto;}

HTML

<div id="wrapper"> 
    <div class="picture"> 
     <div class="textOverlay"> 

<h2><font color=white><font face="Arial, Helvetica, sans-serif"><em>We Proudly Presents<br />a Brand New Product.</em></font></font></h2> 

     </div> 
    </div> 
    <div align="center"> 
     <img src="assets/zz_banner.jpg" alt="Banner" width="700" height="140" /> 
    </div> 
    <p class="body_text"> 
     <img src="assets/info_box.png" alt="Information Box" width="350" height="500" hspace="5" vspace="5" border="0" align="right" /> 
     <p class="body_text"> 
      <img src="assets/zz_logo.png" alt="Logo" width="350" height="125" hspace="5" vspace="5" border="0" align="left" /> 
      <p class="body_text"> 
       <img src="assets/bulleted_info_box.png" alt="Bulleted Box 1" width="350" height="125" hspace="5" vspace="5" border="0" align="left" /> 
       <p class="body_text"> 
        <img src="assets/bulleted_info_box.png" alt="Bulleted Box 2" width="350" height="125" hspace="5" vspace="5" border="0" align="left" /> 
        <div align="center"> 
         <img src="assets/RN_footer.jpg" alt="Footer" width="700" height="110" /> 
        </div> 
</div>

來源

2013-06-26 18:27:38

這很好。謝謝你，dwreck。它正是我所需要的。最後！！！現在來調整它來創造更大的問題......哈哈。 – Jeremiah

當瀏覽器調整大小時，圖片正在移動

回答

相關問題