473,544 Members | 1,969 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to display divs so they don't move when browser is resized?

4 New Member
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:
Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>Untitled Document</title>
  7. <link rel="stylesheet" type="text/css" href="css/style.css"/>
  8. </head>
  9.  
  10. <body>
  11.  
  12.     <div id="main">
  13.         <div id="header">
  14.             <div id="search">
  15.                 <form action="" method="get">
  16.                     <input type="text" class="searchbox" name="find" id="find" size="1" />
  17.                     <input type="submit" class="button" name="submit" value="Search" id="submit" />
  18.                 </form>
  19.             </div><!--/search-->
  20.  
  21.             <div id="menu">
  22.                 <ul class="menu">
  23.                     <li class="parent"><a href="#"><span>Products</span></a>
  24.                         <ul>
  25.                             <li><a href="#"><span>Product 1</span></a></li>
  26.                             <li><a href="#"><span>Product 2</span></a></li>-
  27.                             <li><a href="#"><span>Product 3</span></a></li>
  28.                             <li><a href="#"><span>Product 4</span></a></li>
  29.                         </ul>
  30.                     </li>
  31.                     <li><a href="#"><span>Industries</span></a></li>
  32.                     <li><a href="#"><span>Services</span></a></li>
  33.                     <li><a href="#"><span>Store</span></a></li>
  34.                     <li><a href="#"><span>News</span></a></li>
  35.                     <li><a href="#"><span>About Us</span></a></li>
  36.                 </ul>
  37.             </div><!--/menu-->
  38.  
  39.             <div class="images">
  40.                 <ul>
  41.                     <li><a href="#"><img src="images/img-01.gif" alt="" /></a></li>
  42.                     <li><a href="#"><img src="images/img-02.gif" alt="" /></a></li>
  43.                     <li><a href="#"><img src="images/img-03.gif" alt="" /></a></li>
  44.                     <li><a href="#"><img src="images/img-04.gif" alt="" /></a></li>
  45.                 </ul>
  46.             </div><!--/images-->
  47.  
  48.             <div class="submenu">
  49.                 <ul class="menu">
  50.                     <li><a href="#"><span>Contact Us</span></a></li>
  51.                     <li><a href="#"><span>Feedback</span></a></li>
  52.                     <li><a href="#"><span>Sign In</span></a></li>       
  53.                 </ul>
  54.             </div><!--/submenu-->
  55.         </div><!--/header-->
  56.  
  57.         <div style="position: absolute; left: 390px; top: 230px;">
  58.         <img src="http://www.petervaldivia.com/technology/electricity/powerpoint/image/color_code_table.jpg">
  59.         </div>
  60.         <div style="position: absolute; left: 890px; top: 230px;">
  61.         <a href="http://www.i-gard.com/"><img src="http://www.kudit.com/applications/resistorvalue/images/icon_hr.png"></a>
  62.         </div>
  63. <table width="100%" cellpadding="0" cellspacing="10" border="0">
  64.     <tr>
  65.     <br><br><br>
  66.         <td width="20%" valign="top">
  67.             <p><b><u><font color="blue">What is the function of a Neutral Grounding Resistor?</font></u></b></p>
  68. <br>
  69. <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>
  70. <br>
  71. <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>
  72. <br>
  73. <p>An effective NGR will both limit the fault current and yet allow sufficient fault current to positively actuate the over-current device.</p>
  74.  
  75. </p>
  76.         </td>
  77.         <td width="33%" valign="top">
  78.             <p><img src=""></p>
  79.         </td>
  80.         <td width="33%" valign="top">
  81.             <p><img src=""></p>
  82.             <p><img src=""></p>
  83.         </td>
  84.     </tr>
  85. </table>
  86. <br><br><br><br>
  87.         <div id="footer">
  88.  
  89.         </div>
  90.     </div><!--/main-->
  91.  
  92. </body>
  93. </html>
  94.  
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
Nov 12 '10 #1
8 27464
Death Slaught
1,137 Top Contributor
I'm not sure that I'm seeing what you're talking about. What browser are you testing in? They don't move at all for me in Safari, Firefox, Chrome, or Opera.


Thanks, Death
Nov 13 '10 #2
Adam Cochran
4 New Member
I'm using chrome - the images move mostly when width is changed below standard resolution the shift the right and when I test it on my wide screen or I expand it across my dual screen resolution the images appear on the left hand side of the test instead of where they are supposed to go.

Regards,
Adam
Nov 13 '10 #3
Death Slaught
1,137 Top Contributor
Odd, I still don't see what you're seeing. I'll try to view your page on a PC when I have time. Hopefully someone else will be able to help you soon.


Regards, Death
Nov 13 '10 #4
Adam Cochran
4 New Member



Here is how the issue appears on extended resolutions (mouseover to view image)
Nov 15 '10 #5
Death Slaught
1,137 Top Contributor
Ah, thanks for the screen shot Adam.

Currently you have the containing division set to be 390px from left of the browser window. In the extended resolution there is more page for the division to go across, but it's still only being moved 390px. Try changing the 390px to 39%. Let me know how it goes.


Thanks, Death
Nov 15 '10 #6
Adam Cochran
4 New Member
I will try it when im in the office tomorrow.

Another question hough if a Div doesn't exist how do I place it? Let's say I create a new containing div and want it to appear as a right hand column? How can I set parameters is it always just a percentile base?
Nov 15 '10 #7
Death Slaught
1,137 Top Contributor
That entirely depends on the content. Now that I look at this more using absolute positioning isn't even necessary. Also, you're using a table for layout - something you should never do.

Let's see if we can get the current problem solved before adding and removing things.


Thanks, Death
Nov 16 '10 #8
JKing
1,206 Recognized Expert Top Contributor
When you absolutely position an element you are removing it from the flow and positioning it relative to the first parent element that is not static. The default is the <html> element. This is what is causing your image to always be X pixels from the top and X pixels from the left of your browser window.

There are several ways to fix this.

1)Use a container div and set it's position to relative around your absolutely positioned divs. This will require you to tweak the top and left values of your absolutely positioned divs.

2)Use a three column layout consisting of three fixed width divs floated to the left followed by a clear.

3)Use a "liquid" or "elastic" layout. This technique uses relative positioning, floats, and percentage based widths to shrink and grow with the browser window. Google can provide you with some examples if you choose this route.

A few things to note. The <u> tag and <font> tag are both deprecated. Tables shouldn't be used for layout. Line breaks shouldn't be used to add padding/margin.

Edit:Just noticed your CSS actually uses technique 1) that I mentioned on your header div. The header is set to relative and the children divs are set to absolute. You can refer to your own CSS for an example. :)
Nov 16 '10 #9

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

Similar topics

4
2865
by: Ben | last post by:
I have a page for my company that I need assistance with: http://www.eastex.net/ben/NewETN/subPage.htm When you resize the window (NS or IE) small enough that you have to scroll horizontally (because of logo image), scrolling right breaks the layout. I'm using 100% div widths, and these apparently don't reset when scrolling. I tried using...
2
1568
by: Despoina | last post by:
I have created a web site, where I use a dropdown menu when the mouse goes over an image. My problem is that when I resize the browser, the menu's position changes relatively and goes way to the left. I am stuck I don't know which parameter to change exactly so that the menu behaves properly. The page I have created can be seen in
4
1708
by: Gregor | last post by:
I am trying to use an image map with a mouseover function to show various DIV tags. I am not an expert, but what I've come up with works in IE but not in FireFox. Any insight would be greatly appreciated. Below is the js and CSS code <SCRIPT TYPE="text/javascript"> <!-- var layerRef="",styleSwitch="",curMenu="";
0
1000
by: mihyon | last post by:
I make maximize dialog used 'ShowWindow(SW_MAXIMIZE)'. and void CEds1000_3Dlg::OnLButtonDown(UINT nFlags, CPoint point) { // TODO: Add your message handler code here and/or call default if(){ AfxGetMainWnd()->PostMessage(WM_NCLBUTTONDOWN, HTCAPTION, MAKELPARAM(point.x,point.y)); //moving dialog
1
2227
by: Tamir Kamara | last post by:
Hi, I have a page with several server controls (textboxes, datagrid, ...) which are positioned absolutely from the right of the page (like RIGHT: 25px; POSITION: absolute;). that works well if the page has or doesn't have a scrollbar in any case (always). but when the page could have a vertical scrollbar (meaning that sometimes it appears...
6
1313
by: toby | last post by:
Hi there, can anyone help please? I have a calendar view made up of div tags for each day. I can highlight a number of days in a column by clicking on one and holding down shift and clicking on another one. each div tag is called "boxX_Y" where Y is the column and X is the row. The javascript knows the first clicked box, and the second and...
1
1004
by: ganesh22 | last post by:
Sir: I displayed XML Document in textbox for editing .it is displaying that xml document (with tags) as black colour .I wnt to display that xml document as a browser colour with red and black colours inside tags is red colour tags blue and answers black colour
10
5970
by: jay123 | last post by:
Hello All, I am struck in a problem with two Div(s), My code looks like <div style="width: 100%; font-family: Verdana, Sans-Serif; height: 80px; "> <div style="float:left; width:500px;"> <asp:Image ID="abc" runat="server" ImageUrl="../Images/abc.gif" /> </div> <div style="float:right; padding-left: 10px; padding-right: 20px;...
2
2209
by: lonelylonely | last post by:
how to display in new text field when i add option from drop down list?
0
7362
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7602
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
1
7368
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
5904
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5291
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
0
3407
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1837
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
983
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
657
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.