By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,743 Members | 1,018 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,743 IT Pros & Developers. It's quick & easy.

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

P: 1
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.dtd">
<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.css" 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">&nbsp;</td>
</tr>
<tr>

<td width="101" height="34">
<div align="center"><a href="about.html"> <img src="assets/aboutbuttonbeige.png" alt="about"
onmouseover="this.src='assets/aboutbuttonorange.png'"
onmouseout="this.src='assets/aboutbuttonbeige.png'"/></a>
</div></td>

<td width="101"><div align="center"><a href="spottinglocations.html"><img src="assets/spottinglocationsbuttonbeige.png" alt="locations"
onmouseover="this.src='assets/spottinglocationsbuttonorange.png'"
onmouseout="this.src='assets/spottinglocationsbuttonbeige.png'"/></a> </div></td>

<td width="101"><div align="center"><a href="tipsforspotting.html"><img src="assets/tipsforspottingbuttonbeige.png" alt="tips"
onmouseover="this.src='assets/tipsforspottingbuttonorange.png'"
onmouseout="this.src='assets/tipsforspottingbuttonbeige.png'"/></a> </div></td>

<td width="101"><div align="center"><a href="photos.html"><img src="assets/photosbuttonbeige.png" alt="photos"
onmouseover="this.src='assets/photosbuttonorange.png'"
onmouseout="this.src='assets/photosbuttonbeige.png'"/></a> </div></td>

<td width="124"><div align="center"><a href="links.html"><img src="assets/linksbuttonbeige.png" alt="links" width="172"
onmouseover="this.src='assets/linksbuttonorange.png'"
onmouseout="this.src='assets/linksbuttonbeige.png'"/></a> </div></td>

</tr>

</table>

</body>
</html>

thanks!!!!
Nov 18 '13 #1
Share this Question
Share on Google+
1 Reply


P: 6
You must wrap your whole HTML code in a div tag.
Expand|Select|Wrap|Line Numbers
  1. <div id="content-wrapper "> 
and define content-wrapper in CSS as below.
Expand|Select|Wrap|Line Numbers
  1. .content-wrapper {
  2.     margin: 0 auto;
  3.     max-width: 960px;
  4. }
  5.  
Nov 20 '13 #2

Post your reply

Sign in to post your reply or Sign up for a free account.