Discussion :

[chezmat]

Bonjour,

Sur mon site (blog Wordpress), je souhaite afficher les articles sur le même sujet avec une miniature. J'ai trouvé une requête que j'ai adaptée et qui fonctionne bien.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- sur le même sujet V2 -->
    <h3>A LIRE SUR LE MEME SUJET :</h3>
    <?php  
        $orig_post = $post;  
        global $post;  
        $tags = wp_get_post_tags($post->ID);  
        if ($tags) {  
        $tag_ids = array();  
        foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;  
        $args=array(  
        'tag__in' => $tag_ids,  
        'post__not_in' => array($post->ID),  
        'posts_per_page'=>6, // Number of related posts to display.  
        'caller_get_posts'=>1  
        );  
 
        $my_query = new wp_query( $args );  
 
        while( $my_query->have_posts() ) {  
        $my_query->the_post();  
        ?>  
	    	<div class="miniatureliee">  
 		<a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,150)); ?><br/>  
              	<?php the_title(); ?></a>  
               </div>  
        <? }  
        }  
        $post = $orig_post;  
        wp_reset_query();  
        ?>  
 
<!-- sur le même sujet V2 -->

Par contre, le résultat est minable, les images (et le titre) sont mises l'une en dessous de l'autre. Pas "sexy" du tout.
J'ai donc fait du CSS pour améliorer tout ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.miniatureliee {
    margin: 5px;
    width: 292px;
    height: 150px;
    float: left;
    vertical-align:middle;
 }
.miniatureliee a {
    display : block;  
    margin: 10px 0 0 5px;  
    width: 292px;
    height: 150px; 
    background-color: #ddd;
	color: #000;
}
.miniatureliee img {
	display : inline;
    margin: 0 10px 0 0;
	padding: 0px;
    float: left;
 
}
.miniatureliee a:hover {
    display : block;
    width: 292px;
    height: 150px;
    font-weight:bold;
    font-size: medium;
    background-color: #2479b0;
	color: #FEFEFE;
}

Ça fonctionne très bien sous IE (8 et 9), mais sous firefox, cela ne fonctionne que pour la première rangée de liens. Et sous chrome, rien ne fonctionne (pas de lien clikable, ni d'effet "hoover").
Y a-t-il moyen de corriger cela ?
Le résultat n'est pas visible, car c'est sur mon site de test où les accès sont filtrés (mais je peux éventuellement ouvrir un accès temporaire).

Merci !

[unapologetic]

C'est difficile de répondre sans voir malheureusement.
Je vais tenté de t'aider tout de même :
As-tu pensé aux commentaires conditionnels ?

Voila un petit exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<!--[if !IE]><!-->
<div id='menu'>  
<!--<![endif]-->
 
<!--[if IE]>
<div id='menuIE'>
<![endif]-->	
 
</div>

En fait, si ton navigateur est différent de IE alors on écrit le div a l'id MENU alors que si le navigateur est IE le div sera MENUIE, de ce fait tu peux faire des CSS différents et les adaptés aux navigateurs !

[chezmat]

Bonjour,

Merci pour le retour.. Je débute vraiment en CSS, je prend donc toutes les infos.
Je vois l'intérêt de ta suggestion, par contre, je ne sais absolument pas comment m'y prendre pour différencier le code en fonction des navigateurs.
je vais creuser sur google..
Si tu veux un accès, tu peux m'envoyer ton ip publique en MP pour que je la rajoute aux ip autorisées à accéder..