• texte d'article en colonne comme un journal

    La lecture de textes dont les lignes sont trop longues pose souvent des difficultés ; si les yeux mettent trop de temps pour aller de la fin d'une ligne au début de ligne suivante, ils perdent le fil du texte. Aussi, pour utiliser au maximum un écran large, les auteurs devraient utiliser des colonnes de texte de largeur limitée et placées côte-à-côte comme le font les journaux. Malheureusement, c'est impossible à faire avec CSS et HTML sans imposer le placement de sauts de colonne à des endroits déterminés, restreindre fortement les balises permises dans le texte, ou se lancer dans des opérations de script héroïques. Un brouillon de discussion sur les colonnes CSS3 suggère quelques nouvelles propriétés CSS pour supporter cette fonctionnalité. Un sous-ensemble des ces propriétés se comportant comme dans ce brouillon (à une exception près, voir ci-dessous) a été implémenté dans Firefox 1.5 et les version ultérieures.

    Pour texte en trois colonnes:

    -moz-column-count: 3;
    -moz-colum-width: 30%;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-colum-width: 30%;
    -webkit-column-gap: 20px;
    column-count: 3;
    colum-width: 30%;
    column-gap: 20px;

    • Pour tous les articles,  style appliqué au sélecteur .article-text { LE STYLE  }

     

    • Pour un article en ponctuel, mettre le style, via le bouton de l'éditeur d'article <>(code source) ainsi:

    <div style="-moz-column-count: 3;-moz-colum-width: 30%;-moz-column-gap: 20px; -webkit-column-count: 3; -webkit-colum-width: 30%; -webkit-column-gap: 20px; column-count: 3; colum-width: 30%; column-gap: 20px;">  LE TEXTE LE TEXTE LE TEXTE  </div>

     
     

    Pour 2 colonnes

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id interdum tortor. Praesent molestie finibus risus tincidunt varius. Nulla tincidunt pulvinar sem ut pellentesque. In et hendrerit est, vulputate feugiat elit. In scelerisque tellus eget nunc eleifend, vitae malesuada nulla tincidunt. Nam eu diam magna. Morbi auctor at mi eu aliquet. Maecenas id auctor justo. Proin efficitur, libero non tempus interdum, felis dui auctor nisi, in interdum justo nisl eget purus. Fusce ex lacus, fringilla eu libero ac, auctor tempor elit. Curabitur sit amet tellus dapibus felis posuere congue. Fusce sit amet tempor ante. Quisque consequat vestibulum odio, sed dictum magna tincidunt at. Fusce dictum efficitur pellentesque. Aliquam sit amet ipsum est. Maecenas sit amet enim neque. Duis feugiat lorem eget eros elementum, nec posuere quam vulputate. In hac habitasse platea dictumst. Nam iaculis eu massa in bibendum. Ut porta id lacus non ultrices. Duis elementum dignissim sagittis. Nam eget arcu et ante convallis pellentesque. Praesent vestibulum consequat risus, vel vehicula neque cursus a. Maecenas commodo turpis in dui aliquet, nec suscipit nunc lacinia. Aenean ullamcorper, tellus ut mollis laoreet, augue sem vehicula tellus, quis sollicitudin lorem dolor vel felis. 

     

     

     

    Nulla porttitor, est quis elementum pellentesque, elit massa dictum odio, eget elementum lorem libero elementum tellus. Maecenas fermentum vehicula vehicula. Nunc a dictum velit. Morbi a ex eget metus hendrerit faucibus quis in nulla. Nulla in nisi mollis, suscipit ex sed, bibendum tortor. Donec nec nunc vitae nisi lacinia rhoncus nec quis est. Integer nec sollicitudin orci. Etiam enim dolor, laoreet quis malesuada eu, aliquam id ante. Nunc posuere, erat eget semper consequat, tellus libero posuere tortor, vel pharetra urna mi vitae tortor. Etiam sit amet tellus magna. Phasellus vehicula facilisis faucibus. Morbi tempus ut nisl quis consequat. Suspendisse et orci est. Maecenas vitae fermentum odio, quis congue turpis. Nullam non nunc eros. Ut euismod libero a turpis venenatis, vitae faucibus nisi lobortis. Vivamus vitae erat dapibus, laoreet dui nec, convallis orci. Vestibulum non lectus non nulla feugiat auctor ac nec nibh. Aenean vehicula nec urna a dictum. Proin ante felis, posuere sit amet iaculis ut, malesuada a orci. Cras odio massa, vulputate a commodo id, laoreet ut nibh. Duis condimentum scelerisque nisl quis accumsan. Mauris a tortor laoreet, accumsan ligula in, egestas odio. Duis facilisis venenatis augue, sit amet efficitur ipsum mollis in. Duis mollis at risus a gravida. Nam nec eleifend justo, vel.

     

    Une fois le texte tapé dans l'éditeur d'article, passer coté code source : bouton <> et entourer le texte de

    <div style="-moz-column-count: 2;-moz-colum-width: 40%;-moz-column-gap: 20px; -webkit-column-count: 2; -webkit-colum-width: 40%; -webkit-column-gap: 20px; column-count: 2; colum-width: 40%; column-gap: 20px;">
    votre texte
    votre texte
    votre texte
    votre texte
    </div>

    « Lien ouverture dans Popup sur page du blogAjouter une web police de caractères sur son blog »
    Partager via Gmail Yahoo! Google Bookmarks

  • Commentaires

    1
    Vendredi 22 Février à 14:32

    Bonjour, ton blog est vraiment intéressant - Puis-je me permettre : voilà plusieurs jours que je cherche un moyen d'installer sur mon blog "fenêtre qui s'ouvre au passage" (sais pas si tu vois vraiment ce que je veux dire), c'est au passage avec la souris sur un mot, une fenêtre s'ouvre qui donne des infos sur ce mot - A tout hasard, connaîtrais tu ce code et la démarche à suivre - MERCI pour la réponse

    Sylvie

    2
    Jeudi 21 Mars à 11:21

    Bonjour Sylvie et désolé pour le retard de réponse mais je ne suis plus trop sur mon blog en ce moment.

    Si tu veux qu'un court message s'affiche au passage de la souris sur le mot d'un texte ( ça s'appelle une infobulle), tu peux utiliser  title.

    Je t'explique rapide ici.

    Dans un article, avec les boutons de l'éditeur d'article, tu mets le mot en question en plus grand ou d'une autre couleur par exemple
    puis tu passes en mode html avec le bouton code source <> de l'éditeur.

    Dans le code source, du code s'est écrit autour du mot en question

    <span style="font-size: 18pt;" >mot en question</span>

    Il suffit d'ajouter, après l'attribut style,  le texte de l'infobulle avec  l'attribut title

    title="Texte de l'infobulle au passage sur  mot  en 18"

    ce qui donne

    <span style="font-size: 18pt;" title="Texte de l'infobulle au passage sur  mot  en 18">mot en question</span>

    Si ce n'est pas cela que tu recherches, dis le moi; je reviendrai ces jours ci pour ta réponse

    A plus

     

    3
    Jeudi 21 Mars à 14:21

    Merci Maximum, j'ai fait une demande dans l'aide de Eklablog - Nickel j'ai eu mon infobulle mais je vais essayer ta façon de faire - Merci et bonne journéecool

    4
    Dimanche 31 Mars à 15:25

    Bonjour, ben j'ai essaie, mais je comprends pas pourquoi mon texte en entier ne s'inscrit pas dans l'infobulle - que 6 mots. Dommage car ton code est plus simple - Le code que j'ai pu avoir dans l'aide de Eklablog, là idem, comprends pas tout, parfois impeccable et à d'autrefois j'ai rien de rien - Je fais bien attention pourtant au guillemet ou autre, il est vrai, que dans le code source, parfois je clic à un endroit, et ..... mon curseur part sur une autre ligne (mystère) - Ben, si toutefois tu peux m'expliquer le pourquoi du comment !! Ce sera avec grand plaisir : Merci - Bonne journée

     



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl