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

Hi phillycheese,
You need to start your own thread rather than posting in this old one that belongs to someone else. :wink:

(Moved to New thread)

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.


<!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.

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…