0

我是一名新程序员,我正在使用 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%; 
}
4

1 回答 1

3

我想你想要一个包装器: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-26T18:27:38.513 回答