SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    what can be used instead of the absolute position?

    Hello,

    I am showing hide/show login panel on the top of the page(exactly right side like a twitter) and my problem is screen resolution. In the small screen (1024*768) this link shows properly but when i see it in the big screen (1600*683) it goes far away(on the right side) from the exact position.

    Here is my code-
    Code CSS:
    #login-link{
    	    position: absolute;
    	    top: 0px;
    	    right: 0px;
    	    display: block;
    	    background: #17B5F2;
    	    padding: 5px 15px 5px 15px;
    	    margin: 130px 30px 0 0;
     
     
    	}
    	#login-panel{
    	    position: absolute;
    	    top: 24px;
    	    right: 0px;
    	    width: 190px;
    	    padding: 10px 15px 5px 15px;
    	    background: url(../images/login-bg2.gif);
    	    border:6px solid #17B5F2;
    	    font-size: 8pt;
    	    font-weight: bold;
    	    color: #FFF;
    	    display: none;
     
    	    margin: 130px 30px 0 0;
    	    z-index:5;
          }

    Can anyone please tell me how can i make this work in big screen resolution as well?

    Thanks in advance.

  2. #2
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my whole code

    HTML 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>Create a sliding Login box with CSS and jQuery</title>
    <!-- Demo Styles -->
    <style type="text/css">
    #demo-header{
    	    width: 980px;
    	    margin: 0 auto;
    	    position: relative;
    	}
    	#login-link{
    	    position: absolute;
    	    top: 0px;
    	    right: 0px;
    	    display: block;
    	    background: #17B5F2;
    	    padding: 5px 15px 5px 15px;
    	    margin: 130px 30px 0 0;
    	    	
    	}
    	#login-panel{
    	    position: absolute;
    	    top: 24px;
    	    right: 0px;
    	    width: 190px;
    	    padding: 10px 15px 5px 15px;
    	    background: url(../images/login-bg2.gif);
    	    border:6px solid #17B5F2;
    	    font-size: 8pt;
    	    font-weight: bold;
    	    color: #FFF;
    	    display: none;
    	    
    	    margin: 130px 30px 0 0;
    	    z-index:5;
          }
    	label{
    	    line-height: 1.8;
    	    color:#2F2F2F;
    	    float:left;
    	    margin:0 0 0 2px;
    	    xborder:1px solid #000;
    	}
    	
    	#header #sub-header #sec-sub-header #reg-with-us a { line-height:38px; text-indent:7px; margin: 50px 30px 0 0;
     padding:0 0 0 10px; display:block; text-decoration:none; color:#fff; font-style:italic; font-size:15px; }
    /****** Ends ***/
    
    
    </style>
    <!-- Demo Scripts -->
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $.noConflict();
     jQuery(document).ready(function($) {
    
    	$("#login-link").click(function(){
    		$("#login-panel").slideToggle(200);
    	})
    })
    $(document).keydown(function(e) {
    	if (e.keyCode == 27) {
    		$("#login-panel").hide(0);
    	}
    });
    
    </script>
    
    </head>
        <body>
    
    <div id="demo-header">
        <div id="reg-with-us"><a href="" title="">Register </a></div>
        <div id=""><a href="" title="">Career</a></div>
    
        <a id="login-link" href="#login" title="Login">Clients Area</a>
    <div id="login-panel">
    <form action="" method="post">
    <p>
    <label>Username:
    <input name="username" type="text" value="" />
    </label> <br />
    <label>Password:
    <input name="password" type="password" value="" />
    </label><br /><br />
    
    <input type="submit" name="submit" value="Sign In" />
    <small>Press ESC to close</small>
    </p>
    </form>
    </div><!-- /login-panel -->
    
        </body>
    </html>
    I want to use this hide/show panel after the image i am having in my header. I have few links besides this panel. so when i checked in the 1024*768 resolution , all these links are working properly. but same code with 1600*683 resolution panel's shifting in the right side.

    Any help?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,494
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I''m a little confused because looking at your code the panel is within #demo-header and therefore the panel will always be at the right of #demo-header no matter what the screen resolution is.

    It will always appear at the right of that 960px element because position:relative creates the stacking context for the absolutely placed panel.

    We may need to see your actual page unless you can clarify what is happening as I don't see any difference depending on screen res because of the fixed widths used.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •