I am currently working on a site for a client which can be found on my dev site
http://www.adamcochran .info/I-Gard/
The problem I am having is I have placed the Images using absolute div's which seems to be the wrong thing to do because while it looks nice in its current resolution when I expand the browser size (or shrink it) the images move all over the place
I have tried relative, absolute, fixed, and float divs nothing seems to just stay where it should! What am I doing wrong?
Here's the code:
The external CSS was done by a more advanced designer/coder that I no longer have access too but his images seem to stay. I was under the impression that these divs would solve my problem but apparently not.
Any insights?
Many thanks,
Adam
http://www.adamcochran .info/I-Gard/
The problem I am having is I have placed the Images using absolute div's which seems to be the wrong thing to do because while it looks nice in its current resolution when I expand the browser size (or shrink it) the images move all over the place
I have tried relative, absolute, fixed, and float divs nothing seems to just stay where it should! What am I doing wrong?
Here's the code:
Code:
<!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>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="main">
<div id="header">
<div id="search">
<form action="" method="get">
<input type="text" class="searchbox" name="find" id="find" size="1" />
<input type="submit" class="button" name="submit" value="Search" id="submit" />
</form>
</div><!--/search-->
<div id="menu">
<ul class="menu">
<li class="parent"><a href="#"><span>Products</span></a>
<ul>
<li><a href="#"><span>Product 1</span></a></li>
<li><a href="#"><span>Product 2</span></a></li>-
<li><a href="#"><span>Product 3</span></a></li>
<li><a href="#"><span>Product 4</span></a></li>
</ul>
</li>
<li><a href="#"><span>Industries</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Store</span></a></li>
<li><a href="#"><span>News</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
</ul>
</div><!--/menu-->
<div class="images">
<ul>
<li><a href="#"><img src="images/img-01.gif" alt="" /></a></li>
<li><a href="#"><img src="images/img-02.gif" alt="" /></a></li>
<li><a href="#"><img src="images/img-03.gif" alt="" /></a></li>
<li><a href="#"><img src="images/img-04.gif" alt="" /></a></li>
</ul>
</div><!--/images-->
<div class="submenu">
<ul class="menu">
<li><a href="#"><span>Contact Us</span></a></li>
<li><a href="#"><span>Feedback</span></a></li>
<li><a href="#"><span>Sign In</span></a></li>
</ul>
</div><!--/submenu-->
</div><!--/header-->
<div style="position: absolute; left: 390px; top: 230px;">
<img src="http://www.petervaldivia.com/technology/electricity/powerpoint/image/color_code_table.jpg">
</div>
<div style="position: absolute; left: 890px; top: 230px;">
<a href="http://www.i-gard.com/"><img src="http://www.kudit.com/applications/resistorvalue/images/icon_hr.png"></a>
</div>
<table width="100%" cellpadding="0" cellspacing="10" border="0">
<tr>
<br><br><br>
<td width="20%" valign="top">
<p><b><u><font color="blue">What is the function of a Neutral Grounding Resistor?</font></u></b></p>
<br>
<p>Neutral Grounding resistors are similar to fuses in that they do nothing until something in the system goes wrong. Then, like fuses, they protect personnel and equipment from damage.</p>
<br>
<p>Damage comes from two factors, how long the fault lasts and how large the fault is .Ground fault relays trip breakers and limit how long a fault lasts. Neutral grounding resistors limit how large the fault is. </p>
<br>
<p>An effective NGR will both limit the fault current and yet allow sufficient fault current to positively actuate the over-current device.</p>
</p>
</td>
<td width="33%" valign="top">
<p><img src=""></p>
</td>
<td width="33%" valign="top">
<p><img src=""></p>
<p><img src=""></p>
</td>
</tr>
</table>
<br><br><br><br>
<div id="footer">
</div>
</div><!--/main-->
</body>
</html>
Any insights?
Many thanks,
Adam
Comment