How to I prevent the image from moving when resizing the broswer?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • kashkash
    New Member
    • Nov 2013
    • 1

    How to I prevent the image from moving when resizing the broswer?

    Here is my html info, if you open it in a browser, you'll notice that when you resize to a smaller browser window, the menu buttons move but when you make it bigger its fine, what can i do to keep it there. ive tried putting the position to fixed etc and nothing.

    i am using dreamweaver cs6.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>YUL Spotting</title>
    <link href="styles.cs s" rel="stylesheet " type="text/css" />
    <style type="text/css">
    body {
    background-color: #120D43;
    background-image: url(assets/Homepage.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    }
    </style>
    </head>

    <body>

    <table width="897" height="389" border="0" align="center">
    <tr>
    <td height="346" colspan="5">&nb sp;</td>
    </tr>
    <tr>

    <td width="101" height="34">
    <div align="center"> <a href="about.htm l"> <img src="assets/aboutbuttonbeig e.png" alt="about"
    onmouseover="th is.src='assets/aboutbuttonoran ge.png'"
    onmouseout="thi s.src='assets/aboutbuttonbeig e.png'"/></a>
    </div></td>

    <td width="101"><di v align="center"> <a href="spottingl ocations.html"> <img src="assets/spottinglocatio nsbuttonbeige.p ng" alt="locations"
    onmouseover="th is.src='assets/spottinglocatio nsbuttonorange. png'"
    onmouseout="thi s.src='assets/spottinglocatio nsbuttonbeige.p ng'"/></a> </div></td>

    <td width="101"><di v align="center"> <a href="tipsforsp otting.html"><i mg src="assets/tipsforspotting buttonbeige.png " alt="tips"
    onmouseover="th is.src='assets/tipsforspotting buttonorange.pn g'"
    onmouseout="thi s.src='assets/tipsforspotting buttonbeige.png '"/></a> </div></td>

    <td width="101"><di v align="center"> <a href="photos.ht ml"><img src="assets/photosbuttonbei ge.png" alt="photos"
    onmouseover="th is.src='assets/photosbuttonora nge.png'"
    onmouseout="thi s.src='assets/photosbuttonbei ge.png'"/></a> </div></td>

    <td width="124"><di v align="center"> <a href="links.htm l"><img src="assets/linksbuttonbeig e.png" alt="links" width="172"
    onmouseover="th is.src='assets/linksbuttonoran ge.png'"
    onmouseout="thi s.src='assets/linksbuttonbeig e.png'"/></a> </div></td>

    </tr>

    </table>

    </body>
    </html>

    thanks!!!!
  • psurvi
    New Member
    • Nov 2013
    • 6

    #2
    You must wrap your whole HTML code in a div tag.
    Code:
    <div id="content-wrapper ">
    and define content-wrapper in CSS as below.
    Code:
    .content-wrapper {
        margin: 0 auto;
        max-width: 960px;
    }

    Comment

    Working...