Centered fixed divs ....im posting this again because its more a development issue

How do I vertically center a fixed positioned element.

Issue 1) When position:fixed elements get cut off from the viewport (or it goes into a scroll area) then it’s lost. We discussed this in the previous quiz if you want to check that out :slight_smile:

You can vertical center iwth position:fixed assuming you know the height. Example


#element
{
  position:fixed;
  height:400px;/*needed*/
  top:50%;
  margin-top:-200px;/*half the height*/
}

thanks ryan i appreciate the quick response

You’re welcome phillycheese :wink:

Off Topic:

Hungry now…nomnomnom…:rofl:

Hi,

You just haven’t accounted for the heights correctly and the body’s min-height was wrong.

Here is your code simplified:


<!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>hey</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:#eai7d7;
    text-align:center;
    min-width:626px;
}
#vertical {
    float:left;
    height:50%;
    margin-top:-227px;/* 4x 102px + 3 x 15px = 453px divided by 2 = 226.5px = half vertical height - except there's no such thing as half a pixel.*/
    width:100%;
}
#hoz {
    width:624px;
    margin-left:auto;
    margin-right:auto;
    height:500px;
    text-align:left;
    clear:both;
}
#pagecontent {
    position:absolute;
    left:0;
    top:0;
    width:100%;
}
.box {
    position:relative;
    width:624px;
    height:100px;
    z-index:1;
    border:1px solid #000;
    color:#000000;
    margin:0 0 15px;
}
.last{margin:0}
a:link, a:visited {
    text-decoration: none;
    color:#000000;
}
</style>
</head>
<body>
<div id="vertical"></div>
<div id="hoz">
    <div class="test">
        <div class="box">work</div>
        <div class="box">resume</div>
        <div class="box">links</div>
        <div class="box last">contact</div>
    </div>
</div>
</body>
</html>

There is no such thing as half a pixel so stop doing it!! :slight_smile:

Here is an example of vertical centering a fixed positioned along with a rough script that you wanted to change your gallery images.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="resource-type" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>l</title>
<style type="text/css">
a img {
    border:none
}
p {
    margin:0 0 1em
}
html, body {
    height:100&#37;;
    margin:0;
    padding:0;
}
body {
    min-width:626px;
    min-height:400px;
    text-align:left;
}
#vertical {
    float:left;
    height:50%;
    margin-top:-320px;/* half vertical height*/
    width:100%;
}
#hoz {
    width:954px;
    margin-left:auto;
    margin-right:auto;
    height:641px;
    text-align:left;
    clear:both;
}
.test {
    color:#fff;
    margin:0;
    padding:0;
    width:509px;
    height:641px;
    position:fixed;
}
* html .test {
    position:relative;
}
#pagecontent {
    position:absolute;
    left:0;
    top:0;
    width:100%;
}
#hide1 {
    position:absolute;
    right:-100px;
    top:50%;
    width:44px;
    margin-top:-5px;
}
* html #hide1 {
    right:-150px;
}
.arrowleft, .arrowleft img {
    float:left;
    cursor: pointer;
}
.arrowright, .arrowleft img {
    float:right;
    cursor: pointer;
}
ul.thumbnails {
    width:202px;
    position:absolute;
    right:10px;
    top:0px;
    margin:0;
    padding:0;
    list-style:none;
}
ul.thumbnails li {
    padding:4px;
    float:left
}
ul.thumbnails li a {
    width:59px;
    height:75px;
    float:left;
}
.thumbnails img {
    cursor: url(zoomie315.cur), -moz-zoom-in;
}
#main {
    position:absolute;
    left:0;
    top:0;
    min-width:870px;
    width:100%;
}
ul.thumbnails li a {
    line-height:75px;
    text-align:center;
    background:red;
    color:#fff;
    font-size:16px;
    text-decoration:none;
}
ul.thumbnails li a:hover {
    background:blue
}
#caption {
    color:#000;
    width:125px;
    margin:20px 0 0 -40px;
    background:#fcc;
    text-align:center;
    position:relative;
}
</style>
</head>
<body>
<div id="vertical"></div>
<div id="hoz">
    <div class="test">
        <p><img id="a0" src="booing.gif" alt="Oil on Canvas"></p>
        <div id="hide1"><img id="arrowleft" src="/leftBlackArrow.gif" alt="previous" > <img id="arrowright" src="/rightBlackArrow.gif" alt="next">
            <p id="caption">oil on canvas</p>
        </div>
    </div>
</div>
<div id="main">
    <ul id="thumbnails" class="thumbnails">
        <li><a href="#"><img  alt="oil on canvas" id="img1" src="/booing.gif" width="59" height="75" ></a></li>
        <li><a href="#"><img alt="Image Number 2" id="img2" src="/mymy1.gif" width="59" height="75" ></a></li>
        <li><a href="#"><img alt="Image Number 3" id="img3" src="/mymy2.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="Image Number 4" id="img4" src="/mymy3.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="oil on canvas" id="img5" src="/booing.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="Image Number 6" id="img6" src="/mymy1.gif" width="59" height="75" ></a></li>
        <li><a href="#"><img alt="Image Number 7" id="img7" src="/mymy2.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="Image Number 8" id="img8" src="/mymy3.gif" width="59" height="75"></a></li>
    </ul>
</div>
<script type="text/javascript">
var RotateImg =
{    

    init: function()
    {
        if (!document.getElementById) return;
        RotateImg.bigImg = document.getElementById("a0");  
        RotateImg.prev = document.getElementById("arrowleft");
        RotateImg.next = document.getElementById("arrowright");
        RotateImg.pointer = 1;
        RotateImg.myImage = document.getElementById("thumbnails").getElementsByTagName('img');
        RotateImg.myCaption = document.getElementById("caption");

        for (var i=0, ii = RotateImg.myImage.length; i < ii; i++)
        {
                RotateImg.myImage[i].onclick = RotateImg.clickHandler;
        }
        
        RotateImg.prev.onclick = function()
        {
            if (RotateImg.pointer > 1 && RotateImg.pointer < RotateImg.myImage.length+1)
                {
                        RotateImg.pointer -= 1;
                        RotateImg.swapImg();
                        return false;                
                }
        }
        
        RotateImg.next.onclick = function() {
                if (RotateImg.pointer > 0 && RotateImg.pointer < RotateImg.myImage.length)
                {
                        RotateImg.pointer += 1;
                        RotateImg.swapImg();
                        return false;
                }
        }
    },

    swapImg : function()
    {
        var el = "img" + RotateImg.pointer;
        var swap = document.getElementById(el);        
        RotateImg.bigImg.src =     swap.src;
        if (swap.getAttribute('alt'))
        {
                RotateImg.myCaption.innerHTML = swap.alt;
        }
        else
        {
                RotateImg.myCaption.innerHTML = "No Caption available";
        }
    },
    
        clickHandler: function()
    {
            RotateImg.bigImg.src = this.src;
            var num = this.id;
            num = (num.substring(3));
            RotateImg.pointer = parseInt(num,10);
            RotateImg.swapImg();
            return false;
    }
};

RotateImg.init();

</script>
</body>
</html>



whatever you did is great thank you thank you

it just moved the image from the vertical center center and pushed it down a bit…what is the culprit? it seems that all the css styles relating to the vertical centering did not change, so is it in the javascript?

thank you

i am going to keep trying to figure it out, but as usual i greatly appreciate your help

It’s probably the top margin on the p element.

Add this:


p {margin:0 0 1em}


how would i get multiple divs (stacked on top of each other, and next to each other) centered vertically, and horizontally…i tried t oplug the divs into the script you had given me which worked for the first issue i was having . i adjusted the height and half height to account for all of the divs and spacers but neither is it centered vertically or horizontally…?

<!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%;
margin:0;
padding:0;
}
body {
background:#eai7d7;
text-align:center;
min-width:626px;
min-height:500px;
}
#vertical {
float:left;
height:50%;
margin-top:-225px;/* half vertical height*/
width:100%;
}
#hoz {
width:624px;
margin-left:auto;
margin-right:auto;
height:430px;
text-align:left;
clear:both;
}
.test {
color:#7B68EE;
margin:0;
padding:0;
width:624px;
height:430px;

position:fixed;

}
#pagecontent {
position:absolute;
left:0;
top:0;
width:100%;
}
#Layer1 {
position:relative;
width:624px;
height:100px;

z-index:1;

 border:1.85px solid #000;

}
#Layer2 {
position:relative;
width:624px;
height:100px;

z-index:1;

 border:1.85px solid #000;

}
#Layer3 {
position:relative;
width:624px;
height:100px;

z-index:1;


 border:1.85px solid #000;

}
#Layer4 {
position:relative;
width:624px;
height:100px;

z-index:1;



 border:1.85px solid #000;

}
#Love {
position:relative;
width:624px;
height:10px;

z-index:1;

}
</style>
</head>
<body>
<div id=“vertical”></div>
<div id=“hoz”>
<div class=“test”>

<div id=“Layer1”><a href=“paulob.html”>work</a></div>
<div id=“Love”></div>
<div id=“Layer2”>resume</div>
<div id=“Love”></div>
<div id=“Layer3”>links</div>
<div id=“Love”></div>
<div id=“Layer4”>contact</div>

</body>
</html>

Hi,

The example above looks centred both horizontally and vertically to me (apart from some body margins etc) so i’m not quite sure what you are after. (You have a couple of missing closing divs at the end though.)

What is wrong with the above or did you want some other sort of behaviour?

although its pretty much good enough result for me, its not centered the same way as the the code centered my first page u helped me with. reduce the vertical height of the window to near nothing and youll see see that the divs hit the top when their is still space beneath. to get the vertical centering i added up the heights of all divs, then my half height was half of that…well that put it somewhere at the top of the page or bottom…i forget but definately not center. so i kept changing the value randomly till it got in the near center. the same for horizontal. it was completely illogical to me, and id love a way to center multiple divs on top of each other, in a straightforward and predictable manner


<!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>hey</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {
    height:100%;
    margin:0;
    padding:0;
}
body {
    background:#eai7d7;
    text-align:center;
    min-width:626px;
    min-height:500px;
}
#vertical {
    float:left;
    height:50%;
    margin-top:-250px;/* half vertical height*/
    width:100%;
}
#hoz {
    width:624px;
    margin-left:auto;
    margin-right:auto;
    height:500px;
    text-align:left;
    clear:both;
}
.test {
    color:#0606F9;
    margin:0;
    padding:0;
    width:624px;
    height:500px;
   
    position:fixed;
    
   
}
#pagecontent {
    position:absolute;
    left:0;
    top:0;
    width:100%;
}
#Layer1 {
    position:relative;
    width:624px;
    height:100px;
    z-index:1;
    border:1.85px solid #000;
    color:#000000;
    
}
#Layer2 {
    position:relative;
    width:624px;
    height:100px;
    z-index:1;
    border:1.85px solid #000;
    color:#000000;
}
#Layer3 {
    position:relative;
    width:624px;
    height:100px;
    z-index:1;
    border:1.85px solid #000;
    color:#000000;
}
#Layer4 {
    position:relative;
    width:624px;
    height:100px;
    z-index:1;
    border:1.85px solid #000;
    color:#000000;
    
}
#Love {
    position:relative;
    width:624px;
    height:10px;
    z-index:1;
    color:#000000;
}
#hey {
    text-align:center;
    color:#0606F9;
}
a:link, a:visited { text-decoration: none;
color:#000000;
 } 
</style>
</head>
<body>
<div id="vertical"></div>
<div id="hoz">
    <div class="test">

<div id="Layer1">work</div>
<div id="hey">spacer</div>
<div id="Layer2">resume</div>
<div id="hey">spacer</div>
<div id="Layer3">links</div>
<div id="hey">spacer</div>
<div id="Layer4">contact</div>


</body>
</html>

First things first, let’s get your HTML valid, I have to run to work but you need to get your HTML valid

  1. You have missing </div>'s for the test and the hoz element.
  2. You also illegally wrap blocks around the inline anchors, switch that up (so the anchor is inside the div) and to get the anchor linking the entire block , just set display:block on the anchor.

To get horizontally and vertical centering with AP elements you normally do something like this


#element
{
  position:absolute;
  height:400px;/*needed*/
  width:400px;/*needed*/
  top:50&#37;;
  left:50%;
  margin-left:-200px;/*half the width*/
  margin-top:-200px;/*half height*/
  background:red;/*aesthetics*/
}

the #element css you provided makes the divs go off the top of the page when the window is too small…id like it to stop at the top.

Thanks

Thread Pruned - Please don’t post links if you are worried abut Google finding them as we do not usually edit threads on request :slight_smile:

thanks for your time and effort Paul. You basically made my site for me. i cant thank you enough

one last thing…you know the name of my site…

the page ****.com/work.html

when the window is too small and a horizontal scroll appears it drags only the thumbnails. id like it to function like a “normal” horizontal scroll where the whole page moves together. i know the main img is fixed so with that being so is there some way of accomplishing this?

Thanks

No, you can’t scroll fixed elements because they are fixed lol :slight_smile:

They can’t be fixed and non fixed at the same time so it is impossible.

Perhaps you would have been better to put all your thumbnails in a 100% high container that has its own scrollbars so that it always stays in the viewport and then you wouldn’t need to have the big image at a fixed position because the thumbnails would never stretch the viewport.

how about preventing my thumbnails from moving (it seems ignoring) their right margin when i scroll. i would think if i gave them a right margin they would respect that no matter how large the page.???

thanks

id like my page top scroll as “one piece” horizontally, but not vertically. the problem i have is a fixed div not wanting to move when scrolled

ill try to be more clear…when the window is too small to display my full page…and i scroll horizontally the only thing that moves is the thumbnail…is there any way of making the whole page move as “one piece”?

thanks


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>


<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title></title>
<style type="text/css">
a img {
    border:none
}
html, body {
    height:100&#37;;
    margin:0;
    padding:0;
}
body {
    min-width:626px;
    min-height:400px;
    text-align:left;
}
#vertical {
    float:left;
    height:50%;
    margin-top:-327px;/* half vertical height*/
    width:100%;
}
#hoz {
    width:954px;
    margin-left:auto;
    margin-right:auto;
    height:655px;
    text-align:left;
    clear:both;
}
.test {
    margin:0;
    padding:0;
    width:509px;
    height:655px;
    position:fixed;
    padding-left:7px;
    padding-top:7px;
    padding-bottom:7px;
}
* html .test {
    position:relative;
}
#pagecontent {
    position:absolute;
    left:0;
    top:0;
    width:100%;
}
#hide1 {
    position:absolute;
    right:-100px;
    top:50%;
    width:44px;
    margin-top:-5px;
    padding-right:6px;
}
* html #hide1 {
    right:-150px;
}
.arrowleft, .arrowleft img {
    float:left;
    cursor: pointer;
}
.arrowright, .arrowleft img {
    float:right;
    cursor: pointer;
}
ul.thumbnails {
    width:202px;
    position:absolute;
    right:10px;
    top:0px;
    margin:0;
    padding:0;
    list-style:none;
}
ul.thumbnails li {
    padding:4px;
    float:left
}
ul.thumbnails li a {
    width:59px;
    height:75px;
    float:left;
}
.thumbnails img {
   
}
#main {
    position:absolute;
    left:0;
    top:0;
    min-width:870px;
    width:100%;
}
ul.thumbnails li a {
    line-height:75px;
    text-align:center;
    background:red;
    color:#fff;
    font-size:16px;
    text-decoration:none;
}
ul.thumbnails li a:hover {
    background:blue
}
#caption {
    color:#000;
    width:125px;
    margin:20px 7px 0 -40px;
    background:#fcc;
    text-align:center;
    position:relative;
}
p {margin:0 0 1em}
</style>
</head>
<body>
<div id="vertical"></div>
<div id="hoz">
    <div class="test">

        <p><img id="a0" src="booing.gif" alt="Oil on Canvas"></p>
        <div id="hide1"><img class="arrowleft" id="arrowleft" src="leftBlackArrow.gif" alt="previous" > <img class="arrowright" id="arrowright" src="rightBlackArrow.gif" alt="next">
            <p id="caption">2009, oil on canvas, 24"x30"</p>
        </div>
    </div>
</div>
<div id="main">
    <ul id="thumbnails" class="thumbnails">
        <li><a href=><img  alt='2009, oil on canvas, 24"x30"' id="img1" src="booing.gif" width="59" height="75" ></a></li>

    </ul>
</div>
<script type="text/javascript">
var RotateImg =
{    

    init: function()
    {
        if (!document.getElementById) return;
        RotateImg.bigImg = document.getElementById("a0");  
        RotateImg.prev = document.getElementById("arrowleft");
        RotateImg.next = document.getElementById("arrowright");
        RotateImg.pointer = 1;
        RotateImg.myImage = document.getElementById("thumbnails").getElementsByTagName('img');
        RotateImg.myCaption = document.getElementById("caption");

        for (var i=0, ii = RotateImg.myImage.length; i < ii; i++) 
        {
                RotateImg.myImage[i].onclick = RotateImg.clickHandler;
        }
        
        RotateImg.prev.onclick = function() 
        {
            if (RotateImg.pointer > 1 && RotateImg.pointer < RotateImg.myImage.length+1) 
                {
                        RotateImg.pointer -= 1;
                        RotateImg.swapImg();
                        return false;                
                }
        }
        
        RotateImg.next.onclick = function() {
                if (RotateImg.pointer > 0 && RotateImg.pointer < RotateImg.myImage.length) 
                {
                        RotateImg.pointer += 1;
                        RotateImg.swapImg();
                        return false;
                }
        }
    },

    swapImg : function()
    {
        var el = "img" + RotateImg.pointer;
        var swap = document.getElementById(el);        
        RotateImg.bigImg.src =     swap.src;
        if (swap.getAttribute('alt'))
        {
                RotateImg.myCaption.innerHTML = swap.alt;
        } 
        else
        {
                RotateImg.myCaption.innerHTML = "No Caption available";
        }
    },
    
        clickHandler: function()
    {
            RotateImg.bigImg.src = this.src;
            var num = this.id;
            num = (num.substring(3));
            RotateImg.pointer = parseInt(num,10);
            RotateImg.swapImg();
            return false;
    }
};

RotateImg.init();

</script>
</body>
</html>

Hi,

The problem is that the fixed image can’t go anywhere because its fixed and any content on the page just ignores it as though it isn’t there. You can’t make it scroll and you can’t stop other content going over the top when other content scrolls.

You could make the big image slide off to the left but that would be worse and would look odd also.

The only other thing you could do is as I said above and make the thumnails have their won scrollbar and not use fixed positioning at all. The image would still stay put (more or less) because the page won;t get scrolled by the thumbnails.

The only problem is that as you reduce the page you end up with 2 scrollbars at the edge of the viewport which isn’t too good either.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="resource-type" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>l</title>
<style type="text/css">
a img {
    border:none
}
p {
    margin:0 0 1em
}
html, body {
    height:100&#37;;
    margin:0;
    padding:0;
}
html{overflow:auto}
body {
    min-width:626px;
    min-height:400px;
    text-align:left;
}
#vertical {
    float:left;
    height:50%;
    margin-top:-320px;/* half vertical height*/
    width:100%;
}
#hoz {
    width:954px;
    margin-left:auto;
    margin-right:auto;
    height:641px;
    text-align:left;
    clear:both;
}
#hide1 {
    position:absolute;
    right:-100px;
    top:50%;
    width:44px;
    margin-top:-5px;
}
* html #hide1 {
    right:-150px;
}
.arrowleft, .arrowleft img {
    float:left;
    cursor: pointer;
}
.arrowright, .arrowleft img {
    float:right;
    cursor: pointer;
}
ul.thumbnails {
    width:202px;
    margin:0;
    padding:0;
    list-style:none;
    float:right;
}
ul.thumbnails li {
    padding:4px;
    float:left
}
ul.thumbnails li a {
    width:59px;
    height:75px;
    float:left;
}
.thumbnails img {
    cursor: url(zoomie315.cur), -moz-zoom-in;
}
#main {
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:100%;
    height:100%;
  min-width:870px;
    overflow:auto;
}
.test {
    color:#fff;
    margin:0;
    padding:0;
    width:509px;
    height:641px;
    position:relative;
}
* html .test {
    position:relative;
}
ul.thumbnails li a {
    line-height:75px;
    text-align:center;
    background:red;
    color:#fff;
    font-size:16px;
    text-decoration:none;
}
ul.thumbnails li a:hover {
    background:blue
}
#caption {
    color:#000;
    width:125px;
    margin:20px 0 0 -40px;
    background:#fcc;
    text-align:center;
    position:relative;
}

</style>
</head>
<body>
<div id="vertical"></div>
<div id="hoz">
    <div class="test">
        <p><img id="a0" src="booing.gif" alt="Oil on Canvas"></p>
        <div id="hide1"><img id="arrowleft" src="/leftBlackArrow.gif" alt="previous" > <img id="arrowright" src="/rightBlackArrow.gif" alt="next">
            <p id="caption">oil on canvas</p>
        </div>
    </div>
</div>
<div id="main">
    <ul id="thumbnails" class="thumbnails">
        <li><a href="#"><img  alt="oil on canvas" id="img1" src="/booing.gif" width="59" height="75" ></a></li>
        <li><a href="#"><img alt="Image Number 2" id="img2" src="/mymy1.gif" width="59" height="75" ></a></li>
        <li><a href="#"><img alt="Image Number 3" id="img3" src="/mymy2.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="Image Number 4" id="img4" src="/mymy3.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="oil on canvas" id="img5" src="/booing.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="Image Number 6" id="img6" src="/mymy1.gif" width="59" height="75" ></a></li>
        <li><a href="#"><img alt="Image Number 7" id="img7" src="/mymy2.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="Image Number 8" id="img8" src="/mymy3.gif" width="59" height="75"></a></li>
        <li><a href="#"><img  alt="oil on canvas" id="img9" src="/booing.gif" width="59" height="75" ></a></li>
        <li><a href="#"><img alt="Image Number 10" id="img10" src="/mymy1.gif" width="59" height="75" ></a></li>
        <li><a href="#"><img alt="Image Number 11" id="img11" src="/mymy2.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="Image Number 12" id="img12" src="/mymy3.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="oil on canvas" id="img13" src="/booing.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="Image Number 14" id="img14" src="/mymy1.gif" width="59" height="75" ></a></li>
        <li><a href="#"><img alt="Image Number 15" id="img15" src="/mymy2.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="Image Number 16" id="img16" src="/mymy3.gif" width="59" height="75"></a></li>
        <li><a href="#"><img  alt="oil on canvas" id="img17" src="/booing.gif" width="59" height="75" ></a></li>
        <li><a href="#"><img alt="Image Number 18" id="img18" src="/mymy1.gif" width="59" height="75" ></a></li>
        <li><a href="#"><img alt="Image Number 19" id="img19" src="/mymy2.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="Image Number 20" id="img20" src="/mymy3.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="oil on canvas" id="img21" src="/booing.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="Image Number 22" id="img22" src="/mymy1.gif" width="59" height="75" ></a></li>
        <li><a href="#"><img alt="Image Number 23" id="img23" src="/mymy2.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="Image Number 24" id="img24" src="/mymy3.gif" width="59" height="75"></a></li>
        <li><a href="#"><img  alt="oil on canvas" id="img25" src="/booing.gif" width="59" height="75" ></a></li>
        <li><a href="#"><img alt="Image Number 26" id="img26" src="/mymy1.gif" width="59" height="75" ></a></li>
        <li><a href="#"><img alt="Image Number 27" id="img27" src="/mymy2.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="Image Number 28" id="img28" src="/mymy3.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="oil on canvas" id="img29" src="/booing.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="Image Number 30" id="img30" src="/mymy1.gif" width="59" height="75" ></a></li>
        <li><a href="#"><img alt="Image Number 31" id="img31" src="/mymy2.gif" width="59" height="75"></a></li>
        <li><a href="#"><img alt="Image Number 32" id="img32" src="/mymy3.gif" width="59" height="75"></a></li>
    </ul>
</div>
<script type="text/javascript">
var RotateImg =
{    

    init: function()
    {
        if (!document.getElementById) return;
        RotateImg.bigImg = document.getElementById("a0");  
        RotateImg.prev = document.getElementById("arrowleft");
        RotateImg.next = document.getElementById("arrowright");
        RotateImg.pointer = 1;
        RotateImg.myImage = document.getElementById("thumbnails").getElementsByTagName('img');
        RotateImg.myCaption = document.getElementById("caption");

        for (var i=0, ii = RotateImg.myImage.length; i < ii; i++)
        {
                RotateImg.myImage[i].onclick = RotateImg.clickHandler;
        }
        
        RotateImg.prev.onclick = function()
        {
            if (RotateImg.pointer > 1 && RotateImg.pointer < RotateImg.myImage.length+1)
                {
                        RotateImg.pointer -= 1;
                        RotateImg.swapImg();
                        return false;                
                }
        }
        
        RotateImg.next.onclick = function() {
                if (RotateImg.pointer > 0 && RotateImg.pointer < RotateImg.myImage.length)
                {
                        RotateImg.pointer += 1;
                        RotateImg.swapImg();
                        return false;
                }
        }
    },

    swapImg : function()
    {
        var el = "img" + RotateImg.pointer;
        var swap = document.getElementById(el);        
        RotateImg.bigImg.src =     swap.src;
        if (swap.getAttribute('alt'))
        {
                RotateImg.myCaption.innerHTML = swap.alt;
        }
        else
        {
                RotateImg.myCaption.innerHTML = "No Caption available";
        }
    },
    
        clickHandler: function()
    {
            RotateImg.bigImg.src = this.src;
            var num = this.id;
            num = (num.substring(3));
            RotateImg.pointer = parseInt(num,10);
            RotateImg.swapImg();
            return false;
    }
};

RotateImg.init();

</script>
</body>
</html>


yeah that looks pretty weird…

id be happy if i could prevent the thumbnails from moving more than 10px from the right.
when the page is to small and i scroll horizontally the thumnails seems to stop at an arbitrary distance from the right and this distance stays the same no matter how small or large the page is(as long as it small enough for a horizontal bar to appear)
how can i determine this seemingly random distance?