Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

01.12.2009

Créez une feuille de styles dédiée à l'impression

Nous avions abordé le principe dans « Pourquoi et comment adapter des feuilles de styles pour l'impression et les mobiles ? », voyons maintenant le procédé qui permettra d'imprimer sans faire mauvaise impression.

Copions d'abord la feuille de styles courante

Lire la suite

15:17 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : css, media, imprimer, print, style | |  del.icio.us | | Digg! Digg |  Facebook

10.05.2009

Un style pour les citations avec "margin" et "padding"

Créer un sytle pour les citations nous a déjà permis de revenir sur les bordures, c'est au tour des espaces intérieurs et extérieurs... Voire entre les deux.

J'ai ajouté une couleur de fond à notre style, pour que la démonstration à propos des espace soit plus visible. Cela nous donne ceci :

Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.

Balzac (Le Lys dans la vallée)

<p style="background-color:#ddb866;
border-left-style:dashed; border-left-width:3px; border-left-color:#662600;
text-align:left; font-style:italic">
Malgré l'autorité de la chose jugée, beaucoup de personnes se donnent le ridicule de rendre un écrivain complice des sentiments qu'il attribue à ses personnages ; et, s'il emploie le je, presque toutes sont tentées de le confondre avec le narrateur.<br /><br />
Balzac (Le Lys dans la vallée)
</p>

Le texte colle à la bordure de gauche, ce n'est pas très joli, et la citation se distinguerait plus encore du corps de texte si nous pouvions ajouter un décrochage. Ces deux paramètres se gèrent indépendamment.

Lire la suite

10:30 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : css, border, margin, padding, citation, style | |  del.icio.us | | Digg! Digg |  Facebook

06.05.2009

Un style pour les citations avec la propriété « border »

Dans un contexte toujours plus tendu autour de la propriété intellectuelle, il conviendrait de ne pas négliger la bonne présentation des extraits de texte auxquels vous souhaitez réagir, ou que vous utilisez pour illustrer votre propos.

La mise en forme des citations fait parfois partie des styles par défaut proposés dans les éditeurs de note des plateformes de blog, mais pas chez Hautetfort pour l'instant. Comme nous avons créé un style pour le code, nous allons en créer un autre pour les citations en abordant en trois notes : les bordures, les marges, et cette logique bizarre de montre carrée.

En CSS, "border" vous permet de créer une bordure autour de votre texte, vous pouvez très simplement l'utiliser en style attaché à un paragraphe de cette façon.

Exemple de texte avec "bordure".

<p style="border-style:solid; border-width:1px; border-color:#000;">Exemple de texte avec "bordure".</p>


Style de trait, épaisseur et couleur

Il est recommandé de donner ces propriétés dans cet ordre, même si certains navigateurs "supportent le désordre".

Les styles de trait les plus courants sont : continu (solid), avec des tirets (dashed), avec des points (dotted), ou doublé (double). Il en existe d'autres.

La commande de l'épaisseur se fait avec « width », généralement en pixels, mais éventuellement avec des adjectifs (length, thin, medium, thick). Notez qu'il est utile d'avoir au moins 3 pixels d'épaisseur pour avoir deux lignes visibles. De même, pour voir les points passer de « carrés » à « ronds » faut-il leur accorder un minimum de largeur.

La couleur se commande avec « border-color ».

Lire la suite

13:26 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : css, border, bordure, cadre, citation, style | |  del.icio.us | | Digg! Digg |  Facebook

28.04.2009

Créer un style pour afficher du code

Vous l'avez remarqué, je propose régulièrement de copier du code, le plus souvent des éléments de CSS mais parfois du HTML. Ceux qui sont déjà perdus vont devoir s'accrocher, désolé. Je me propose de le mettre en forme avec un "style", à vous de savoir le faire avec du style.

La problématique est la suivante. Quand vous utilisez un traitement de texte traditionnel, vous appliquez un "style" à une portion du texte et ce texte devient titre de niveau 1, 2, etc. Au "style" sont attachées des propriétés de famille de police, de taille, de mise en forme de caractère et de paragraphe. Ici, pas de style pour les notes, c'est à vous de faire les mêmes manipulations à chaque fois que vous voulez l'équivalent d'un titre 1, 2, etc. C'est vite fastidieux, et surtout, si vous changez d'avis sur ce que doit être un titre 1, vous devez tous les refaire.

L'idéal serait donc de créer des styles, et de pouvoir les mettre en œuvre facilement, une fois dépassée la pénible étape des réglages.

Lire la suite

10:30 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (0) | Tags : code, css, style, modifier | |  del.icio.us | | Digg! Digg |  Facebook

13.03.2009

Afficher une image d'arrière plan en mosaïque, en motif (révisée)

Parce que vous ne trouverez pas forcément d'image à la taille idéale, et notamment parce que la zone à occuper n'a pas une surface constante, vous pouvez utiliser une image en motif, en mosaïque. Cette note publiée le 3 février a été mise à jour après le re-design de ce blog.

La partie centrale de ce blog, comme la colonne de droite sont habillées par des images en mosaïque, notammment. Il s'agit d'un motif, une petite image répétée autant de fois que nécessaire. Pour la colonne de droite, il s'agit de celle-ci :

body-bg.jpg

Dans la feuille de style

Vous trouverez dans le fichier les paramètres de la colonne de droite. Le code est maintenant le suivant :

#right {
overflow: hidden;
float: right;
width: 225px;
background: #ddb866 url(images/aspire/body-bg.jpg);
color: #000000;
}

La répétition d'une image en arrière-plan est activée par défaut. Il suffit donc de donner l'adresse de l'image pour qu'elle soit utilisée en motif. Dans ce code, il s'agit d'une adresse "relative" au domaine en cours en l'occurence geemee.hautetfort.com. Le code avec l'adresse absolue serait background: #ddb866 url("http://geemee.hautetfort.com/images/aspire/body-bg.jpg");

Il vous faut donc d'abord télécharger votre image-motif via Tableau de bord / Fichiers dans le répertoire images ou dans un nouveau dossier comme celui que j'ai nommé aspire.

Après vous modifiez la feuille de styles via Présentation / Configuration avancée / Feuille de styles : Modifier le template.

Trop facile non ?

30.01.2009

Afficher une image d'arrière-plan fixe

Je vous rassure, c'est un discours sur la méthode... pas sur le résultat. Un jour j'aurai le temps d'avoir du goût.

Vous en avez assez des ces aplats de couleur ? Vous voulez de l'image, et de la belle, pour arrière-plan ? Voici comment faire.

Je compte sur votre goût et votre débrouillardise personnelle pour trouver une belle image, que vous utiliserez sans violer son auteur, notamment dans son droit moral. Avant de partir à sa recherche, vous devrez savoir si vous souhaitez un motif répétitif (comme pour un papier peint avec raccord) ou une image unique et suffisamment grande. Et suffisamment grande c'est combien ? C'est... une certaine taille.

Je vois bien que cette première réponse vous déçoit, mais analysons ensemble les données du problème. Vous pourriez considérer que la bonne taille, c'est la votre. Celle de votre écran je veux dire. Je ne suis pas loin de penser que vous avez raison. Mais réfléchissez tout de même à la taille des écrans de vos visiteurs, qui disposent d'affichages différents du votre. Une personne qui visiterait mon site avec une résolution de 800x600 pixels ne verrait pas la moitié de l'image car elle mesure 1280x800 pixels. Si mon image est trop petite, le visiteur verra du blanc à droite et en dessous. Pour une image fixe, il faut bien faire un choix qui ne peut pas contenter tout le monde.

Pour une image répétée, ce problème n'existe pas, puisque précisément, l'image est répétée sur toute la surface affichée. C'est pourquoi nous voyons maintenant l'image fixe, et bientôt l'image répétée (comme dans la colonne de droite).

Afficher une image fixe en arrière plan de la page.

Une fois l'image choisie et modifiée par vos soins, vous la chargez sur le blog via Tableau de bord / Fichiers / Images / UI1. Vous n'avez pas de dossier UI1 ? Mais créez le donc pour y enregistrer les différentes images de "User Interface 1". Vous pouvez l'appeler Guernica ou Catherine_de_medicis si vous voulez, cela vous regarde.

Ensuite, vous allez modifier la feuille de style, en allant sur Présentation / Configuration avancée / Feuille de styles et Modifier le template.

RAPPEL : Il n'y pas de sauvegarde de la feuille de style, soyez prudents.
- Copiez le contenu et enregistrez le dans un fichier en mode texte avec l'extension .CSS
- Commentez vos interventions dans la feuille de style en utilisant les balises /* commentaire */
- D'ailleurs plutôt que de supprimer les paramètres existants, vous les encadrerez de balise de commentaire pour les neutraliser. Il vous sera plus facile de faire marche arrière.

Vous pouvez accéder à la feuille de styles pour geemee.hautetfort.com en cliquant ici.

Il faut intervenir sur l'élément "body", celui qui se situe au plus haut niveau.

Le code de body est maintenant :

body {
margin: 0px 0px 20px 0px;
padding: 0px;
background-color: #FFFFFF;
/*** mon arrière plan >>> ***/
background: url("http://geemee.hautetfort.com/images/UI1/arriere-plan.jpg") /** repeat-y 0% 0% **/ ;
background-repeat: no-repeat ; background-attachment:fixed;
/*** <<< mon arrière plan ***/
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
word-spacing: normal;
text-align: center;
}

background-color: #FFFFFF; indique la couleur à afficher, sous l'arrière-plan. C'est utile quand l'image est plus petite que l'espace d'affichage.

background: url("http://geemee.hautetfort.com/images/UI1/arriere-plan.jpg") indique l'adresse de l'image d'arrière-plan.

/** repeat-y 0% 0% **/ est contradictoire avec notre objectif de non répétition, je l'ai donc mis en commentaire.

background-repeat: no-repeat ; impose la non répétition de l'image, même si elle devait être trop petite.

background-attachment:fixed; permet de fixer l'image, elle ne défilera pas avec le texte.

Seul le code entre /*** mon arrière plan >>> ***/ et /*** <<< mon arrière plan ***/ a été ajouté.

Le code de #container est devenu :

#container {
line-height: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
text-align: left;
/***neutralisation >>***
background: #aaaaaa url("http://static.hautetfort.com/backend/graphics/design/preview/set8/cab22a/f_general.gif") repeat-y 0% 0%; *** << neutralisation ***/
width: 988px; /* IE 5 */
}

J'ai neutralisé l'arrière plan de #container, pour que l'image f_general.gif ne vienne pas recouvrir l'arrière-plan.

Et voilà ! La prochaine fois, nous verrons l'image répétée, ou en mosaïque.