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

DiV possitioning

P: 5
i have a page at IT Zone Expert - Home
and in 1024x768 there is a problem with div containing text inside
(its moves to right )
other are sticked correctly.
div is declared :
<div style="position: absolute; top: 298px; left: 20%; width: 611px;">
and placed just before </form> tag
where is a problem.?
Jan 16 '09 #1
Share this Question
Share on Google+
4 Replies


drhowarddrfine
Expert 5K+
P: 7,435
The left margin on the parent <div> is doing this.
Jan 16 '09 #2

P: 5
the code of main page is :

(i cut not some heads)
Expand|Select|Wrap|Line Numbers
  1. <body bgcolor="#FFFFFF" text="#000000">
  2.  
  3.  
  4.     <form id="form1" runat="server">
  5. <div id="container">
  6. <div id="wb_" 
  7.         style="overflow:hidden;position:absolute;left:109px;top:7px;z-index:2; height: 168px; width: 541px;" 
  8.         align="left">
  9. <img src="images/visual-compbann.jpg" id="" alt="" align="top" border="0" style="width:541px;height:168px;"></div>
  10. <div id="wb_" style="position:absolute;left:798px;top:0px;width:3px;height:999px;z-index:3" align="left">
  11. <img src="images/img0002.gif" id="" align="top" alt="" title="" border="0" width="3" height="999"></div>
  12. <div id="wb_" 
  13.         style="position:absolute;left:0px;top:999px;width:800px;height:0px; z-index:4" 
  14.         align="left">
  15. <img src="images/img0003.gif" id="" align="top" alt="" title="" border="0" width="800" height="2"></div>
  16. <div id="wb_" style="position:absolute;left:0px;top:0px;width:101px;height:178px;z-index:7" align="left">
  17. <img src="images/img0013.png" align="top" alt="" border="0" width="102" 
  18.         height="102" 
  19.  
  20.  
  21.         style="position:absolute;left:0px; top:10px; width:102px;height:102px;z-index:19"><asp:Image 
  22.         ID="Image7" runat="server" ImageUrl="~/images/columnleft.jpg" />
  23.     </div>
  24. <div id="wb_" style="position:absolute;left:548px;top:0px;width:250px;height:171px;z-index:8" align="left">
  25. <img src="images/img0007.gif" id="" align="top" alt="" title="" border="0" width="250" height="171"></div>
  26. <div id="wb_" 
  27.         style="position:absolute;left:340px; top:121px; width:269px; height:42px;z-index:10" 
  28.         align="left">
  29. <font style="font-size:35px" color="#000080" face="Tahoma"><b>IT Zone Expert</b></font></div>
  30. <div id="wb_" style="position:absolute;left:102px;top:171px;width:698px;height:2px;z-index:11" align="left">
  31. <img src="images/img0009.gif" id="" align="top" alt="" title="" border="0" width="698" height="2"></div>
  32. <div id="wb_" style="position:absolute;left:105px;top:984px;width:676px;height:12px;z-index:15" align="center">
  33. <font style="font-size:9.3px" color="#000080" face="Verdana"><b>Copyright  2008 by &quot;IT Zone Expert&quot;&nbsp; &nbsp; All Rights reserved&nbsp; &nbsp; E-Mail: <a href="mailto:info@itzoneexpert.co.uk" class="style1">info@itzoneexpert.co.uk</a></b></font></div>
  34. <div id="wb_" style="position:absolute;left:123px;top:979px;width:652px;height:2px;z-index:18" align="left">
  35. <img src="images/img0012.gif" id="" align="top" alt="" title="" border="0" width="652" height="2"></div>
  36. &nbsp;<div id="wb_Html1" style="position:absolute;left:112px;top:922px;width:270px;height:20px;z-index:21" align="left">
  37.     <div style="position: absolute; top: -737px; left: 16px; height: 104px; width: 644px; margin-left: 0px;" 
  38.         align="left">
  39.  
  40.         <asp:ImageButton 
  41.             ID="homebutt" runat="server" BorderStyle="None" 
  42.             ImageUrl="~/images/Home-cien2.jpg" ImageAlign="Left" onclick="homebutt_Click" 
  43.             PostBackUrl="~/index.aspx" style="height: 20px" />
  44.         <asp:ImageButton ID="logbutt" runat="server" BorderStyle="None" 
  45.             ImageUrl="~/images/log in2.jpg" CausesValidation="False" 
  46.             ImageAlign="Left" PostBackUrl="~/login.aspx" />
  47.  
  48.         <asp:ImageButton ID="regbutt" runat="server" BorderStyle="None" 
  49.             CausesValidation="False" ImageAlign="Left" 
  50.             ImageUrl="~/images/register.jpg" PostBackUrl="~/register.aspx" />
  51.         <asp:ImageButton ID="servbutt" runat="server" BorderStyle="None" 
  52.             CausesValidation="False" ImageAlign="Left" 
  53.             ImageUrl="~/images/services.jpg" PostBackUrl="~/services.aspx" />
  54.         <asp:ImageButton ID="conbutt" runat="server" BorderStyle="None" 
  55.             CausesValidation="False" ImageAlign="Left" ImageUrl="~/images/contact.jpg" 
  56.             PostBackUrl="~/contact.aspx" />
  57.         <asp:ImageButton ID="clibutt0" runat="server" BorderStyle="None" 
  58.             CausesValidation="False" ImageAlign="Left" 
  59.             ImageUrl="~/images/our clients.jpg" PostBackUrl="~/clients.aspx" />
  60.         <asp:ImageButton ID="ImageButton1" runat="server" BorderStyle="None" 
  61.             CausesValidation="False" ImageAlign="Left" 
  62.             ImageUrl="~/images/tech news.jpg" PostBackUrl="~/news.aspx" />
  63.         <asp:ImageButton ID="logoutbutt" runat="server" BorderStyle="None" 
  64.             ImageAlign="Left" ImageUrl="~/images/logout.jpg" 
  65.             CausesValidation="False" Visible="False" onclick="logoutbutt_Click" 
  66.             PostBackUrl="~/index.aspx" />
  67.  
  68. <div id="wb_0" 
  69.         style="position:absolute;left:88px; top:41px; width:498px; height:41px; z-index:20; color: #0000FF;" 
  70.         align="center">
  71. <font style="font-size:24px" color="#FFFFFF" face="Verdana"><b>Welcome To Our IT 
  72.     Services World</b></font></div>
  73.  
  74.         <img alt="menu background" src="images/ramka-wypelnienie.jpg" 
  75.  
  76.  
  77.             style="border-style: none; width: 640px; height: 79px; position: absolute; top: 20px; left: 0px;" /></div>
  78. <!-- 1and1 -->
  79. <a href="http://1and1.co.uk/xml/init/?k_id=14272244" target="_blank"><img src="http://banner.1and1.co.uk/xml/banner?size=2&number=4" width="350" height="50"  border="0"/></a></div>
  80. <div id="wb_JavaScript1" 
  81.         style="position:absolute;left:678px;top:23px; width:100px;height:64px; z-index:22" 
  82.         align="left">
  83. <font style="font-size:12px;font-family:Arial;" color=#000000>
  84. <div id="basicdate">
  85. </div>
  86. </font>
  87. <script language="JavaScript" type="text/javascript">
  88.    var now = new Date();
  89.    var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
  90.    var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
  91.    var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();
  92.    var year = (now.getYear() < 1000) ? now.getYear() + 1900 : now.getYear();
  93.  
  94.    today = days[now.getDay()] + ", " + months[now.getMonth()] + " " + date + ", " + year;
  95.  
  96.    basicdate.innerHTML = today;
  97. </script>
  98.  
  99.  
  100. </div>
  101. <div id="wb_JavaScript2" 
  102.         style="position:absolute;left:679px; top:97px; width:100px;height:13px; z-index:23" 
  103.         align="left">
  104. <font style="font-size:12px;font-family:Arial;" color=#000000>
  105. <div id="basicclock">
  106. </div>
  107. </font>
  108. <script language="JavaScript" type="text/javascript">
  109. function clock() 
  110. {
  111.    var digital = new Date();
  112.    var hours = digital.getHours();
  113.    var minutes = digital.getMinutes();
  114.    var seconds = digital.getSeconds();
  115.    var amOrPm = "AM";
  116.    if (hours > 11) amOrPm = "PM";
  117.    if (hours > 12) hours = hours - 12;
  118.    if (hours == 0) hours = 12;
  119.    if (minutes <= 9) minutes = "0" + minutes;
  120.    if (seconds <= 9) seconds = "0" + seconds;
  121.    dispTime = hours + ":" + minutes + ":" + seconds + " " + amOrPm;
  122.  
  123.    basicclock.innerHTML = dispTime;
  124.    setTimeout("clock()", 1000);
  125. }
  126. clock();
  127. </script>
  128.  
  129. </div>
  130. <div id="wb_Image1" style="overflow:hidden;position:absolute;left:112px;top:879px;z-index:24" align="left">
  131. <a href="http://www.amazon.co.uk/gp/homepage.html/278-3895167-9896403?ie=UTF8&placement=home%5Fmulti.gif&tag=itma-21&link%5Fcode=hom"><img src="images/amazon-logo-151x32__V45462390_.gif" id="Image1" alt="" align="top" border="0" style="width:151px;height:32px;"></a></div>
  132. <div id="wb_Image2" style="overflow:hidden;position:absolute;left:278px;top:865px;z-index:25" align="left">
  133. <a href="http://www.dabs.com/homepage.aspx"><img src="images/dabs_logo.gif" id="Image2" alt="" align="top" border="0" style="width:158px;height:52px;"></a></div>
  134. <div id="wb_Image3" style="overflow:hidden;position:absolute;left:448px;top:867px;z-index:26" align="left">
  135. <a href="http://www.misco.co.uk/?sourceid=2003"><img src="images/misco_logo.gif" id="Image3" alt="" align="top" border="0" style="width:159px;height:49px;"></a></div>
  136. <div id="wb_Image4" style="overflow:hidden;position:absolute;left:622px;top:871px;z-index:27" align="left">
  137. <a href="http://www.microdirect.co.uk/?source=TradeDoubler"><img src="images/microdirect.gif" id="Image4" alt="" align="top" border="0" style="width:165px;height:31px;"></a></div>
  138. <div id="wb_Image6" style="overflow:hidden;position:absolute;left:470px;top:920px;z-index:31" align="left">
  139. <a href="http://www.bybrook-barn.co.uk/"><img src="images/bbarnlogo.jpg" id="Image6" alt="" align="top" border="0" style="width:321px;height:53px;"></a></div>
  140. </div>
  141.  
  142.  
  143.  
  144.     <div style="position: absolute; top: 298px; left: 20%; width: 611px;">
  145.     <table style="width: 100%; height: 551px;">
  146.         <tr>
  147.             <td class="style6">
  148.                 &nbsp;
  149.         <asp:Image ID="Image5" runat="server" ImageUrl="~/images/itzex2.gif" />
  150.             </td>
  151.             <td class="style7">
  152.                <font style="font-size:13px" color="#00008B" face="Verdana">We provide a wide 
  153.                 range of computer services at reasonable prices in South Kent and surrounding 
  154.                 areas (including Central London). We specialise in Computer <u><a href="./services.aspx" class="style1">
  155.                 SERVICES</a></u><b>,</b> our personnel offer high quality and reliable advice on 
  156.                 how to prevent future problems occurring. In addition, our friendly and 
  157.                 professional staff are here to answer any questions you may have about <br>
  158.                 our company or our services.</font></td>
  159.         </tr>
  160.         <tr>
  161.             <td class="style5">
  162.                 <font style="font-size:13px; text-align: center;" color="#00008B" 
  163.                     face="Verdana">We offer a <u>services</u>:<br>
  164. * Advise on What? Where? How? to buy or upgrade&nbsp; your <br>
  165.  computer, multimedia equipment and software;<br>
  166. * Security check, especially for wireless network (only in<br>
  167.  Ashford and South Kent areas);<br>
  168. * How to reduce your costs using a full range <u><a class="style1" 
  169.                     href="http://www.freeweboffice.co.uk/">Free and low costs programs </a></u>
  170.   e.g. Office applications,<br>
  171.  web online and portable programs - Software As A Services - <i>SAAS or Cloud Computing</i>;</font></td>
  172.             <td class="style3">
  173.  
  174.             <asp:Image ID="Image8" runat="server" ImageUrl="~/images/itzex3.gif" 
  175.                     style="text-align: right" />
  176.             </td>
  177.         </tr>
  178.         <tr>
  179.             <td class="style4" colspan="2">
  180.                 &nbsp;
  181.                 &nbsp;
  182.             <font style="font-size:13px" color="#00008B" face="Verdana">Whether you need <b><i>SERVICE, ADVICE</i></b> or a <b><i>SOLUTION</i></b>, we have what you need at prices you can afford. Just <b><i>visit </i></b>our <b><i>Computer Service and Repair Centre</i></b>, <b><i>Ashford</i></b>, Kent in Bybrook Barn Garden Centre.<br>
  183. At <b><i>IT Zone Expert</i></b>, our goal is to provide you with courteous, expedient, professional service of the highest caliber. Browse our Web site for more information about IT Zone Expert. </font>
  184.                 <font style="font-size:13px" color="#000000" face="Verdana">
  185. <br>
  186. </font><font style="font-size:13px" color="#00008B" face="Verdana">If you have any questions or would like to speak with our representative regarding our services, please call: 07886 007977 , e-mail us at <u><a href="mailto:info@itzoneexpert.co.uk" class="style1">info@itzoneexpert.co.uk</a></u></font></td>
  187.         </tr>
  188.     </table>
  189.     &nbsp;* * * * * * * * 
  190. </div>
  191.  
  192.     </form>
  193.     </body>
  194. </html>
i can't even find a parrent div here
Jan 16 '09 #3

P: 88
Can you please explain why are you enclosing all markup in a form element (<form>...</form>)? It looks definitely invalid to me.

It would be best to markup the document from scratch, but for a temporary solution:

You don't need to use absolute positioning in your divs. Just put the rest of your divs in your container div (<div id="container">) and remove absolute positioning.

I mean something like:

Expand|Select|Wrap|Line Numbers
  1. <div style=" margin: 297px 0 0 140px; width: 611px;">
instead of

Expand|Select|Wrap|Line Numbers
  1. <div style="position: absolute; top: 297px; left: 367px; width: 611px;">
(I suppose this div starts at line #144 in the code you posted above.)
Jan 18 '09 #4

P: 5
it is an aspx so the form is running at server the someone else write this file and left company, i will try today and post results
Jan 18 '09 #5

Post your reply

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