I have exhaustively attempted various methods to center the #accordion ul.
Do you have any recommendations?
Code:
css:
.container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}
#accordion {
float: left;
position: relative;
width: 940px;
height: 200px;
overflow: hidden;
margin: 25px 0px 0px;
}
#accordion ul {
list-style: none;
margin: 0px;
display: block;
height: 200px;
width: 940px;
}
#accordion ul li {
float: left;
}
#accordion ul li a {
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:78px;
height: 200px;
}
#accordion ul li.landscapes a {
background: url(../images/landscapes.jpg) repeat scroll 0%;
}
#accordion ul li.people a {
background: url(../images/people.jpg) repeat scroll 0%;
}
#accordion ul li.nature a {
background: url(../images/nature.jpg) repeat scroll 0%;
}
#accordion ul li.abstract a {
background: url(../images/abstract.jpg) repeat scroll 0%;
}
#accordion ul li.urban a {
background: url(../images/urban.jpg) repeat scroll 0%;
min-width:310px;
}
php:
<div id="intro">
<div class="container">
<div id="accordion">
<ul>
<?php // Create and run custom loop
$custom_posts = new WP_Query();
$custom_posts->query('post_type=page_content&page_sections=Slider (Front Page)');
while ($custom_posts->have_posts()) : $custom_posts->the_post();
?>
<li class="landscapes"><?php the_content(); ?><></li>
<?php endwhile; ?>
</endwhileul>
</div>
</div><!-- .container -->
</div><!-- #intro -->
Reference Image: