views:

1344

answers:

6

I'm trying to add a slideshow to one of my websites. The whole page is layed out in an HTML table (which I hate with a passion AND did not choose). I want to center my slideshow inside that paticular column. Here is what my CSS looks like:

#slideshow {
position:relative;
}

#slideshow IMG {
position:absolute;
z-index:8;
opacity:0.0;
}

#slideshow IMG.active {
z-index:10;
opacity:1.0;
}

#slideshow IMG.last-active {
z-index:9;
}

Here is my JQuery function to change images:

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

// use this to pull the images in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

And finally here is the slideshow div inside the table:

<td bgcolor="red" align="center" valign="top"> 
<div id="slideshow">
 <img src="2009Slideshow\1.jpg" alt="Slideshow Image 1" class="active" />
 <img src="2009Slideshow\2.jpg" alt="Slideshow Image 2" />
 <img src="2009Slideshow\3.jpg" alt="Slideshow Image 3" />
    etc...
    etc...
</div>                    
</td>

So why can't I get my slideshow to center inside of that column?

+7  A: 

Inline elements can be easily centered by using the css property "text-align:center;". Block elements should be align in the center by using "margin-left:auto;margin-right:auto;" and by giving them a fixed width. In your particular case I would suggest to use a span instead of a "div" or get rid of the div completely and use the text-align method.

Update

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">     
    <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Centering</title>
    <style type="text/css">
      table{
       border:1px solid black; 
      }
      span{
        background-color:red; 
        color:white;       
      } 
      td{
        text-align:center;
        width:200px; 
      }
    </style>
  </head>
  <body>
    <div class="item" id="item1">
      <table>
        <tr>
          <td>
            <span>Hi there!</span>  
          </td>
        </tr>        
      </table>
    </div>    
    </body>
</html>
merkuro
Good tips on centering, but I'd argue against using a span in favor of a div. In this case, a span wouldn't be a semantic representation of the content. A div would be more fitting, in my opinion.
Evan Meagher
Neither <div> nor <span> has any semantic meaning.
John Kugelman
@merkuro: margin-left: auto; margin-right: auto; dosen't seem to work in IE? (I also hate IE with a passion)
Bob Dylan
@merkuro: Good suggestion +1, but it still didn't solve my problem.
Bob Dylan
@John Kugelman although they could be used in a very similar fashion, I think a by nature inline-element should be used here and I see no reason to define this as a whole separate paragraph (which is intend of a div in my opinion).
merkuro
@bobbydylan Just updated the code. Is this working for you? Which version of IE are you using? If you get this running it should be very easy to just swap the span with the images (and leave the DIV out, because block elements cannot/should not be centered this way).
merkuro
@bobbydylan: Do you have a DOCTYPE defined? margin: auto would not work as expected unless that is defined in IE.
Adhip Gupta
The use of the XML prolog will push IE6 into Quirks mode (not to mention the issue of serving XHTML 1.1 as text/html being dubious to start with)
David Dorward
@David Dorward thanks for your feedback. According to w3.org this example is valid. However my questions are, does it have any effect on the rendering of this specific site and should we program for IE6 bugs? According to http://tantek.com/XHTML/Test/minimal11.html, quoting from w3, this is the preferred method of declaring a valid XML file, which is supposed to be delivered as a website. However there are 3 valid other options to choose from.
merkuro
@merkuro: Would you believe the DOCTYPE fixed the whole thing? Thanks!
Bob Dylan
who doesn't specify doctypes in this day and age?
Jason
+2  A: 
#slideshow {
margin: 0 auto;
}

and also text-align: center

for the table

Rony
You will also need to set the width of the div to be 100% of the TD.
elcuco
A: 

I would add a comment above but don't have 50 rep.. doh. I seem to remember that if you have anything in front of the doctype in IE6, it sends it into quirks mode. That may be causing problems

<?xml version='1.0' encoding='UTF-8'?>

May be worth a shot removing this.

Nooshu
A: 

If you can remove the absolute positioning, use text-align:center on the td.

If you cannot remove the absolute positioning and all your images are the same size, set left to td/2 - img_width/2. So if you had a 80px wide image in a 200px wide td, you would use

#slideshow img {position:absolute; left:60px; opacity:0; z-index:8;}

If you cannot remove the absolute positioning and you images are different sizes, you will have to calculate the left value in your javascript.

IE does not support opacity. It uses filter: alpha(opacity = 50); instead.

Emily
A: 

standard

 div#slideshow {
    margin : 0 auto;
    width : 200px;
}

and for (old ?) ie

td {
    text-align : center;
}

ie doesn't "like" auto margins but centers not only inline elements but block elements (divs)

also not shure what is standard value of display property for td on ie because it doesn't use table-cell and text-align will not work inside inline elements so another possible aproach would be to wrap it around another div :

<td>
<div id="slideshow_container">
<div id="slideshow">
...
</div>
</div>
</td>

and css

div#slideshow {
    margin : 0 auto;
    width : 200px;
}
div#slideshow_container {
    text-align : center;
    width : 100%;
    height : 100%;
}
kubak
A: 

The following solution works even when you dont know the size of the image:

<div style="height:100px; width:100px; display:table-cell; text-align:center; vertical-align:middle;" >
    <img src="images/myPicture.png">
</div>