SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with position absolute

    first.jpgsecond.jpg

    first image cover photo has position relative and profile pic has position absolute..
    when scrolling the profile pic is above the menu bar ....

    can anyone suggest me how to overcome the problem in 2nd image

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Princepranay,

    Welcome to Sitepoint forums

    To help you with this problem we'd need to see some code or perhaps a link to the problem.

    Absolute elements are removed from the flow and therefore will overlap whatever is in the way so you should probably be using another method such as floating or containing the absolute child via position:relative on a parent. An absolute element is positioned in relation to the nearest ancestor that has a position defined other than static (i.e. relative or absolute (fixed elements are always placed in respect of the viewport)). If no such ancestor exists then the absolute element is placed in relation to the viewport.

    However without seeing the structure of your page it will be hard to be specific. You most likely don't want to move the element with relative positioning either as it is not meant for structural layout as such but for more subtle effects.

  3. #3
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks paul for the reply

    here is the link for problem http://www.xteam.co.in/abc

    here is the css for profile pic
    #photo{
    width : 180px;
    height : 200px;
    margin: -70px 0px 0px 20px;
    border:1px solid black;
    position: absolute;

    }

    here is the css for cover photo
    #cphoto{
    width:65%; margin-left: 60px;height: 300px;background: #fcfcfc;border-bottom: 1px black;postion: absolute;margin-top:00px;
    }

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

    Mcafee won't let me visit your link and gives me this message:

    Code:
    Warning: Dangerous Site
    Whoa!
    Are you sure you want to go there?
    
    http://www.xteam.co.in/abc may be risky to visit.
    
    Why were you redirected to this page?
    
        When we visited this site, we found it exhibited one or more risky behaviors.
    You need to check why you are getting this message and indeed check your site for any risky behaviour or virus that may lead to this message being presented. It may be a false positive but you need to stop the message appearing or no one will visit.

    Therefore, I cannot risk visiting the site and would ask that you just do a view source and then post the html and full css in here please.

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,621
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Off topic: Paul I got rid of macafee a while back. I use webroot antivirus and find it to be much more user friendly.

  6. #6
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    don't know why it is warning but when i did scanning online it has given clean.. any way

    html code

    <!doctype html>
    <html lang="en">
    <head>
    <title>pranay</title>

    <script type="text/javascript" src="jquery/jquery.js"></script>


    </head>
    <body>
    <div id="header">
    <div id="logo"><a href="http://www.xteam.co.in"> <h3>XTEAM</h3></a> </div>

    </div> <div id="cphoto" ><img src="b.jpg" width="100%" height="300"></div>
    <div id="profile_main">
    <div id="profile_mainleft">
    <div id="photo">
    <img src ="http://www.xteam.co.in/members/1_1356501891_pp.jpg" width="180" height="200" >
    </div>

    </div>
    <div id="profile_mainright">
    <div id="profile_mainright_ur" style="font-color: pink;font-weight:bold;font-family: verdana; font-size:20px; text-transform: capitalize;">pranay</div>
    <div id="profile_mainright_pr">
    <a href="http://www.xteam.co.in/login"><input type="button" class="user_profile_button" value="Login"></a>
    <a href="http://www.xteam.co.in/register"><input type="button" value="Register" class="user_profile_button"></a> </div>
    <div id="profile_user_info"></div>
    </div>

    </div>


    <div id="free"></div>
    <div id="profile_secondmain">
    <div id="wastea"></div>
    <div id="profile_status">

    <hr />
    </div>
    </body>
    </html>



    and the css

    #photo{
    width : 180px;
    height : 200px;
    margin: -70px 0px 0px 20px;
    border:1px solid black;
    position: absolute;


    }
    #cphoto{
    width:65%; margin-left: 60px;height: 300px;background: #fcfcfc;border-bottom: 1px black;postion: absolute;margin-top:0px;
    }

    div#header{
    position: fixed;
    top:-30px;
    left:0px;
    width:100%;
    color:white;
    padding:8px;
    height:60px;
    background: black;
    }

    #profile_main{
    width:65%;
    height: 200px;
    background: #fcfcfc;
    margin-left: 60px;

    }
    #profile_mainleft{
    width: 25%;
    height:200px;
    float: left;
    margin-left: 0px;

    }
    #profile_mainright{
    width: 75%;
    height: 200px;
    float: right;

    }
    #profile_mainright_pr{
    width: 65%;
    float:right;
    margin-top: 20px;

    margin-right: 0px;
    }
    #profile_mainright_ur{
    width: 30%;
    float: left;
    margin-top:20px;
    margin-left: 20px;

    }
    profile_mainright_pr a{
    text-decoration: none;
    }

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Add to div#header
    Code:
    z-index:1;
    Please be aware that sites that use {positon:absolute} and {position:fixed} to position most objects on the page are most inflexible and difficult to manage.

  8. #8
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank u very much ronpat solved the problem
    Quote Originally Posted by ronpat View Post
    Add to div#header
    Code:
    z-index:1;


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
  •