Positionnement de post et image flottante (Créer un compte)

  • Statut : non résolu
7 sujets de 1 à 7 (sur un total de 7)
  • Auteur
    Messages
  • #464329
    neovea
    Membre
    Initié WordPress
    39 contributions

    Bonjour,

    Ma configuration WP actuelle
    – Version de WordPress : 2.6.3
    – Thème utilisé :
    – Plugins en place :
    – Nom de l’hebergeur :
    – Adresse du site :

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

    Bonjour, je rencontre un problème de positionnement. Lorsque je mets une image dans mon post et que cette image fait partie du “résumé”, que je la mets en float, le post du dessous est affecté et vient lui aussi se positionner à droite de l’image, alors que je voudrais que le post suivant vienne se placer en dessous. Voici mon code source, en simplifié :

    HTML

    <div id="content">
        
    	    <div id="post">
            	<h2>Titre</h2>
                <p class="postmetadata">Metadata</p>
                <div class="post" id="post-5">
                <p><a href="adress/de/l-image"><img class="alignleft size-thumbnail wp-image-7" title="titre" src="source de l'image" alt="" width="150" height="150" /></a>Texte à droite de l’image</p>
                </div>
            </div>
            
            <div id="post">
            	<h2>Titre de l’article</h2>
                <p class="postmetadata">métadatas</p>
                <div class="post" id="post-1">
                <p>texte de l’article</p>
                </div>
            

    CSS

    #content{ /*contenu central*/
    float:left;
    width:700px;
    padding-bottom:200px;
    margin-top:75px;
    }
    
    #post p img {
    padding: 0;
    max-width: 100%;
    border:0;
    }
    
    #post img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    
    #post img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }
    
    #post img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display:inline;
    }
    
    #post .alignright {
    float: right;
    }
    
    #post .alignleft {
    float: left
    }
    
    #post h2{
    font-size:20px;
    margin-top:0;
    margin-bottom:0;
    }
    
    #post h2 a{
    color:#666666;
    text-decoration:none;
    }
    
    #post h2 a:hover{
    color:#99cc33;
    }
    
    #post p{
    margin:0;
    padding:0;
    color:#333333;
    font-size:14px;
    }
    
    #post .postmetadata{
    color:#999999;
    font-size:10px;
    margin-bottom:0;
    }
    
    #post .postmetadata a{
    color:#666666;
    font-size:10px;
    }
    
    #post .postmetadata a:hover{
    color:#99cc33;
    }
    
    #post{
    margin:0;
    padding:0;
    margin-bottom:30px;
    font-size:14px;
    color:#333333;
    }

    Merci de votre aide

    #650104
    Olivier
    Participant
    Maître WordPress
    1415 contributions

    c’est le float:left qui fait cela… passe le en float:no et tu vas voir le post repasser dessous comme par magie 😉

    #650105
    neovea
    Membre
    Initié WordPress
    39 contributions

    Je crois que je ne me suis pas bien exprimé. En fait j’ai 2 post l’un à la suite de l’autre. Dans celui qui se trouve au dessus, il y a une image en float. Je veux qu’elle soit en float, sinon le texte du post se calle en dessous. Or je veux qu’il soit à côté de l’image.

    Mais quand je fais ça, le post suivant (en dessous donc) remonte juste au dessous du texte du post précédent, à droite de l’image.

    Moi ce que je veux, c’est un post avec une image flottante et le texte à droite et que le post du dessous commence après la premier post, après l’image.

    Mais je ne vois pas comment. J’ai essayé de décortiquer le theme par défaut de wordpress, mais je n’ai pas trouvé la solution.

    #650106
    belcikowski
    Participant
    Padawan WordPress
    81 contributions

    Je rencontre ce problème tout le temps. Pour éviter le phénomène, je m’arrange pour que le texte qui jouxte l’image ait même longueur que cette dernière.
    Je suis intéressée par une vraie solution.

    #650107
    Olivier
    Participant
    Maître WordPress
    1415 contributions

    ok je crois que j’ai compris, dans ce cas, il faut ajouter à la fin du post un

    ou un truc dans le genre 😉
    #650108
    neovea
    Membre
    Initié WordPress
    39 contributions

    Merci Olivier de m’avoir mis sur la piste. La méthode exacte est de rajouter dans le CSS l’instruction

    .post{
    clear:both;
    }

    le .post étant la div englobant le post 😉

    Problème résolu !

    Merci encore !

    #650109
    Olivier
    Participant
    Maître WordPress
    1415 contributions

    welcome!

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