• positionner photo dans texte

    ATTENTION: Penser à agrandir la fenêtre "édition d'un article" de la largeur réelle de l'article à l'écran , car le rendu de la mise en page dépend de la largeur des lignes ( exemple: deux images de 400px ne tiendront pas sur une même ligne inférieure à 800px, donc en visualisant dans une petite fenêtre de moins de 800px de large, vous risquez de faire une mise en page qui bougera forcément une fois sur un article de 900px de large)

    positionner photo dans texte     Photo téléchargée  sans alignement , curseur sur ligne au dessus du premier   paragraphe en bleu roi barré

        puis  alignée à gauche --> le premier paragraphe de texte vient  se placer alors  à droite de  la photo.

    [[dans l'éditeur d'article, on peut par la suite, déplacer le texte

          aligné à droite, à gauche ou centré, paragraphe barré ci dessous aligné à gauche]]
    Une des possibilités de manipulation des positionnements est par exemple celle de changer les types des éléments. La propriété CSS pour modifier les types des éléments est display (='affiche').

     

     

    positionner photo dans textePhoto téléchargée sans alignement avec curseur au dessus du deuxième paragraphe

    de texte

    Puis photo alignée à droite dans éditeur d'article.

    le texte deuxième paragraphe est, lui, demandé centré

     Pour changer un élément de type block en inline il suffit de mettre Comme on est partisan du surréalisme, cherchons toujours l'extraordinaire avec le CSS. Appliquons maintenant la propriété display à ces mêmes titres pour voir ce que ça donne quand on change de type. On a juste à rajouter display : inline à la balise p. Et on aura les 3 paragraphes vert rouge jaune sur la même ligne Le flux désigne l'ordre d'affichage par défaut des éléments.

     

    Image insérée demandé centréepositionner photo dans texte

     Image insérée en minuature demandée et curseur entre deux mots d'un paragraphe

    Par défaut, le navigateur affiche les éléments selon leur ordre d'apparition dans le code source. Une des propriétés remarquables d'une balise de type inline c'est le fait positionner photo dans texte de ne pas créer un retour à la ligne. Par conséquent, les éléments du type inline s'affichent par défaut les uns à la suite des autres sur la même ligne. D'où leur désignation en anglais : inline qui signifie en ligne.

     

    Images insérées sans alignement et déplacée avec le curseur dans l'éditeur d'article 

          positionner photo dans texte                               positionner photo dans texte

     

     

    positionner photo dans texte.article_text img { positionner photo dans texte

    outline: 5px solid green; outline-offset: -5px;

    /*border4px solid white;*/

     Pour petit randonneur, j'ai ajouter margin: 15px et ça écarte le texte des des bords des images

     

    « essai photo dimimage firefox »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :
  • Commentaires

    1
    Lundi 30 Janvier à 15:11

    Je viens de regarder un peu tout.. merci beaucoup pour toutes ces astuces je n'ai pas trouvé ce que je voulais mais ça ne fait rien il n'y a ici que de bonnes idées. A++++ 



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl