Transition, transform et float (Créer un compte)

  • Statut : non résolu
  • Ce sujet contient 3 réponses, 2 participants et a été mis à jour pour la dernière fois par Guy, le il y a 11 années.
4 sujets de 1 à 4 (sur un total de 4)
  • Auteur
    Messages
  • #526027
    Twinset
    Participant
    Chevalier WordPress
    134 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress :3.5.1
    – Version de PHP/MySQL :
    – Thème utilisé : childtheme de twentyeleven
    – Extensions en place :
    – Nom de l’hebergeur : ovh
    – Adresse du site : http://www.rarissim.com

    Problème(s) rencontré(s) :

    Bonjour,

    J’ai créé en catalogue de mes articles à l’aide du showcase de TwentyEleven, en plaçant tous mes éléments en float:left. Je laur ai ajouté une transition afin de dérouler l’article vers le bas au survol. Or, cet effet cause une réorganisation de tous les éléments suivants alors que je souhaiterais conserver la même mise en page.
    Voir ici en bas de la page d’accueil :http://www.rarissim.com
    Voici le php correspondant :

    <section class="recent-posts">
    <h1 class="showcase-heading"><?php _e( 'Les derniers sites en ligne', 'twentyeleven' ); ?></h1>

    <?php

    // Display our recent posts, showing full content for the very latest, ignoring Aside posts.
    $recent_args = array(
    'order' => ‘DESC’,
    ‘post__not_in’ => get_option( ‘sticky_posts’ ),
    ‘tax_query’ => array(
    array(
    ‘taxonomy’ => ‘post_format’,
    ‘terms’ => array( ‘post-format-aside’, ‘post-format-link’, ‘post-format-quote’, ‘post-format-status’ ),
    ‘field’ => ‘slug’,
    ‘operator’ => ‘NOT IN’,
    ),
    ),
    ‘no_found_rows’ => true,
    );

    // Our new query for the Recent Posts section.
    $recent = new WP_Query( $recent_args );

    // PREMIER POST
    if ( $recent->have_posts() ) : $recent->the_post();

    // Set $more to 0 in order to only get the first part of the post.
    global $more;
    $more = 0;

    get_template_part( ‘content’, get_post_format() );



    endif;

    // TOUS LES AUTRES POSTS
    while ( $recent->have_posts() ) : $recent->the_post();
    global $more;
    $more = 0;

    get_template_part( ‘content’, get_post_format() );?>



    <?php
    endwhile;

    // If we had some posts, close the <ol>
    if ( $recent->post_count > 0 )
    echo ‘</ol>‘;
    ?>
    </section><!-- .recent-posts -->

    <div class="widget-area" role="complementary">
    <?php if ( ! dynamic_sidebar( 'sidebar-2' ) ) : ?>

    <?php
    the_widget( 'Twenty_Eleven_Ephemera_Widget', '', array( 'before_title' => ‘<h3 class="widget-title">‘, ‘after_title’ => ‘</h3>‘ ) );
    ?>

    <?php endif; // end sidebar widget area ?>
    </div><!-- .widget-area -->

    Et le css :

    /* recents posts */
    .page-template-showcase-php section.recent-posts {margin-left: 0;width:100%;background:url(img/fondRecent.png) repeat}
    .page-template-showcase-php section.recent-posts .entry-title {width:100%;text-align:center;font-size:1em}
    .page-template-showcase-php section.recent-posts .entry-meta {display:none}
    .page-template-showcase-php section.recent-posts .hentry {float:left;margin:0.4em;width:30%;height:185px;border: 1px dotted #999999;padding: 0.25em;overflow:hidden;transition:all 1.5s cubic-bezier(.6,2,.4,1)}
    .page-template-showcase-php section.recent-posts .hentry:hover{height:370px;transform:scale(370px)}
    .page-template-showcase-php section.recent-posts .hentry p {font-size:0.8em}
    .page-template-showcase-php section.recent-posts .hentry img {border:none; padding:0}
    .page-template-showcase-php section.recent-posts .hentry img:hover,
    .page-template-showcase-php section.recent-posts .hentry img:focus {box-shadow:1px 0px 5px #888}

    L’idéal serait que la margin-bottom des éléments de la 1ère ligne augmente quand l’un de ses voisins est survolé, mais je ne parviens pas à ce résultat.

    Quelqu’un aurait-il une idée ?

    Merci d’avance.

    #901632
    Guy
    Participant
    Maître WordPress
    14817 contributions

    le principe serait d’ajouter un clear:both entre chaque ligne, pour toi ici cela serait donc tous les trois articles.

    donc mettre un compteur, et quand c’est un multiple de 3, ajouter sous le get_template_part

    #901633
    Twinset
    Participant
    Chevalier WordPress
    134 contributions

    Merci à toi Guy !
    Peux-tu m’en dire plus sur la syntaxe du compteur ?
    J’ai fait des tentatives mais le PHP m’échappe encore…

    #901634
    Guy
    Participant
    Maître WordPress
    14817 contributions

    Tu incrémentes une variable compteur juste après l’affichage avec get_template_part, si ce compteur est un multiple de 3, tu ajoutes le clear:both.

    cela fera quelque chose de ce style

    have_posts() ) : $recent->the_post();

    // Set $more to 0 in order to only get the first part of the post.
    global $more;
    $more = 0;

    get_template_part( ‘content’, get_post_format() );
    $compteur++;
    if ( $compteur % $lineModulo === 0) echo ‘<div style="clear:both"></div>‘;

    endif;
    // TOUS LES AUTRES POSTS
    while ( $recent->have_posts() ) : $recent->the_post();
    global $more;
    $more = 0;

    get_template_part( ‘content’, get_post_format() );
    $compteur++;
    if ( $compteur % $lineModulo === 0) echo ‘<div style="clear:both"></div>‘;

    endwhile;

4 sujets de 1 à 4 (sur un total de 4)
  • Vous devez être connecté pour répondre à ce sujet.