#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2010
    Posts
    6
    Rep Power
    0

    DIV and screen resolution problem


    Hi All,
    I have a fixed div which I am using as a footer in my application. here is the screen shot of my page please have a look first so u will understand what i am talking about.

    http://img192.yfrog.com/img192/5572/1280x768.gif

    Problem is that if I browse the application on 1024 x 768 pixels it works great but when i change the resolution up to 1280 x 800 pixels the image inside the div change its position. I want this to appear same on every resolution...any suggestions or workaround.

    the CSS code is below

    Code:
    #footer
    {
         position: fixed;  
        top: auto;
        left: auto;
        width: auto;
    }
    here is the HTML

    Code:
    <html>
    <head id="Head1" runat="server">
        <link href="../App_Themes/style.css" rel="stylesheet" type="text/css" />
        <script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"> </script>
        <title></title>
        
          <style type="text/css">
            .style1
            {
                width: 800px; background-color:White
               
            }
            .style2
            {
                height: 391px;
            }
            .style3
            {
                text-align: right;
            }
     
        </style>
    </head>
    <body bgcolor="#d7d7d7">
     <form runat="server">
        <div id="content" style="margin: auto; border: thin solid #C0C0C0; padding: 0px 0px 0px 0px; width: 820px; height: 595px" 
            align="center">
            <table align="center" class="style1">
                <tr>
                    <td style="font-family: 'Times New Roman', Times, serif; font-size: small; color: #FF0000;" 
                        class="style3">                              
                         <asp:ContentPlaceHolder ID="StatusBar" runat="server">                   
                         </asp:ContentPlaceHolder>
                         <asp:Image ID="Image1" runat="server" ImageUrl="~/images/appHeader.png" /> 
                    </td>
                 </tr>       
                <tr>
                    <td class="style2" align="left" valign="top">
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">                 
                        </asp:ContentPlaceHolder>
                    </td>
                </tr>
                <tr>
                    <%--<td style="background-color: #FF9933; height: 15px;">
                    &nbsp;</td>--%>
                </tr>
            </table>   
            <div id="footer">          
             </div>
    <%--    <table align="center" class="style1">    
        <tr>
           <td>
             <div id="footer">
              <img src="../images/footer.png" alt=""/>
             </div>
        </td>
        </tr>
       </table>
    --%>   </div>
    </form>
    </body>
    </html>
    I want a table below the container div and want to place my footer div inside that table and on every resolution it should come up the same...i did try but its not working...help need
  2. #2
  3. Contributing User
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Dec 2003
    Posts
    2,346
    Rep Power
    579
    It looks like you have two footer divs. Can you show your code after it's been parsed by asp?
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2010
    Posts
    6
    Rep Power
    0
    Mark please ignore the first one as i've put it when i was testing it so consider it as "Remarked" code. but strange thing is if i don't set the left, height and width properties in footer div it doesnt appear.

    I think when I place the image inside the div no matter how big the image is it should adjust according no?? what can we do to adjust the image according to the div or TD??

    anyway here is the rendered code.

    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head id="ctl00_Head1"><link href="../App_Themes/style.css" rel="stylesheet" type="text/css" />
        <script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"> </script>
        <title>
    
    </title>
        
          <style type="text/css">
            .style1
            {
                width: 800px; background-color:White
               
            }
            .style2
            {
                height: 391px;
            }
            .style3
            {
                text-align: right;
            }
     
        </style>
    </head>
    <body bgcolor="#d7d7d7">
     <form name="aspnetForm" method="post" action="AdminPanel.aspx" id="aspnetForm">
    <div>
    <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
    <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMzM4MDA1OTQ0ZBgBBR5fX0NvbnRyb2xzUmVxdWlyZVBvc3RCYWNrS2V5X18WAgUiY3RsMDAkU3RhdHVzQmFyJExvZ2luU3RhdHVzMSRjdGwwMQUiY3RsMDAkU3RhdHVzQmFyJExvZ2luU3RhdHVzMSRjdGwwM1nklUNjMdDR8zXNSRpe4cDMTTKN" />
    </div>
    
    <script type="text/javascript">
    //<![CDATA[
    var theForm = document.forms['aspnetForm'];
    if (!theForm) {
        theForm = document.aspnetForm;
    }
    function __doPostBack(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }
    //]]>
    </script>
    
    
    <div>
    
    	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgK7hcrTAQLzkJT7BorqxE1ECM1HK5/xo3XSmRgl2We2" />
    </div>
        <div id="content" style="margin: auto; border: thin solid #C0C0C0; padding: 0px 0px 0px 0px; width: 820px; height: 595px" 
            align="center">
            <table align="center" class="style1">
                <tr>
                    <td style="font-family: 'Times New Roman', Times, serif; font-size: small; color: #FF0000;" 
                        class="style3">                              
                         
        <span id="ctl00_StatusBar_StatusMsg" style="color:#3F3F3F;font-family:Arial;font-size:Small;font-weight:bold;"></span> | 
        <a id="ctl00_StatusBar_LoginStatus1" href="javascript:__doPostBack('ctl00$StatusBar$LoginStatus1$ctl00','')">Logout</a>
        |
    
                         <img id="ctl00_Image1" src="../images/appHeader.png" style="border-width:0px;" /> 
                    </td>
                 </tr>       
                <tr>
                    <td class="style2" align="left" valign="top">
                        
        <table width="100%" style="height: 409px">
    <tr>
    <td rowspan="11" 
            style="width: 315px; font-family: 'Arial Black'; font-size: medium; text-align: center;" 
            valign="top">
        <div style="text-align: left">
        <br />
        <br />
        User Administration Panel<br />
        </div>
        <table style="width: 100%">
            <tr>
                <td style="font-family: Arial, Helvetica, sans-serif; font-size: small; color: #808080; text-align: justify;">
                    User administration panel offers the Setup screens so you can customize HelpDesk 
                    application for your company and administer Users, Groups and Customers.</td>
            </tr>
            <tr>
                <td style="font-family: Arial, Helvetica, sans-serif; font-size: small; color: #808080; text-align: center;">
                    <img src="../images/24x7Help.png" style="width: 210px; height: 173px" alt="" /></td>
            </tr>
        </table>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </td>
    </tr>
    <tr>
    <td class="style3" style="width: 124px">
       <a href="ManageGroups.aspx"> 
       <img src="../images/user-group-icon.png" alt="" border="0"
            onmouseover="this.src='../images/big_user-group-icon.png'"
            onmouseout="this.src='../images/user-group-icon.png'" /></a></td>
    <td style="font-family: 'Arial Narrow'; font-size: small; color: #0000FF;" 
            valign="top">
        <span style="font-family: Arial, Helvetica, sans-serif"><b>
            <a href="ManageGroups.aspx" style="text-decoration: none"> User Groups</a></b></span><table style="width: 100%">
            <tr>
                <td style="font-family: Arial, Helvetica, sans-serif; font-size: small; color: #808080; text-align: justify;">
                    Groups are primarily used in permission assignments.
                    <br />
                    You can also use a group to populate a role or to make
                    <br />
                    a shared credential available to multiple users.</td>
            </tr>
        </table>
    </td>
    </tr>
    <tr>
    <td class="style3" style="width: 124px; height: 13px;" valign="middle">
        </td>
    <td style="font-family: 'Arial Black'; font-size: small; height: 13px;" 
            valign="top">
        </td>
    </tr>
    <tr>
    <td class="style3" style="width: 124px">
      <a href="ManageDepartments.aspx">  <img src="../images/Departments.png" alt="" border="0"
         onmouseover="this.src='../images/big_Departments.png'"
            onmouseout="this.src='../images/Departments.png'" /></a></td>
    <td style="font-family: 'Arial Black'; font-size: small; color: #0000FF;" 
            valign="top">
        <span style="font-family: Arial, Helvetica, sans-serif; font-weight: bold">
        <a href="ManageDepartments.aspx" style="text-decoration :none"> Departments </a></span>
        <table style="width: 100%">
            <tr>
                <td style="font-family: Arial, Helvetica, sans-serif; font-size: small; color: #808080; text-align: justify;">
                    Departments represent separate areas of an organization. It allows 
                    administrators to create different technical support department.</td>
            </tr>
        </table>
    </td>
    </tr>
    <tr>
    <td class="style3" style="width: 124px">
        &nbsp;</td>
    <td style="font-family: 'Arial Black'; font-size: small" valign="top">
        &nbsp;</td>
    </tr>
    <tr>
    <td class="style3" 
            style="color: #0000FF; font-family: Arial, Helvetica, sans-serif;">
        <img src="../images/Staff-User-icon.png" alt="" border="0"
                  onmouseover="this.src='../images/big_Staff-User-icon.png'"
            onmouseout="this.src='../images/Staff-User-icon.png'" /></td>
    <td style="font-family: 'Arial Black'; font-size: small" valign="top">
        <span style="font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #0000FF;">
        Staff</span><table style="width: 100%">
            <tr>
                <td style="font-family: Arial, Helvetica, sans-serif; font-size: small; color: #808080; text-align: justify;">
                    Allow administrators to create staff members to manage the assigned tickets and 
                    resolve on time.</td>
            </tr>
        </table>
    </td>
    </tr>
    <tr>
    <td class="style3" 
            style="width: 124px; font-family: 'Arial Black'; font-size: medium;">
        &nbsp;</td>
    <td>
        &nbsp;</td>
    </tr>
    <tr>
    <td class="style3" style="width: 124px">
        <img src="../images/Man-Brown-icon.png" alt="" border="0"
             onmouseover="this.src='../images/big_Man-Brown-icon.png'"
             onmouseout="this.src='../images/Man-Brown-icon.png'" />
     </td>
    
    <td style="font-family: Arial, Helvetica, sans-serif; font-size: small; color: #0000FF;" 
            valign="top">
        <b>Customers</b><table style="width: 100%">
            <tr>
                <td style="font-family: Arial, Helvetica, sans-serif; font-size: small; color: #808080; text-align: justify;">
                    Allows administrator to create customers in the database and optionally send 
                    them a welcome e-mail which includes their password.</td>
            </tr>
        </table>
    </td>
    </tr>
    <tr>
    <td class="style3" style="width: 124px">
        &nbsp;</td>
    <td>
        &nbsp;</td>
    </tr>
    <tr>
    <td class="style3" style="width: 124px">
        <img src="../images/submitticket.png" alt="" border="0" 
             onmouseover="this.src='../images/big_submitticket.png'"
             onmouseout="this.src='../images/submitticket.png'"/></td>
    <td style="font-family: Arial, Helvetica, sans-serif; font-size: small; color: #0000FF;" 
            valign="top">
        <b>Tickets Administration</b><table style="width: 100%">
            <tr>
                <td style="font-family: Arial, Helvetica, sans-serif; font-size: small; color: #808080; text-align: justify;">
                    Centralized ticket management for administrators and montoring of assigned 
                    tickets to staff members.<br />
                    <br />
                </td>
            </tr>
        </table>
    </td>
    </tr>
    <tr>
    <td class="style3" style="width: 124px">
        &nbsp;</td>
    <td style="font-family: Arial, Helvetica, sans-serif; font-size: small; color: #0000FF;" 
            valign="top">
        &nbsp;</td>
    </tr>
    </table>
    
                    </td>
                </tr>
                <tr>
                    
                </tr>
            </table>          
        <table align="center" class="style1">    
        <tr>
           <td>
             <div id="footer">
              <img src="../images/footer.png" alt=""/>
             </div>
        </td>
        </tr>
       </table>
     </div>
    </form>
    </body>
    </html>
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Location
    Hobart, Tasmania
    Posts
    475
    Rep Power
    287
    Using tables for layout? Why?

    Code:
     <table align="center" class="style1">    
        <tr>
           <td>
             <div id="footer">
              <img src="../images/footer.png" alt=""/>
             </div>
        </td>
        </tr>
       </table>
    Pointless!

    Code:
     <div id="footer">
        <img src="../images/footer.png" alt=""/>
     </div>
    Why bother wrapping a DIV in a table when there's only one cell?

    I suggest you clean up your markup before attempting to style it ... you've got style tags smattered all over the shop ... it looks like you've had a break in.

    Code:
    <br/><br/><br/>
    Is it cold?
    Latery Matey
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2010
    Posts
    6
    Rep Power
    0
    I am 100% with you..I guess I should use DIV without using tables..but how can i convert this into div
    <table>
    <tr>
    <td> </td>
    <td> </td>
    </td> </td>
    </tr>
    </table>

    actually want my left and right corners into one td and would repeat the middle part...how to do this?


    Originally Posted by l8rm8e
    Using tables for layout? Why?

    Code:
     <table align="center" class="style1">    
        <tr>
           <td>
             <div id="footer">
              <img src="../images/footer.png" alt=""/>
             </div>
        </td>
        </tr>
       </table>
    Pointless!

    Code:
     <div id="footer">
        <img src="../images/footer.png" alt=""/>
     </div>
    Why bother wrapping a DIV in a table when there's only one cell?

    I suggest you clean up your markup before attempting to style it ... you've got style tags smattered all over the shop ... it looks like you've had a break in.

    Code:
    <br/><br/><br/>
    Is it cold?
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2009
    Location
    Hobart, Tasmania
    Posts
    475
    Rep Power
    287
    I found a pretty cool resource for CSS layouts at http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

    I suggest you pick the layout that closest matches your needs and do some copy/pasting (a fresh start).

    There are quite a few sites like that, offering templates containing much wisdom.
    Latery Matey
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2013
    Posts
    2
    Rep Power
    0

    how to fixed position of a div for all screen resolutions


    Hi All,

    Problem is that if I browse the application on 1024 x 768 pixels it works great but when i change the resolution up to 1280 x 800 pixels the login table inside the div change its position. I want this to appear same on every resolution...any suggestions or workaround.

    code is below:
    img#bg
    {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    <form id="form1" runat="server">
    <img src="../../../../Images/LoginBackGround_Image.bmp" alt="BG Image" id="bg" />

    <div style="position: relative">

    <div style="position: absolute; margin-top:30%; margin-left:70%; border: 1px solid #0570E3; z-index: 1;">

    <table cellpadding="1" cellspacing="5">
    <tr>
    <td>
    </td>
    <td>
    </td>
    </tr>
    <tr>
    <td>
    /td>
    <td>
    </td>
    </tr>
    </table>

    </div>
    </div>
    </form>
    i try a lot but itís not working for all screen resolution ...help need

IMN logo majestic logo threadwatch logo seochat tools logo