Cookies acceptés.
bouton pour découvrir notre choix
bouton de redirection: haut
bouton de redirection: home
bouton de redirection: bas
bouton de redirection: explication des cookies
Création de sites web 3 D.   Webmaster, webdesign - Conseil.

Votre site web 3D, ... pour une autonomie.

Un espace francophone artisanal et pédagogique.
Logo de LigneWeb

la communication web
... JavaScript indispensable ... code utf-8 ... -  © design : LigneWeb

- Site expérimental en XHTML 1.0 et CSS 2.0 avec CSS 3.0 -


 •   Plan du site 
Avec des cours et des conseils.
  Notre Blog :  La ligne papyrus 
 Menu CSS 3  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7 
 Menu cours 5 CSS 3.0  - introduction   / column  - count  - width  - gap  - rule 



Cours 4 CSS 3 avec LigneWeb
Affichage multicolonne.



 © LigneWeb  ... /introduction au CSS 3.0 : ...
... affichage multicolonne.

© design : LigneWeb
© : alain jean deligne - LigneWeb



Cette page est réalisée en XHTML 1.0 transitionnel avec du CSS 2 et du CSS 3 ...
Cette page va être réalisée en parallèlle en HTML 5 et CSS 3 prochainement ...



Le logo de LigneWeb

Affichage multicolonne : introduction.


Suivez-nous.








Remarque : ... en CSS2 et CSS3 ... :

pour cette page et non visible ... :
le fichier ...  ligne21.css  ... qui mélange du CSS 2 avec du CSS 3 ...
... et ceci grâce aux sélecteurs spécifiques ... expliqués au ...  Cours CSS 3 




Rappel : des sélecteurs pour navigateur.

... des navigateurs ont des ...  sélecteurs spéciaux  ... pour intégrer les nouveaux sélecteurs en CSS3.0 ...
... c'est en attendant la réalisation plus complète du CSS 3.0 ...

... ces sélecteurs vont faire travailler le plugin intégrer dans les navigateurs les plus importants ...
  • ... pour ... Firefox 12 et + ... le sélecteur est ... -moz- ...
  • ... pour ... Safari 5.05 et + ... et pour ... Chrome 17 et + ... le sélecteur est ... -webkit- ...
  • ... pour ... Opéra 11 et + ... le sélecteur est ... -o- ...
  • ... pour ... Explorer ... le sélecteur est ... -ms- ...
  • ... pour ... Linux KDE ... le sélecteur est ... -khtml- ...

  • ... pour ... Opéra : propriété auditive ... le sélecteur est ... -xv- ... (peu utilisé)
... ces sélecteurs sont à placer devant le sélecteur nouveaux du CSS 3.0 ...
... il faudra répéter le sélecteur avec les sélecteurs spéciaux pour que tous puissent lire cette propriété ...
... nous avons donc les navigateurs Safari 4, Firefox 3.6, et d'autres, qui utilisent ces sélecteurs spéciaux ...
... par contre la dernière génération passe à une dimention de plus grande intégration ...
... les navigateurs sont parfois encore en version béta ... mais cela change rapidemment ...

... le nouvel Opéra ... change et est à base Chrome ...
... utilisation des cinq premiers sélecteurs en fonction de l'évolution des Navigateurs ...
... les sélecteurs suivants ne sont utilisés que sur ce site ...

... information sur le ... HTML 5.0 ...  pour les navigateurs sur Wikipedia  ... et leurs plugins ... :
...  Amaya, Gecko, KHTML, Presto, Tasman, Trident, WebKit  ...
... avec, pour l'essentiel : -moz-, -webkit-, -ms-, ... comme sélecteurs spécifiques ...
... -ms- ... pour Explorer qui reste avec Windows 7 encore fort utilisé ...

... nous allons ajouter aux premiers sélecteurs définit plus haut ceux-ci :
  • ...-khtml- ... pour le CSS 2 pour Linux KDE
  • ...-gecko- ... pour le CSS 2 pour Camino · Epiphany · IceCat · Iceweasel · Kazehakase · K-Meleon · Firefox Mobile · Mozilla Firefox · SeaMonkey · TenFourFox · Torpark
  • ...-presto- ... pour le CSS 2 pour Opera Mini · Opera Mobile · Opera Wii · Nintendo DS Browser · Nintendo DSi Browser
  • ...-trident- ... pour le CSS 2 pour Avant Browser · AOL Explorer · Internet Explorer · Internet Explorer Mobile · Maxthon · SlimBrowser · Sleipnir
  • ...-blink- ... pour le CSS 2 pour Arora · Epiphany · Google Chrome · Chromium · iCab · Konqueror · Midori · MixShark · OmniWeb · Opera · rekonq · Safari · Shiira · SRWare Iron · SWK browser · Uzbl · Vespucci · Slimboat · Yandex Browser

Simplification des sélecteurs :



... avec l'évolution des derniers navigateurs qui intègre le CSS 3 ...
... nous avons éliminé certains sélecteurs, ce qui allège l'écriture ...
... pour le CSS 2 déjà ...
... nous le montrons avec les différents exemples sur ce site ...

... sont éliminés : les sélecteurs -o-, -ms-, -khtml-, ...
... mais pas encore totalement pour certaines transformations ...

... et -gecko-, -presto-, -trident-, -blink-, ces derniers ...
... n'étant pas essentiels ...
... nous le voyons dans la feuille de style CSS 2 ...

... -webkit- est par contre gardé pour l'essentiel ...
Zoom



... l'utilisation de ces sélecteurs n'affectent en rien l'affichage même avec des navigateurs plus anciens ...
... ils ne verront pas les effets nouveaux tout simplement ...
... comme pour ce site dont les ombrages, par exemple, ne sont pas vus par tous ...
... ceci est vrai pour le nouveau CSS 3 ...



Introduction au multicolonne en CSS 3 :

... on pouvait réaliser des colonnes en XHTML ...
... mais cela demandait de travailler avec des div ... en les positionnant avec dificulté ...
... mais en CSS 3, il va être facile de travailler dans un seul div ...
... avec des propriétés à partir de la propriété ... column ...
... cette propriété se définit en CSS 3 ...

Différentes propriétés possibles :

... nous avons les propriétés ... column-count ... et ... column-width ...

La propriété : column-count :

... la propriété column-count définit le nombre de colonnes par un nombre entier ...
... on peut également dire que cette propriété est auto ...

L'écriture :



La propriété : column-width :

... la propriété column-width définit la largeur des colonnes par un nombre entier en pixel ...
... dans ce cas, il est impératif de ne pas changer la largeur du bloc contenant ...

L'écriture :


Un exemple :

... texte sans column : ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.


... texte avec column : ...

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.


fichier html : fichier css :
En le réactualisant pour les derniers navigateurs essentiels :



D'autres propriétés plus précises :

... on peut préciser l'espace entre les colonnes ...

La propriété : column-gap :

... la propriété column-gap définit la largeur des colonnes par un nombre entier en pixel ...
... l'espace est définit par un nombre en pixel ...
... cela précise bien cet espacement ...

L'écriture :



La propriété : column-rule :

... la propriété column-rule définit la ligne de séparation entre les colonnes ...
... cette ligne peut avoir plusieurs attributs ... :
... le style de la ligne ...
... la largeur de la ligne exprimé avec un nombre entier ...
... et la couleur de la ligne ...
... il existe d'autres manières d'écrire ces propriétés ...

L'écriture :


Un exemple :

Un logo de LigneWeb

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sit amet diam et wisi malesuada varius. Morbi erat velit, egestas ut, blandit sed, venenatis adipiscing, ipsum. Maecenas risus. Donec ac magna. Cras sed justo. Etiam et sem. Praesent euismod sem sit amet enim auctor pulvinar. Quisque nunc.


fichier html : fichier css :
En le réactualisant pour les derniers navigateurs essentiels :

... ici on intègre une image normalement dans le texte ...
... les caractéristiques spécifiques à column agissent également sur celle-ci ...


... design 3 D ...

...  fenêtre sur l'univers  ...             © design : LigneWeb - © Apple





 Menu CSS 3  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7 
  Essentiel :   - Accueil  - Offres  - Site photo  - Projet  - Historique  - Historique RSS  - Réalisations  - Création 
- Cours XHTML  - Cours CSS 2  - Création site  - Cours HTML 5  - Cours   CSS 3  - Cours jQuery 
- Programmes JS  - Liens - © - cookies  - Contact  - Plan du site 

Chaque enfant compte. Plan Belgique     Valid XHTML 1.0 Transitional     [Valid RSS]     CSS Valide !     Le logo de LigneWeb

... tout ne respecte pas le W3C ... site d'expérimentation ...

le titre du site web
©  Copyright :  "LigneWeb" (2008-2017) Tous droits réservés.  Légal  Design, Artisan web: mathalan 
 LigneWeb :   BE 0843 356 602. (2012-2017)   Conditions d'utilisation  Création: masterligne  • Qui sommes nous? 

Réinstaller le Bien en soi ... pour réinstaller le Bien sur terre ... et changer le monde.
© LigneWeb  Utilisation de cookies