Annonces
Livre d'or

Par cecileflora

Bonjour la communauté phpboost, très  réactive, un grand merci  a toutes et tous !

Livre d'or

Mini sondage
Etes-vous satisfait du support PHPBoost ?










Résultats

 
Afficher votre texte aligné sur 2,3 voir 4 colonnes
 



glossaire


Personnalisation de votre site avec une présentation sur deux,trois voir quatre colonnes d'un article,une news ou un encart sur votre index.J'ai trouvé ce bout de code (je ne sais plus où ) et pour celles et ceux qui voudraient le faire mais qui ne savent pas !!


code css


A placer dans le CSS de votre choix :
  • articles
  • news
  • wiki

CSS , affichage sur deux colonnes :
Code :

div#content{
          -webkit-column-count : 2;
          -webkit-column-gap : 20px;
          -webkit-column-rule: 1px solid #000000;
          -moz-column-count : 2;
          -moz-column-gap : 20px;
          -moz-column-rule: 1px solid #000000;
          width: 90%;
          margin:0 auto;
          }  

CSS , affichage sur trois colonnes :
Code :

div#content1{
          -webkit-column-count : 3;
          -webkit-column-gap : 20px;
          -webkit-column-rule: 1px solid #0E7184;
          -moz-column-count : 3;
          -moz-column-gap : 20px;
          -moz-column-rule: 1px solid #0E7184;
          width: 90%;
          margin:0 auto;
          }



balise


Pour la balise c'est très simple .. Il suffit d'encadrer votre texte comme ceci :

Code :

[html]<div id="content">Pour la sortie prochaine de Mozilla Firefox 1.5 Beta 1, 
l'arbre sera verrouillé ce soir à 11:59pm Pacific Daylight Time (UTC -0700). 
À partir de ce point, aucune vérification ou entrée ne sera acceptée pour Firefox 1.5 Beta 1 
dont la sortie est programmée pour jeudi.</div>[/html]


pour terminer


Vous aurez remarqué que j'ai nommé mes deux codes css comme ceci :
  • content
  • content1

a vous de leurs donner le nom que vous voulez (attention aux conflits) et bien sûr il faudra également changer le nom de votre balise.
vous pouvez également changer la couleur de la barre verticale (ou la supprimer).

Pour information
vérifié sur :
  • Chrome = ok
  • Safari = ok
  • Firefox = ok
  • Explorer = css non pris en compte
  • Opéra = css non pris en compte

pour voir un exemple sur mon index
cordialement

 
Cette page a été vue 2211 fois
Annonces