Home/ Questions/Q 1010935
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T09:09:33+00:00

I’m working on a webpage that has a javascript image rotator, but it needs

  • 0

I’m working on a webpage that has a javascript image rotator, but it needs to be able to handle images of different sizes.

The code that I’m using as a base has a DIV outside floating LIs which contain the images, but no matter what I try I can’t seem to get the images to all be centered. The only one that’s centered is the one that’s the full 800px wide.

I have a feeling it’s something to do with float, position, or display, but I’ve been messing around for hours with no luck.

Here’s my site:

Here’s where I borrowed the image rotator code from:
http://www.serie3.info/s3slider/ (code) http://www.serie3.info/s3slider/demonstration.html (demo)

Thanks for any help you can provide!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This works as well (In Firefox and Safari, haven’t tried IE). Save as a .html for an example.

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="description" content="A picture and caption that you can change for everyone in the world to see.">
    <meta name="keywords" content="pic and words, pic words, caption">
    <title>Pic and Words</title>
    <link href="http://picandwords.be-better.net/styles.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://picandwords.be-better.net/s3Slider.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#slider1').s3Slider({
                timeOut: 4000 
            });
        });
    </script>
    <style>
        body, html
        {
            margin:0px;
            width:100%;
            height:100%;
            padding:0px;
        }
        #slider1
        {
            text-align:center;
            vertical-align:middle;
            margin:0px;
            padding:0px;
            width:auto;
            height:auto;
        }
        #slider1Content
        {
            text-align:center;
            display:table; /* this is KEY to centering the UL */
            position:static;
            margin:0px auto 0px auto;
            padding:0px;
            width:auto;
            top:auto;
        }
        #pageWrapper
        {
            width:810px;
            height:700px;
            margin:0px auto 0px auto;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="pageWrapper">
        <h1>Pic and Words</h1>
        <!--<a href="new_form.php">Upload</a> -->
        <br /><br />
        <div id="slider1">
            <ul id="slider1Content">
                <li class="slider1Image">
                    <div>
                        <img src="http://picandwords.be-better.net/uploaded_pics/1282179782-2zdr66e.jpg" 
                        alt="Somewhere down Baja on the way to Cabo." 
                        title="Somewhere down Baja on the way to Cabo." align="center" />
                        <span class="bottom">"Somewhere down Baja on the way to Cabo."</span>
                    </div>
                </li>
                <li class="slider1Image">
                    <div>
                        <img src="http://picandwords.be-better.net/uploaded_pics/1282180309-bicycle.jpg" 
                        alt="Drunk dude on a bike" 
                        title="Drunk dude on a bike" align="center" />
                        <span class="bottom">"Drunk dude on a bike"</span>
                    </div>
                </li>
                <li class="slider1Image">
                    <div>
                        <img src="http://picandwords.be-better.net/uploaded_pics/1282180338-captions03211.jpg" 
                        alt="Do not want!" 
                        title="Do not want!" align="center" />
                        <span class="bottom">"Do not want!"</span>
                    </div>
                </li>           
                <div class="clear slider1Image"></div>
            </ul>
        </div>
    </div>
</body>
</html>
    • 0