Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

14 février 2009 6 14 /02 /février /2009 16:54

Voilà maintent plusieurs jours que les blogueurs chevronnés attendent les nouveaux albums over-blog (cf. article).
Comme la mise à jour commence à traîner et que le problème de la mise en forme des albums photos est problématique, voici une simple astuce !!!


Tout d'abord il faut savoir que si l'affichage de vos albums photos est catastrophique, il faut commencer par passer en mode avancé (cf. article sur le mode classique et sur le mode avancé).
Si vous étiez en classique, sauvegardez votre css de Global pour le coller sur tous les autres onglets : global, accueil, article, page, album et photo seule.



Pour les onglets album et photo seule, il faut légèrement modifier la structure. C'est elle qui déforme l'affichage des albums.

La structure des colonnes #cl_0_0, #cl_1_0, #cl_2_0 doit être modifiée par celle-ci :

                  #cl_0_0 {width:100%;}
                  #cl_1_0 {width:80%;}
                  #cl_2_0 {width:100%;}


Et magie, ça marche...


EDIT du 16 février 2009 :
Si ça ne marche toujours pas, tentez cette solution


Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
13 février 2009 5 13 /02 /février /2009 16:42
Il peut arriver d'avoir envie de paramétrer la fenêtre qui contient le formulaire qui permet de laisser un commentaire.
Alors voici comment s'y retrouver.




Le cadre qui contient l'ensemble du formulaire :
#formComment


Je veux par exemple lui mettre du rouge en fond le temps qu'une image vienne en fond et une bordure rouge double tout autour de 2 pixels d'épaisseur :
#formComment {background:#CC0000 url(http://imagedefondcommentaires.jpg); border:2px double #CC0000;}




Le titre des commentaires :
#formComment h2

Je veux par exemple qu'il s'affiche dans une bande de couleur blanche, qu'il soit écrit en rouge, qu'il soit centre, en 15 pixels de grandeur et qu'il soit souligné.

#formComment h2 {background-color:#FFFFFF; color:#CC0000; text-align: center; font-size: 15px;text-decoration:underline;}




Les textes présents dans le formulaire sauf : Visible uniquement par l'auteur du blog. Et : Nous vous rappelons que vous êtes responsable du contenu des commentaires que vous publiez. Votre adresse IP (XXX) sera archivée.
#formComment label


Je veux par exemple que les textes soient écrits en Arial de 10 pixels et en noir.
#formComment label {font-family: Arial; font-size: 10px; color: #000000;}




Les champs (nom, e-mail, site) qui contiennent les données de l'utilisateur :
#formComment input


Je veux par exemple que le fond soit orange, qu'il y ait tout autour une ligne en pointillée de 2 pixel d'épaisseur en noir, que le texte tapé s'affiche en bleu dans le formulaire et en Verdana :
#formComment input {background-color: #ff6600; border:2px dashed #000000; color:#000099; font-family:Verdana;}




La zone qui contient le texte tape du commentaire laissé par le visiteur :
#formComment textarea


Je veux qu'il y ait une couleur noire qui s'affiche avant que l'image de mon choix se mette en arrière plan, je veux qu'il y ait une bordure simple blanche d'un pixel d'épaisseur et que le texte tapé par le visiteur s'affiche en rouge dans le formulaire.
#formComment textarea {background: #000000 url(http://fonddeformulaire.jpg); border:1px solid #FFFFFF; color:#CC0000;}

 

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
11 février 2009 3 11 /02 /février /2009 08:45

 

Le calendrier d'over-blog n'a pas pour seule utilité de monter quel jour nous sommes. Il permet aussi de donner accès aux articles du blog qui l'affiche selon une date précise sans avoir à passer par la pagination.

 

Le module du calendrier comporte plusieurs classes. Ca peut-être intéressant de les configurer comme bon nous semble.

 

 



La cellule qui contient le mois actuel :

.calendarTop1

 

Je veux par exemple, que le mois soit écrit en arial, en 10px, en jaune, en gras, sur un fond vert et que le texte soit centré :

.calendarTop1 {font-family: Arial; font-size: 10px; color: #FFFF00; font-weight: bold;  background-color:#00FF00; text-align:center;}

 

 

 

La cellule qui contient le jour actuel :

.calendarToday1

 

Je veux par exemple que le jour soit écrit en Helvetica, en 10px, en bleu, sur un fond de couleur rouge, qu'il soit centré et en gras :

.calendarToday1 {font-family: Helvetica; font-size: 10px; color:#0000FF; background-color:#FF0000; text-align: center; font-weight: bolder; }

 

 

 

Les chiffres des jours du mois  :

.calendarDays1

 

Je veux par exemple que les chiffres soient espacés de 50px de large, 15px de haut pour que ce soit lisible. Puis je veux que le texte soit écrit en verdana, de 10px, en noir et centré.

.calendarDays1 {width:50px; height: 15px; font-family: Verdana; font-size: 10px; color: #000000; text-align:center;}

 

 

La cellule qui contient les premières lettres des jours de la semaine :

.calendarHeader1

 

Je veux par exemple qu'elles soient en arial, de 12px, en blanc sur un fond noir. Je veux que chaque case soit dissociée par une bordure rouge continue de 1px d'épaisseur :

.calendarHeader1{font-family: Arial; font-size: 12px; color:#FFFFFF; background-color: #000000; border: 1px solid #CC0000;}

 

 

 

La cellule qui contient le calendrier en entier :

.calendarTable1

 

Je veux par exemple qu'elle ait une bordure jaune de 3 pixels d'épaisseur en pointillés :

.calendarTable1 {border : 3px dashed #FFFF00 ; }

 

 

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
10 février 2009 2 10 /02 /février /2009 14:22

Il y a déjà un article sur ce blog qui explique comment insérer une bannière dans over-blog.

il y a aussi un article qui explique comment se débarrasser d'une bannière incluse dans le css de base.

Maintenant nous allons voir comment positionner une bannière et lui donner la taille qu'on désire.

 

 

Pour faire ce qu'on veut de sa bannière, une fois toutes les étapes de cet article suivies à la lettre : Placer une bannière à l'entête de son blog (Over-Blog)

 

 

Une fois le marteau cliqué, évitez surtout de choisir l'option « bannière graphique », parce que vous aurez du mal à faire d'elle ce que vous voulez. Choisissez plutôt « contenu personnalisé » vous insèrerez l'image par son adresse.

                                                    

 

Cliquez ensuite sur le bouton « html » et écrivez un code html comme ceci :

 

<img width="800" src="http://www.adressedelabanniere.jpg" height="100">

 

Modifiez tout ce qu'il faut :

Width : c'est la largeur de votre bannière.

Height : c'est la hauteur de votre bannière

Et entre les guillemets c'est l'url de votre bannière

 

 

 

Ensuite, il suffit d'indiquer à l'image le bon ordre : centrée, ou alignée à droite, ou alignée à gauche.

 

Centrée : il suffit d'ajouter <center> au début du code et terminer par </center>

<center><img width="800" src="http://www.adressedelabanniere.jpg" height="100"></center>

 

Alignée à gauche : il suffit d'ajouter <left> au début du code et terminer par </left>

<left><img width="800" src="http://www.adressedelabanniere.jpg" height="100"></left>

 

Alignée à droite : il suffit d'ajouter <right> au début du code et terminer par </right>

<right><img width="800" src="http://www.adressedelabanniere.jpg" height="100"></right>

 

 



 

Comment faire lorsqu'un blog est élastique et qu'on desire que sa bannière fasse toute la largeur ??

Comme expliqué dans l'article : rendre son blog élastique, il suffit de donner la valeur de la largeur en pourcentages.

<img width="100%" src="http://www.adressedelabanniere.jpg" height="30%">

 

A vous de jouer !

 

 

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
9 février 2009 1 09 /02 /février /2009 07:57

Lorsqu'on se sent vraiment perdu avec le css et qu'on a une âme sensible sujette à la panique, il vaut mieux éviter de modifier la structure de son blog sous peine d'avoir une frayeur en voyant son blog totalement déstructuré avec les modules en bas ou en haut, les articles disparus (pas effacés...)... bref un blog tout cassé qui donne l'impression d'avoir tout perdu !

 

Ce n'est pas une raison pour s'empêcher de découvrir toutes les libertés disponibles avec le css. Il a juste quelques précautions à prendre : prendre le temps de sauvegarder son css par exemple... ! Si vous êtes en mode classique il n'y a que dans global et certainement les cinq cases : Définitions d'affichage basiques, Définitions d'affichage du template, Définitions d'affichage de la variation, Définitions de structure de la variation, Définitions de structure du template.

 

Ensuite, il faut s'aider de l'article : modifier les largeurs du blog et/ou des colonnes et identifier quelles sont les colonnes de son blog et à quelles parties du blog elles correspondent.

 

 


- Qu'est-ce qu'un blog élastique  ?

Un blog élastique c'est un blog qui, quelque soit la résolution d'écran du visiteur, adaptera sa largeur.

Ainsi pour un blog comme http://photo.graph.over-blog.com si vous jouez avec la taille de la fenêtre, vous verrez que les largeurs de la colonne des modules et de la colonne des articles se rétrécissent (jusqu'à un certain point... j'ai indiqué un minimum) ou s'agrandissent.

 

 


- comment rendre son blog élastique ?

Le css de la structure du blog se trouve généralement dans « Définitions de structure de la variation » ou « définitions de structure du template » (les dernières cases dans l'administration d'over-blog/design/CSS).

C'est là qu'on trouve les éléments suivants :

#global

#cl_0_0

#cl_1_0

#cl_1_1

#cl_1_2

#cl_2_0

 

Il suffit alors d'indiquer les valeurs qui conviennent mais non pas en pixels mais en %. Car les pixels sont une dimension fixe, comme par exemple les centimètres. Avec les pourcentages,  le navigateur ajustera chaque colonne par rapport à la taille de la résolution d'écran et non pas avec des mesures fixes en pixels.

 


Il faut tout de même ne pas oublier quelques règles essentielles :

Il ne peut y avoir plus de 100% au total... sinon ça déborde et une colonne (ou plusieurs) se retrouvera en bas de la page !

Il ne faut pas oublier que les écarts (réalisés avec padding et margin) sont compris dans le total de la largeur du blog, il n'est donc pas rare d'avoir un total inférieur à 100%.

 

 

Prenons un exemple avec le thème Ethnic Celtic avec deux colonnes de modules (une à droite et une à gauche) et une colonne principale au milieu :

Voici le css qu'on trouve dans le css sans modification

 

body, html {padding: 0px; margin: 0px;}

#global {padding: 0px; margin: 0px auto; width: 950px;}

.ln {clear:both;}

.cl {float:left;}

 

#cl_0_0 {margin:0 0 15px 0; padding:0px; width:100%;}

#cl_1_0 {margin:0; width:180px;}

#cl_1_2 {margin:0; width:300px;}

#cl_1_1    {margin:0 10px 0 10px; width:440px; padding:5px;}

#cl_2_0 {width:100%; margin:15px 0 0 0;}

.box {width:100%; overflow:hidden;}

 

 

 

Voici ce que ça donne en mofiants les largeurs par des pourcentages :

body, html {padding: 0px; margin: 0px;}

#global {padding: 0px; margin: 0px auto; width: 100%;}

.ln {clear:both;}

.cl {float:left;}

 

#cl_0_0 {margin:0 0 15px 0; padding:0px; width:100%;}

#cl_1_0 {margin:0; width:18%;}

#cl_1_2 {margin:0; width:18%;}

#cl_1_1    {margin:0 1% 0 1%; width:60%; padding:1%;}

#cl_2_0 {width:100%; margin:15px 0 0 0;}

.box {width:100%; overflow:hidden;}

 

 



Un autre exemple ?

Voici avec le thème Ice cream pistache avec une colonne de modules à gauche et une colonne principale avec les articles à droite.

Voici son apparence sans modifications :

 

body, html {padding: 0px; margin: 0px;}

#global {padding: 0px; margin: 0px auto; width: 950px;}

.ln {clear:both;}

.cl {float:left;}

 

#cl_0_0{width:100%; margin:0 0 15px 0;}

#cl_1_0{margin:0px; width:300px;}

#cl_1_1           {margin:0 0 0 10px; width:625px; padding:5px;}

#cl_2_0 {width:100%;}

#cl_0_0 {margin-bottom:15px;}

#cl_2_0 {margin:15px 0 0 0;}

.box {width:100%; overflow:hidden;}

 

 


Voici maintenant en pourcentages :


 

body, html {padding: 0px; margin: 0px;}

#global {padding: 0px; margin: 0px auto; width: 100%;}

.ln {clear:both;}

.cl {float:left;}

 

#cl_0_0{width:100%; margin:0 0 1% 0;}

#cl_1_0{margin:0px; width:26%;}

#cl_1_1           {margin:0 0 0 10px; width:70%; padding:1%;}

#cl_2_0 {width:100%;}

 

#cl_0_0 {margin-bottom:15px;}

#cl_2_0 {margin:15px 0 0 0;}

.box {width:100%; overflow:hidden;}

 

 

 

Comment donner un minimum de taille à un blog élastique ?

C'est comme pour ce blog http://photo.graph.over-blog.com, lorsque vous diminuez la fenêtre, il arrive un moment ou les colonnes ne se diminuent pas davantage.

Il suffit d'ajouter cette valeur : min-width:600px à l'élément.
Vous pouvez remplacer 600 par la largeur de votre choix.

Par exemple je veux que pour un blog à une colonne de modules à gauche et une colonne principale à droite que ma colonne principale ne soit jamais plus petite que 550px de largeur, j'indique :
 

#cl_1_1           {min-width:550px ;}

 





C'est pas plus compliqué que ça... !

Sauf que...

Les quelques petits problèmes qui peuvent être rencontrés :

Certains thèmes d'over-blog ne s'adaptent pas à ce procédé car les images employées sont trop petites (les backgrounds des titres par exemple dans les thèmes technologic), sont répétées et c'est pas très joli.


Il faut toujours s'assurer qu'il n'y ait pas de « contrordre » dans le css (c'est valable pour toutes les modifications dans le css pas seulement pour rendre son blog élastique). Vérifiez bien qu'il ne reste pas par-ci par-là quelques dimensions données en px pour une colonne. Si c'est le cas effacez-les !


Pas de panique si soudainement une colonne se trouve en dessous de la première, c'est simplement parce qu'un de vos pourcentage est trop élevé. Diminuez légèrement vos pourcentages et refaites  un test sans oublier de rafraichir la page (F5) !

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
7 février 2009 6 07 /02 /février /2009 07:07

Lorsqu'on modifie un design d'over-blog pour le rendre « à son image » il peut arriver que certaines images ou valeurs soient récalcitrantes... on a beau les triturer, elles restent là et empêchent notre blog de devenir la véritable œuvre d'art que l'on voit dans nos rêves.

 

Mais y'a une astuce pour ceux et celles qui ont du mal avec le css mais qui n'ont pas peur de se salir les mains... une astuce qui se réalise facilement sans avoir à apprendre 4 volumes par cœur sur la syntaxe du css.

 

 

 

Il peut arriver lorsqu'on place une bannière que l'entête d'origine du blog soit toujours présente en arrière plan. Et c'est pas très esthétique !

 




 

- Comment faire sans s'arracher les cheveux ?

Très simplement, c'est la même méthode que celle expliquée dans l'article « Modifier le fond du blog sans rien connaître au css »

Il faut ouvrir le blog concerné (dans notre exemple, voici un blog avec le thème nacre métal), faire un clic droit sur la bannière et choisir « enregistrer l'arrière plan sous ».


 

Ce n'est pas la peine de l'enregistrer !

Nous regardons juste quel est le nom de l'image... !

Dans le thème Nacre Métal, nous voyons que son nom est : hdr.jpg

 


Il suffit alors de faire une petite recherche dans le css (en appuyant sur F3, l'invite de recherche s'affiche tout seul).

On voit que la bannière originale s'affiche une seule fois (parfois il peut y en avoir plusieurs) dans « Définitions d'affichage de la variation »
 

#cl_0_0 { background-image: url(http://fdata.over-blog.com/99/00/00/01/templates/262/default/article/common/pics/hdr.jpg); background-position: bottom; background-repeat: no-repeat;}

 

Il suffit alors de modifier ainsi :

Soit en modifiant l'adresse de la bannière originale par la sienne, mais ce n'est pas le plus facile. Car si vous changez de bannière, il vaut mieux passer par la configuration que par le css.

#cl_0_0 { background-image: url(http://url/mabanniere.jpg); background-position: bottom; background-repeat: no-repeat;}

 

Soit en supprimant l'image et en indiquant à sa place une couleur d'arrière plan :

#cl_0_0 {background: #CC000;}

Ici j'ai indiqué rouge.

Et placer une bannière comme indiqué dans l'article : placer une bannière

http://photo.graph.over-blog.com/article-19775362.html

 

Soit en supprimant l'image et en laissant l'entête transparente ce qui permet de laisser le background en arrière plan :

#cl_0_0 {background: transparent;}

Et placer une bannière comme indiqué dans l'article : placer une bannière

http://photo.graph.over-blog.com/article-19775362.html

 

 


 

Cette astuce est valable pour toutes les images présentes dans le blog !

 

 

 

Par exemple dans le même thème (nacre métal), on peut avoir du mal à se débarrasser du fond des articles. Un petit clic droit, « enregistrer l'arrière plan sous », on repère le nom de l'image : article_624_background.gif

 

On fait une recherche dans le css et on s'aperçoit que cette image est présente deux fois :

 

.pageContent {background-image: url(http://fdata.over-blog.com/99/00/00/01/templates/262/default/article/common/pics/article_624_background.gif);background-repeat: repeat-y;}

 

.contenuArticle, .extrait {background-image: url(http://fdata.over-blog.com/99/00/00/01/templates/262/default/article/common/pics/article_624_background.gif); background-repeat: repeat-y;}

 

On sait que .pageContent correspond aux pages... ce n'est pas donc pas le fond des articles. Par contre .contenuArticle correspond bien au css des articles.

 

 

Il suffit alors de modifier ainsi :

Soit en modifiant l'adresse du background original du fond des articles par la sienne.

.contenuArticle, .extrait {background-image: url(http://urldemonimagedarticle.jpg); background-repeat: repeat-y;}

 

Soit en supprimant l'image et en indiquant à sa place une couleur d'arrière plan :

.contenuArticle, .extrait {background:#FFFFFF;}

Là j'ai indiqué blanc.

 

Soit en supprimant l'image et en laissant le fond transparent ce qui permet de laisser le background en arrière plan :

.contenuArticle, .extrait {background: transparent;}

 

 

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
6 février 2009 5 06 /02 /février /2009 10:55

Il y a deux façons d'organiser l'apparence de son blog : soit en mode classique soit en mode avancé.


Qu'est ce qui les différencie ?

Ce n'est qu'une question visuelle : en mode classique le blog garde le même aspect quelque soit l'affichage : l'accueil, une page, un album photo (et encore, ça va changer), un article seul avec ou sans ses commentaires et en mode avancé chaque affichage peut-être différent.

 

- comment passer du mode classique au mode avancé ou comment passer du mode avancé au mode classique ?

Allez sur l'administration de votre blog et allez sur « configurer ».

 CSS

Il suffit alors soit de cliquer sur « avancé »si l'on est en classique et que l'on veut basculer,  soit de cliquer sur « classique ».

 

 

 

1 - Le mode classique :

 

- structure :

C'est certainement le plus simple. Surtout quand on débute avec son blog et dans le domaine du CSS, est de rester en mode classique.

Dans ce mode vous pouvez définir la structure de votre blog (colonnes, modules, bannière...) de cette façon :

 modification CSS

Il suffit d'aller dans l'administration d'Over-Blog, puis dans « configurer », « mise en page ». (1) dans le schéma.

Pour définir la structure de base, il faut aller en bas de la page et placer la souris sur l'icône en dessous du texte « choix de la structure ». Un menu déroulant s'affiche, et vous pouvez choisir celle qui correspond. (2) dans le schéma.

Ensuite il suffit de choisir les modules par « glisser-déposer » avec la souris. (3) dans le schéma.

Par exemple, vous souhaitez une colonne principale qui contiendra les articles à gauche et une colonne secondaire qui contiendra les modules à droite.

Un simple « glissé-déposé » (un clic de souris sur l'élément sans relâcher et déplacement du curseur jusqu'à l'endroit désiré) permet de choisir ses modules, leur ordre, leur nombre...

 

- css et design :

Le mode classique permet alors d'avoir un blog identique quel que soit la page affichée. La page d'accueil est identique à un article affiché seul avec ou sans ses commentaires ou à une page seule. Par exemple : http://luluetberlu.over-blog.com

Si vous avez un blog qui fonctionne ainsi vous pouvez l'indiquer en commentaire !

Le mode avancé permet alors de ne modifier qu'une seule page de css pour avoir le résultat sur l'intégralité du blog.

 

 

 

2- Mode avancé :


- structure :

C'est le même principe que pour le mode classique, sauf que les colonnes, les modules, les bannières, les pieds de page sont à définir à chaque fois et qu'il est ainsi possible d'avoir un blog totalement différent tant par son aspect que par sa structure.


Il est tout a fait envisageable d'avoir une page d'accueil à trois colonnes et une grande bannière, les articles seuls affichés sans bannière et à deux colonnes avec différents modules, et les pages avec une autre couleur ou même qu'avec une seule colonne...

Comme par exemple sur ce blog : la page d'accueil a une grande bannière, les articles seuls (ou les catégories) s'affichent avec une petite bannière et les pages (pour voir une page, cliquez sur « sommaire » en haut de ce blog) n'ont qu'une colonne et aucun module.

 

 

Avec le mode avancé il faut savoir jongler avec les onglets : global, accueil, article, page (je ne parle pas des albums photos, puisqu'on ne pourra bientôt plus les modifier cf. article).

 

Global :

C'est un css général du blog, c'est là qu'on indique les grandes tendances du blog.

 

Accueil :

Comme son nom l'indique c'est l'accueil du blog. C'est là qu'on met le css de l'apparence désirée pour la page principale de son blog, celle qui correspond à l'adresse principale du type http://monblog.over-blog.com (ou .fr), comme pour ce blog : http://photo.graph.over-blog.com

 

Article :

C'est ici que l'on indique le css pour ce qui concerne l'apparence du blog lorsque l'on clique sur un lien de la page d'accueil et qu'on n'est plus sur la page principale. C'est soit un article seul comme avec le lien de cet article : http://photo.graph.over-blog.com/article-27611775.html

Ou sur une catégorie, comme la catégorie webdesign de ce blog : http://photo.graph.over-blog.com/categorie-10266575.html

 

Page :

C'est ici que l'on modifie le css pour avoir un affichage particulier pour ces pages de blog qui ne sont pas des articles. Comme pour ce blog, la page sommaire : http://photo.graph.over-blog.com/pages/Sommaire__Webdesign__Graphisme__Photographie__Desi-994442.html

 

 

 

3 - Quel mode choisir ?

Honnêtement, pour quelqu'un qui débute en css, le plus simple serait de choisir le mode classique... surtout lorsqu'on désire conserver la même apparence et la même structure pour son blog. D'autant plus qu'en mode classique il y a des classes qui permettent tout de même de différencier quelque peu selon l'accueil, les pages, ou les articles affichés seuls. Et ainsi, lorsqu'on modifie le css, on n'a pas à se poser la question de savoir dans quelle partie faire les changements.

Voici quelques éléments qui suffisent à faire ses modifications en mode classique :
     * Pour les articles seuls :

#articleSeul

 

     * Pour les pages :

.page

.pageContent

.afterPage

.divPageTitle

.divPageTitle h2

 



Par exemple :

Je souhaite que mon titre d'article soit rouge sur ma page d'accueil et soit bleu lorsqu'il est affiché seul, j'indique :

.titreArticle {color:#000066;}

#articleSeul .titreArticle {color:#CC0000;}

 

Si je veux que les titres soient identiques à la page d'accueil et lorsque les articles sont affichés seuls, alors je supprime l'identifaint #articleSeul du css.

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
1 février 2009 7 01 /02 /février /2009 14:12

Margin et Padding... tout un programme ! Lorsqu'on débute en css, ces deux valeurs sont un peu obscures mais elles sont pourtant bien utiles.

Ces deux valeurs permettent de placer les éléments les uns par rapport aux autres et permettent de faire une mise en page précise.

 

Margin :

C'est simplement la marge extérieure d'un élément.

 

Padding :

C'est l'espacement intérieur d'un élément.

 

Oui, j'ai conscience que ça peut rester obscur même en donnant cette petite explication. Alors je vais tenter d'illustrer...

Imaginons que Padding et Margin sont dans un bateau... et bien Margin est tombé à l'eau, il pousse le bateau en nageant, et Padding reste dans le bateau et s'accroche au bord car il a peur de l'eau...

Ok, ok... je mets un schéma !


 

    - MARGIN :

Dans l'illustration précédente il est facile de remarquer la marge orange (margin) qui se trouve à l'extérieur de l'article. Elle permet que l'article ne soit pas collé à la pagination du haut de la page, ne soit pas collé aux modules de gauche, ne soit pas collé au bord de la fenêtre à droite et ne soit pas collé à l'article suivant.

 

La syntaxe ressemble à ça :

#article {margin: 10px ;}

On indique alors que l'article doit être espacé de 10px de tous les éléments qui l'entourent.

-> une valeur : elle s'applique à tous les côtés

 


Mais on peut encore plus précis. Si je veux que l'article soit espacé de 10 px en haut et en bas mais de 30px à gauche et à droite, je peux écrire ça :

#article {margin: 10px 30px;}

-> deux valeurs : elles s'appliquent d'abord au sens vertical (en haut et en bas) puis au sens horizontal (à gauche et à droite)

 

Et si je veux que chaque côté ait un espacement qui lui est propre, alors il suffit d'écrire ainsi :

#article {margin: 10px 30px 20px 0px;}

Dans cet exemple l'article sera espacé de 10px de la pagination (en haut), de 30px du bord de la fenêtre (à droite), de 20px de l'article suivant ou du fond de la page (en bas), et sera collé aux modules (à gauche) puisque j'ai indiqué 0.

-> quatre valeurs, on commence par en haut et on tourne dans le sens des aiguilles d'une montre 

 




 

    - PADDING :

Dans la première illustration il est facile de remarquer l'espace blanc (padding) qui se trouve à l'intérieur de l'article. Il permet que le contenu de l'article (son texte, ses images...) ne soit pas collé au bord. Ce ne serait pas très esthétique si les lettres du texte touchaient le background du blog et sans doute pas très lisible.

 

C'est pas terrible...

C'est tout de même mieux d'avoir un petit espace entre le texte et le bord de l'article.

 


Pour padding, la syntaxe ressemble à ça :

#article {padding: 15px ;}

On indique alors que le texte de l'article doit être écarté, centré, à 15px de tous les bords qui l'entourent.

-> une valeur : elle s'applique à tous les côtés

 



Mais on peut encore plus précis. Si je veux que le texte de l'article soit écarté de 15 px du haut et du bas mais de 28px à gauche et à droite, je peux écrire ça :

#article {padding: 15px 28px;}

-> deux valeurs : elles s'appliquent d'abord au sens vertical (en haut et en bas) puis au sens horizontal (à gauche et à droite)

 


Et si je veux que chaque côté ait un espacement qui lui est propre, alors il suffit d'écrire ainsi :

#article {padding: 15px 28px 5px 12px;}

Dans cet exemple l'article sera écarté de 15px du haut, de 28px de droite, de 5px du bas, et sera écarté du bord gauche puisque j'ai indiqué 12px.

-> quatre valeurs, on commence par en haut et on tourne dans le sens des aiguilles d'une montre 

 

 

Lorsqu'il y a qu'une valeur, elle s'applique aux quatre côtés ; lorsqu'il y en a deux la première s'applique au sens vertical, la deuxième au sens horizontal, lorsqu'il y en a quatre on commence par le haut, puis on tourne dans le sens des aiguilles d'une montre.

 

Il est aussi possible d'appliquer des valeurs padding et margin en suivant cette syntaxe :

padding-left : pour un espacement interne à gauche

padding-right : pour un espacement interne à droite

padding-bottom : pour un espacement interne en bas

padding-top : pour un espacement interne en haut

 

margin-left : pour une marge externe à gauche

margin -right : pour une marge externe à droite

margin -bottom : pour une marge externe en bas

margin -top : pour une marge externe en haut

 

 

 

     - Rappel...

Margin, padding et BORDER :

 

Pour border (une bordure) c'est la même chose, ou presque !

Si on indique une valeur, elle s'adapte à tous les côtés, pour deux : la première pour le sens vertical, la deuxième pour le sens horizontal... etc...

Sauf qu'il faut donner un peu plus de précisions dans la syntaxe : l'épaisseur de la ligne, le style de ligne voulue et la couleur...

Par exemple si je veux mettre une bordure simple de couleur rouge de 6px en bas de mes modules, alors j'écris :

.box {border-bottom: 6px solid #CC0000;}

ou

.box {border: 0px 0px 6px 0px solid #CC0000;}

 

Pour plus de détails pour les styles et l'utilisation des bordures : les bordures dans le css

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
30 janvier 2009 5 30 /01 /janvier /2009 14:00

Voici quelques précisions pour modifier l'apparence des articles de son blog en CSS chez Over-Blog...

 

 

 

Les généralités des articles :

#article

Et dans cette classe on y retrouve tout ce qui suit

 

Remarque : #articleSeul

C'est la même chose, mais seulement lorsque l'article est affiché tout seul (sans les autres articles) ou avec ses commentaires.

 

 

Tout l'article :

.article

 

 

Le haut des articles :

Ce qui contient tout le haut des articles (titre, date...)

.beforeArticle

 

L'apparence du texte du titre des articles :

.titreArticle

 

L'apparence du texte du titre des articles non survolé par la souris:

.titreArticle a

 

L'apparence du texte du titre des articles survolé par la souris:

.titreArticle a:hover

 

L'espace qui contient le titre de l'article

.divTitreArticle h2

 

La date

.date

 

 

Au milieu des articles :

Tout le corps des articles sans le haut (date, titre...) et sans le bas (ajout de commentaire, publié par...)

.contenuArticle

 

 

 

En bas des articles :

Toute la partie inférieure des articles qui contient l'auteur, le lien des commentaires...

.afterArticle

 

Les liens dans .afterArticle :

.afterArticle a

 

Les liens dans .afterArticle survolés par la souris :

.afterArticle a:hover

 

Publié par

.publishedBy

 

Publié dans (pour les catégories)

.topic

 

L'espace qui contient l'ajout de commentaire

.spanAddComment

 

Le texte de lien d'ajout de commentaire

.linkAddComment{}

 

Le texte de lien des commentaires

.linkComment{}

 

L'espace qui contient le nombre de commentaires (x) 

.spanLinkComment

 

L'espace qui contient le lien recommander

.spanRecommend

 

Le texte de lien pour recommander

.linkRecommend{}

 

Créer un trackback c'est inutile de le laisser, puisque Over-Blog a arrêté l'utilisation des trackbacks... je l'indique tout de même, on ne sait jamais !

.spanAddTrackback

 

Le lien des trackback :

.linkTrackback{}

 





Petits exemples pour la compréhesion : 
Je veux que la date de mes articles soit affichée en blanc, en arial, en 12px, soit alignée à droite...
.date {color:#FFFFFF; font-family:Arial; font-size:12px; text-align:right;}
 
Je veux que publié par ... soit écrit en rouge, en 16px et centré :
.publishedBy {color:#CC0000; font-size:16px; text-align:center;}

Je veux que mon titre d'article ait une image en fond :
.divTitreArticle
{background-image: url(http://adresseduneimage.gif);}

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article
5 janvier 2009 1 05 /01 /janvier /2009 12:01

Lorsqu'on écrit un article on peut avoir envie de l'illustrer par une image. Parfois - comme c'est souvent mon cas -  l'article sera même simplement composé d'une image (comme l'article maison close par exemple).

 



Il y a plusieurs possibilités avec over-blog :



 

A- vous hébergez l'image dans votre administration over-blog

Over-blog minimise la qualité de vos images dès que vous les hébergez sur leur serveur. C'est pourquoi il est préférable d'utiliser un hébergeur externe.

Pour héberger votre image dans Over-Blog et l'insérer dans un article, il suffit d'aller sur l'administration de votre blog, de cliquer sur le bouton publier, cliquer sur article, puis cliquer sur le bouton publier un article, et de cliquer sur le bouton « ajouter une image » en haut de votre éditeur d'article.



S'ouvre alors une fenêtre, il suffit de cliquer sur le deuxième onglet « ajouter une image de mon ordinateur ». Faites « parcourir » pour sélectionner l'image que vous souhaitez insérer.

 

Ensuite il suffit de choisir la taille que vous désirez pour votre image.

N'oubliez pas que si vous souhaitez avoir une bonne qualité d'image, il vaut mieux utiliser un hébergeur externe (cf. la liste comparative des hébergeurs d'images).

Et cliquez sur envoyer.

 

Va apparaître une fenêtre vous demandant comment placer votre image :

Encadrée de texte ou non, centrée ou non...


Puis cliquez sur « valider » et votre image est dans le corps de l'article dans l'éditeur... vous n'avez plus qu'à poursuivre votre rédaction et  votre publication habituelles.

 

 




B- vous souhaitez afficher une image déjà présente sur le net

Attention aux droits d'auteur... si l'image n'est pas libre de droit, demandez l'autorisation à son propriétaire.


Il faut d'abord récupérer l'URL.

Prenons un exemple avec la page de wikipédia : http://fr.wikipedia.org/wiki/Photo


En faisant un clic droit sur la photo dans la marge de droite, il faut choisir l'option « propriétés »

On remarque alors qu'une fenêtre s'ouvre avec plusieurs indications sur l'image, dont son adresse URL. Il faut sélectionner l'adresse (http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Large_format_camera_lens.jpg/140px-Large_format_camera_lens.jpg) et la copier.

Pour insérer l'image dans un article, il suffit d'aller sur l'administration de votre blog, de cliquer sur le bouton publier, cliquer sur article, puis cliquer sur le bouton publier un article, et de cliquer sur le bouton « ajouter une image » en haut de votre éditeur d'article.

 

S'ouvre alors une fenêtre, il suffit de cliquer sur le deuxième onglet « ajouter une image par son adresse ». Collez l'URL que vous avez copié précédemment.

 


Et cliquez sur envoyer.

 

Va apparaître une fenêtre vous demandant comment placer votre image :

Encadrée de texte ou non, centrée ou non...

Puis cliquez sur « valider » et votre image est dans le corps de l'article dans l'éditeur... vous n'avez plus qu'à poursuivre votre rédaction et  votre publication habituelles.


 

 


 

C- vous souhaitez afficher une image que vous avez hébergée chez un hébergeur d'image

C'est la même chose que la situation précédente.

Il suffit de récupérer l'url (pour servimg, vous pouvez consulter le tuto comment héberger une image) et procéder comme précédemment.



Pour héberger votre image dans Over-Blog et l'insérer dans un article, il suffit d'aller sur l'administration de votre blog, de cliquer sur le bouton publier, cliquer sur article, puis cliquer sur le bouton publier un article, et de cliquer sur le bouton « ajouter une image » en haut de votre éditeur d'article.

 

S'ouvre alors une fenêtre, il suffit de cliquer sur le deuxième onglet « ajouter une image par son adresse ». Collez l'URL que vous avez copié précédemment chez votre hébergeur d'image.

Et cliquez sur envoyer.

 

Va apparaître une fenêtre vous demandant comment placer votre image :

Encadrée de texte ou non, centrée ou non...

Puis cliquez sur « valider » et votre image est dans le corps de l'article dans l'éditeur... vous n'avez plus qu'à poursuivre votre rédaction et  votre publication habituelles.

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article