Hola amigos, resulta que tengo un problema, quiero mostrar en mi web principal 5 miniaturas de los últimos post de mi wordpress. Hasta ahí todo bien, pero quiero meter los 5 post o miniaturas en un div y que queden todos en horizontal, pero no hay forma, salen todos en fila y en vertical.
![Negando](http://static.forosdelweb.com/fdwtheme/images/smilies/negar.gif)
¿Podéis echarme una mano? Aquí el código:
CSS:
Código:
<style media="screen" type="text/css">
#contenedor-miniaturas {
width: 900px;
height: 300px;
display: block;
}
.miniaturas-post {
width: 150px;
margin: 0 auto;
height: 150px;
}
#thumbnail img{
width: 150px;
margin: 0px;
float:right;
}
.view-sixth .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
float: right;
opacity: 0;
-webkit-transition: all 0.4s ease-in 0.1s;
-moz-transition: all 0.4s ease-in 0.1s;
-o-transition: all 0.4s ease-in 0.1s;
-ms-transition: all 0.4s ease-in 0.1s;
transition: all 0.4s ease-in 0.1s;
background-color: rgba(0,51,204,0.5);
}
.view-sixth p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.4s ease-in-out 0.1s;
-moz-transition: all 0.4s ease-in-out 0.1s;
-o-transition: all 0.4s ease-in-out 0.1s;
-ms-transition: all 0.4s ease-in-out 0.1s;
transition: all 0.4s ease-in-out 0.1s;
}
.view-sixth:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 2;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
.view-sixth:hover img {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
}
.view-sixth:hover p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view-sixth:hover a.info {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.3s;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-ms-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.view {
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
text-align: justify;
cursor: default;
}
.view .mask,.view .content {
width: 150px;
height: 150px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.nombres-1 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-size: 13px;
position: relative;
color: #fff;
text-align: center;
padding-bottom: 14px;
padding-left: 0px;
padding-right: 0px;
padding-top: 33px;
font-weight: bold;
bottom: 12px;
}
.view a.info:hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
</style>
HTML:
Código:
<?php
define('WP_USE_THEMES', false);
require('wp-load.php');
query_posts('showposts=5');
?>
<div id="contenedor-miniaturas">
<div class="miniaturas-post">
<?php while (have_posts()): the_post(); ?>
<?php
if ( has_post_thumbnail() ){
?>
<div class="view view-sixth" style="height="150" width="150">
<div id="thumbnail">
<?php
the_post_thumbnail( 'thumbnail' );
?>
</div>
<a href="<?php the_permalink(); ?>"><div class="mask">
<p class="nombres-1"><?php the_title(); ?>
</div></a>
</div>
<?php
}else{
echo '<div id="thumbnail"><img src="thumbnail.png" alt="thumbnail" title="Example" width="256px"/>';
echo '</div>';
}
?>
<?php endwhile; ?>
</div>
</div>