SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed position problem

    here is my page

    http://www.philipdusel.com/helpme.html (not how its going to look)

    please scroll and notice that one image stays fixed while the others move. this will be the behavior of my image gallery. the problem is when i make the page too small the top gets cut off.

    or here

    http://www.philipdusel.com/middle.html

    this one i cant make the div with the tree pic fixed without losing the vertical centering!

    please help id love it
    thanks

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi phillycheese,
    You need to start your own thread rather than posting in this old one that belongs to someone else.

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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    If you want a fixed element centred but still remain within the viewport then one way I can think of is to do something like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Horizontal and vertical centerl</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html, body {
        height:100&#37;;
        margin:0;
        padding:0;
    }
    body {
        background:#eae7d7;
        text-align:center;
        min-width:626px;
        min-height:400px;
    }
    #vertical {
        float:left;
        height:50%;
        margin-top:-198px;/* half vertical height*/
        width:100%;
    }
    #hoz {
        width:624px;
        margin-left:auto;
        margin-right:auto;
        height:394px;
        text-align:left;
        clear:both;
    }
    .test {
        color:#fff;
        margin:0;
        padding:0;
        width:624px;
        height:394px;
        position:fixed;
        border:1px solid silver;
        background:#666;
        overflow:auto;/* allow content to scroll inside element */
    }
    #pagecontent {
        position:absolute;
        left:0;
        top:0;
        width:100%;
    }
    </style>
    </head>
    <body>
    <div id="vertical"></div>
    <div id="hoz">
        <div class="test">Content goes here</div>
    </div>
    <div id="pagecontent">
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
    </body>
    </html>
    The centering is based on this example but the centered element is then made position:fixed (It won't work in IE6 of course).

    The rest of the page content will have to be contained in an absolute element so that it doesn't affect that structure. That will also mean making sure things stay clear of the centred element which shouldn't be too difficult.

    Usually fixed positioning is better for smaller elements because once the fixed element goes outside the viewport it is unreachable.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul OB let me just say if it wouldnt be creepy i would name my site after you. thanks soooo much. im using what you gave me, and it seems like everything is going to work out great...


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
  •