A savoir

Télécharger Mozilla Firefox

L'utilisation de Firefox comme navigateur est chaudement recommandée
Un plus est l'installation de l'extension web developer

 
Un blog secondaire pour réunir diverses astuces et aides.

Vous êtes invités à vous exprimer sur les didacticiels dans les commentaires, que ce soit pour demander un surplus d'informations, pour préciser un point un peu vague ou juste pour donner votre avis.

Merci d'éviter de me contacter via le formulaire de contact en bas de ce blog, je ne lis presque jamais les mails reçus à cette adresse là. Il est préférable d'utiliser les commentaires ou le lien email colonne de gauche.


Actuellement, série d'articles détaillant les différentes classes des CSS V2



Les articles de la catégorie mon blog est tout cassé sont là pour expliquer comment réparer son blog en cas d'insertion de jacascript là où il ne fallait pas. Pour ceux qui ne comprennent pas l'article T'as cassé ton blog ? de Francisek.

La catégorie trucs et astuces en confiance rassemble quelques tutoriels.
Les multiples façons de mettre de la musique sur son blog sont en partie recensées dans la catégorie lecteurs de musique pour OB.
Et enfin, la rubrique Logiciels à avoir vous conseille quelques logiciels (libres bien sûr) bien pratiques.
liste de communautés utiles

communauté : Apprivoiser la version 2
   Voici la liste des classes concernant les albums photos et les photos affichées seules, avec 2 captures d'écran pour que ce soit plus parlant

Les classes des albums


Classes des éléments des albums photos

#galeries  {}
/* galerie avec le nom des albums  */
.lienAlbum  {}
/* Les liens vers tous les albums photos dans la galerie */
.lienAlbum.selected  {}
/* Le lien vers l'album actuellement sélectionné */
.h2Album  {}
/* Le titre de l'album */
#descrAlbum  {}
/* La description de l'album photo */
.thumbsAlbumContainer  {}
/* le containeur des vignettes */
.thumbAlbum  {}
/* Les vignettes */




Les classes des photos seules


Classes des éléments des photos seules

#galeries  {}
/* galerie avec le nom des albums  */
.lienAlbum   {}
/* Les liens vers tous les albums photos dans la galerie */
.lienAlbum.selected  {}
/* Le lien vers l'album actuellement sélectionné */
.h2Album  {}
/* Le titre de l'album */                            
.quickNavAlbum  {}
/* Les liens permettant la navigation rapide */
.precAlbum  {}    
/* Lien précédent */        
.suivAlbum  {}    
/* lien suivant */        
.retourAlbum  {}
/* lien retour */
#photo  {}
/* le containeur de la photo sélectionnée */
#selectedPhoto  {}
/* La photo sélectionnée */
.decrPhotoAlbum  {}
/* La description de la photo */
.thumbsAlbumContainer  {}
/* le containeur de vignettes */
.thumbAlbum  {}
/* Les vignettes (leur nombre se choisit dans la configuration de l'album */
.thumbCouranteAlbum  {}
/*la vignette de la photo sélectionnée  */


PS: je n'ai pas montré sur la 2e capture les éléments identiques à ceux de la première capture. 
publié dans : CSS détaillé
ajouter un commentaire commentaires (4)   

communauté : Aide

C'est possible. En utilisant tout simplement des paragraphes. ( Touche Entrée pour aller à la ligne, touches Maj + Entrée pour changer de paragraphe )
Mais pourquoi faire me direz-vous? Et bien, cette idée d'article a vu le jour après une discussion avec Djac qui n'était pas satisfait de la mise en page de ses texte sur son blog,  voici d'ailleurs son article à lire pour mieux comprendre la raison d'être de cet article-ci: Typographie et mise en page

Voici l'allure qu'a un texte sans autre mise en page et sans modification du CSS:


Paragraphes moches

Un texte non justifié, pas d'alinéa en début de paragraphe et un espace entre chaque paragraphe.

Pour remédier à cela, il suffit de modifier cette ligne dans son CSS : .contenuArticle p {} (la rajouter si elle n'est pas présente )
La modifier en
.contenuArticle p {margin:0; padding:0; text-indent:15px; text-align:justify; }


par exemple pour obtenir un texte justifié, présentant un alinéa ( voir cet article ) à chaque début de paragraphe et pas d'espace entre les paragraphes

Voici l'allure qu'à ce texte sans autre mise en page et avec modification du CSS:

Paragraphes mis en page

On obtient bien le résultat souhaité.
Maintenant, imaginons que l'on ne souhaite pas appliquer cette mise en page à tous les paragraphes contenus dans les articles, mais uniquement à certains.
Dans ce cas, au lieu d'utiliser la première méthode, il suffit de combiner un style applicable via l'éditeur de texte (en passant par les fonctions avancées ) , comme par exemple le style perso1, et l'utilisation de paragraphes.
Une fois les paragraphes créés, sélectionner avec la souris tout le texte à mettre en page et lui appliquer le style perso 1.
Ensuite, rajouter ces ligne dans le CSS global

.hitperso1 p {font-style:normal;text-align:justify; text-indent:15px; margin:0; padding:0;}
div {margin:0; padding:0;}

Et voilà.
Si vous souhaitez avoir une marge intérieure dans vos articles (ce qui est tout de même plus agréable à l'oeil ), il sufit d'utiliser ceci:

.contenuArticle {padding: 5px 10px 5px 10px;}
par exemple (dans l'ordre, padding-top, padding-right, padding-bottom et padding-left ).
Ou plus simplement
.contenuArticle {padding: 5px 10px ;}
par exemple si lesmarges intérieures sont identiques en bas et en haut, et identiques à gauche et à droite
Remarque : la mise en forme dans l'éditeur de texte n'est pas la même que celle qui sera visible sur le blog, sauf si vous avez coché la case appliquer la feuille de style à l'éditeur dans les options globales.

 

 
publié dans : trucs et astuces pour son blog
ajouter un commentaire commentaires (8)   

des trucs

Accueil

Il y a 1 curieux sur ce blog

Me contacter




Les flux RSS

Remarque


Les captures d'écran sur ce blog sont réalisées sous Firefox2/Ubuntu, le rendu peut différer avec un autre système d'exploitation et un autre navigateur.


Un peu de musique?

Va chercher

Créer un blog sur over-blog.com - Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus