CODEWITHSUNDEEP
htmlcss
Jeremiah
Jeremiah

Reputation: 3

Images are moving when the browser is resized

I am a new programmer and I am making a site with HTML and CSS but I have run into a major issue. I placed images (the ones just before the closing BODY tag) on the page and I want them to stay in one spot, but whenever I resize the browser they start to move all over the place. I've searched and searched but it seems that none of the help works for me, does not relate exactly to my issue, or is just too darn confusing. Some people have even asked the same question but others trying to answer seem to get stumped or confused, so I found them to be of little assistance. Please help and thank you.

HTML is below...

<!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>

Here is the CSS

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

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

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

Upvotes: 0

Views: 2943

Answers (1)

Derek Story
Derek Story

Reputation: 9583

I think you are wanting a wrapper: 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>

Upvotes: 3

Related Questions