[Résolu] Placement d’images

  • Statut : non résolu
12 sujets de 1 à 12 (sur un total de 12)
  • Auteur
    Messages
  • #446584
    gP
    Participant
    Chevalier WordPress
    358 contributions

    Comme on me le demande en privé et que CETAIT LUI, pose aussi la question voilà ma solution pour placer les images où je veux.
    Pour ceux qui ne connaissent pas bien sûr. 🙂

    Non pas de plug-in, seulement du code Copier/coller depuis un fichier pense-bête :
    1) Image à gauche (ou à droite, right):

    <img src="http://www.monsite.org/wp/images/monimage.png" align="left"/>

    2) Image au centre :

    <div align="center"><img src="http://www.monsite.org/wp/images/monimage.gif"</div>

    3) Image à gauche + lien vers grande image :

    <a href="http://www.pouessel.org/wp/images/monimage.jpg" target="_blank"><img src="http://www.monsite.org/wp/images/monimage_petit.jpg" align="left"/></a>

    Attention au chemin d’accès de l’image, ici c’est le mien.

    On peut rajouter : border=”1″ et/ou alt=”nomdemonimage”
    “P’tit n’astuce” perso, je rajoute 4 pixels à droite de mon image pour décoller le texte de celle-ci.

    Voilà c’est aussi simple. :D

    #566708
    damino
    Participant
    Maître WordPress
    1243 contributions

    Pour compléter gP, si l’on veut “maitriser” la mise en page de ses images dans un post on peut aussi par exemple, créer un class dans sa feuille de style et le rajouter à sa balise img :

    par exemple pour la feuille de style :

    .monimageagauche {
    float:left;
    margin: 5px;
    }

    Et pour le HTML dans le post :

    <img class="monimageagauche" src="/blabla/image.gif" width="XX" height="XX" alt="" title="" />

    Bien évidement, il est possible de rajouter des propirétés au selecteur class et on peut créer un .monimageadroite et ainsi de suite … avec toutes les propirétés CSS.

    #566709
    benkenobi
    Gestionnaire du forum
    Maître WordPress
    4080 contributions

    Damino > Là y a des choses qui m’intéressent… va falloir que je regarde tout cela de plus près moi… Déjà apprendre à gérer mon CSS. 🙂

    #566710
    gP
    Participant
    Chevalier WordPress
    358 contributions
    Damino wrote:
    Pour compléter gP, si l’on veut “maitriser” la mise en page de ses images dans un post on peut aussi par exemple, créer un class dans sa feuille de style et le rajouter à sa balise img :
    par exemple pour la feuille de style :

    .monimageagauche {
    float:left;
    margin: 5px;
    }

    Et pour le HTML dans le post :

    <img class="monimageagauche" src="/blabla/image.gif" width="XX" height="XX" alt="" title="" />

    Bien évidement, il est possible de rajouter des propirétés au selecteur class et on peut créer un .monimageadroite et ainsi de suite … avec toutes les propirétés CSS.

    Merci, pour la petite leçon de PHP. 🙂

    #566711
    damino
    Participant
    Maître WordPress
    1243 contributions

    J’y connais rien en php (pas encore !), c’est du CSS un langage pour les feuilles de style trés puissant pour tout ce qui touche à la mise en forme. On sépar le fond (en XHTML) de la forme (en CSS).

    Voilà n’hésitez pas regarder de plus près vos feuilles de styles. Vous pouvez même faire des modifications via votre navigateur et vie des plugin de navigateurs pour voir les effets de tel ou tel changement.

    J’écris un article de ce pas pour que chacun puisse ajouter ces excellents plugin à son navigateur.

    #566712
    gP
    Participant
    Chevalier WordPress
    358 contributions
    Damino wrote:
    J’y connais rien en php (pas encore !), c’est du CSS

    Oups pardon, c’est vrai. :(

    #566713
    damino
    Participant
    Maître WordPress
    1243 contributions

    Voilà le post en question.

    #566714
    CETAITLUI
    Participant
    Padawan WordPress
    91 contributions

    En tout cas, grâce à vous, et en me limitant au simple html, en attendant de me lancer dans les CSS, je viens de mettre :

    ma première image…

    dans la première page…

    de mon premier blog…

    Et c’est un évènement majeur dans mon existence!!!

    🙂

    Voir ça ici…:
    http://jcordaro.phpnet.org/Blog/

    #566715
    damino
    Participant
    Maître WordPress
    1243 contributions

    CETAITLUI, je t’invite à poster ton lien de site dans le forum Vos sites sous WordPress

    Amicalement.

    #566716
    xavier
    Gestionnaire du forum
    Maître WordPress
    2126 contributions

    Juste pour préciser que le thème “default” comprend déjà ces classes CSS :

    /* Using ‘class=”alignright”‘ on an image will (who would’ve
    thought?!) align the image to the right. And using ‘class=”centered’,
    will of course center the image. This is much better than using
    align=”center”, being much more futureproof (and valid) */

    img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }

    img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }

    .alignright {
    float: right;
    }

    .alignleft {
    float: left
    }
    /* End Images */

    #566717
    gP
    Participant
    Chevalier WordPress
    358 contributions
    Xavier wrote:
    Juste pour préciser que le thème “default” comprend déjà ces classes CSS :
    /* Using ‘class=”alignright”‘ on an image will (who would’ve
    thought?!) align the image to the right. And using ‘class=”centered’,
    will of course center the image. This is much better than using
    align=”center”, being much more futureproof (and valid) */
    /* End Images */

    Génial, merci Xavier. 😎

    #566718
    damino
    Participant
    Maître WordPress
    1243 contributions

    Et ben je l’avais même pas vu :rolleyes:

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