Hi there,
I have featured section where users can change between two categories on a theme which I'm developing. How can I align the image so that it is centered in the div?
PHP
<div id="featbg">
<div id="featuredtitle">Technology | Entertainment</div>
<div id="tab1" style="display:inline;">
<?php $my_query = new WP_Query('category_name=Technology&showposts=1'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<img src="<?php $key="thumbnail"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" class="featuredimage" />
<?php endwhile; ?>
</div>
<div id="tab2" style="display:none;">
<?php $my_query = new WP_Query('category_name=Entertainment&showposts=1'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<img src="<?php $key="thumbnail"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title(); ?>" class="featuredimage" />
<?php endwhile; ?>
</div>
</div>
CSS
.featuredimage {
height: 250px;
}
#featbg {
width: 525px;
height: 250px;
border: 1px solid #000000;
float: left;
margin-bottom: 16px;
}
#featuredtitle {
width: 515px;
height: 26px;
font: 15px Georgia, "Helvetica Neue", Helvetica, "Trebuchet MS", Arial, Verdana, sans-serif;
color: #ffffff;
background-color: #000000;
opacity: .65;
filter: alpha(opacity=65);
text-align: center;
position: absolute;
padding: 5px;
}
#featuredtitle a {color: #ffffff;}
JavaScript
function showTab1()
{
//Show the background overlay and topbox...
document.getElementById('tab1').style.display='inline';
document.getElementById('tab2').style.display='none';
}
function showTab2()
{
//Hide the overlay and tobox...
document.getElementById('tab2').style.display='inline';
document.getElementById('tab1').style.display='none';
}
Thanks in advance,
Kenneth
http://www.technofinger.com
