0

私は新しいプログラマーで、HTML と CSS を使用してサイトを作成していますが、大きな問題に遭遇しました。ページに画像 (BODY 終了タグの直前の画像) を配置し、それらを 1 か所にとどめておきたいのですが、ブラウザーのサイズを変更すると、画像があちこちに移動し始めます。検索して検索しましたが、どのヘルプも役に立たなかったり、問題と正確に関連していなかったり、混乱しすぎたりしているようです。同じ質問をする人もいますが、答えようとして困惑したり混乱したりする人もいるので、ほとんど役に立たないことがわかりました. 助けて、ありがとう。

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 に答える