브라우저 크기를 조정하면 이미지가 움직입니다.

저는 새로운 프로그래머이며 HTML과 CSS로 사이트를 만들고 있지만 중요한 문제가 있습니다. 페이지에 이미지를 배치하고 (BODY 태그 바로 앞에있는 이미지) 한 위치에 머물도록하고 싶습니다. 그러나 브라우저의 크기를 조정할 때마다 모든 곳으로 이동하기 시작합니다. 나는 수색하고 수색했으나, 도움이되는 것은 아무 것도 내 문제와 관련이 없거나 혼란 스럽다. 어떤 사람들은 똑같은 질문을했지만 심지어 답을 구하려고 노력하는 다른 사람들은 혼란 스럽거나 혼란스러워 보였으므로 그 사람들이 거의 도움이되지 않는 것으로 나타났습니다. 제발 도와 줘서 고마워. http://jsfiddle.net/derekstory/QqKmR/브라우저 크기를 조정하면 이미지가 움직입니다.

CSS

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

HTML :

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는 무엇입니까? –

난 당신이 래퍼를 원하는 생각을 것입니다 ... 아래입니다

<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

위대한 작품. 고마워, 드레 크. 그것은 내가 그것이 필요했던 정확하게 것을했다. 마침내 !!! 더 큰 이슈를 만들기 위해 더 많이 약간의 것을 꼬기 위해 지금. .. 하하. – Jeremiah

브라우저 크기를 조정하면 이미지가 움직입니다.

답변

관련 문제