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.

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

01.05.2009

Mettre un sommaire "À propos" sans composer en html

Vous avez suivi les conseils de la note de Gee Mee pour Personnaliser les éléments des colonnes sans intervenir dans le code, ou Gérer le contenu des colonnes de votre blog, et vous avez tout de même rencontré des difficultés ? Votre page en est toute tourneboulée, ou votre module apparaît avec une vilaine mise en forme ? C'est sans doute que le html que vous avez copié n'est pas au point !

Si votre besoin est simplement de proposer un sommaire de certaines notes ou liens permanents, alors voici une astuce toute simple pour contourner le problème... sans doute connaissiez-vous déjà la solution, sans avoir pensé à l'utiliser !

Image 6.pngPrenons un exemple : la forme du module "À propos" ne vous convient pas.

Vous voulez qu'il apparaisse comme les autres modules, et non pas avec ces deux mots si discrets que l'on remarque à peine. C'est moche, n'est-ce pas ?

De plus vous voulez que cette présentation renvoie vers deux pages :

- A propos de ce blog
- A propos de l'auteur

Si comme moi vous êtes nul(le) pour rédiger du HTML, vous hésitez à vous lancer car alors il vous faut rédiger des "a href" et peut-être même (et justement je n'en sais rien !) des "li" pour faire apparaître votre sommaire correctement avec des puces. Boouh, trop de boulot, trop de rigueur d'écriture... Alors comment faire simple ?

Et bien, réfléchissez un peu... Haut et fort ne propose-t-il pas déjà une solution clé en main ?


Lire la suite

14:33 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (6) | Tags : personnaliser, module, colonne, liste | |  del.icio.us | | Digg! Digg |  Facebook

29.04.2009

Modifier la hauteur d'une colonne pour qu'elle "descende"

Depuis l'antiquité, nous sommes sensibles à l'harmonie des temples grecs, maisons carrées, peristyles et autres colonnades. Alors comment supporter que les colonnes de son blog ne fassent pas ce que l'on souhaite ?

C'est que, ce ne sont pas réellement des colonnes, comme on peut en avoir dans un tableau. Dans un modèle, vous avez la division "droite", la division "centre" et la division "gauche". Peu importe que vous ayez deux divisions seulement, ou dans un ordre personnalisé, dans le code vous retrouverez les trois dénominations que j'ai utilisé. Mais en anglais.

La hauteur d'une division est fonction de son contenu, c'est souvent la partie centrale la plus fournie, qui semble entrainer, les autres. Mais c'est une illusion. La division la plus "haute" détermine la hauteur du conteneur (container), qui lui comprend toutes les divisions. Chaque division a une hauteur propre. D'habitude, cela ne se voit pas. Si vous appliquez une couleur, ou un motif de fond, cela vous apparaîtra.

C'était la question de Thierry du blog Citrouille (Cette fois-ci les enfants qui se perdent ici, DOIVENT se retrouver là-bas avec leurs parents, ou tout adulte argenté pourvu qu'il soit bien intentionné). La colonne de gauche n'est pas assez haute à son goût, l'image de fond ne se poursuivant pas jusqu'en bas du conteneur.

 

Lire la suite

10:31 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (3) | Tags : modifier, colonne, module, hauteur | |  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