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.

22.03.2009

Feuille de styles de ce blog

26/03 : Première mise à disposition

Ce qu'il reste à faire (notamment) :

  • Calage des éléments graphiques dans les colonnes : manque le liseré du bas.
  • Gestion des rendus Firefox et IE, pour l'instant équivalent, sans le liseré du bas.
  • Gestion de l'arrière-plan général pour l'en-tête et la partie centrale

Lire la suite

13.03.2009

Afficher une lettrine en début de note, grâce à la feuille de styles (révisée)

Mise à jour du 17 mars : L'affichage automatique de la lettrine par les CSS est neutralisé en attendant que l'interprétation du code par les navigateurs soit homogène. Autant dire que nous ne serons pas loin des calendes grecques. Pour la révision de cette note, j'ai triché.

J'ai retiré <div class="texte_note"> du modèle de la page, et sans rétablir ma feuille de style dans son état préalable, je suis intervenu dans le code Html de la note. J'ai encadré le premier paragraphe de <div class="texte_note"> et </div>.

 

*** Note d'origine ***

Je vous ai déjà donné une méthode en novembre dernier, en voici une autre, et vous jugerez de celle qui vous convient le mieux. Peut-être aucune.

Dans une note qui commence à sérieusement dater, à l'échelle de la péremption ultra-rapide des informations communiquées sur un blog, je vous disais comment afficher une lettrine avec un tableau. Ce n'était pas forcément la méthode la plus aisée, puisqu'il fallait rentrer dans le code HTML. Au titre des avantages, on peut tout de même retenir que l'on peut utiliser une image de fond pour « enluminer ». La méthode requérant votre intervention, il vous est loisible de ne presque jamais vous en servir, ou de multiplier les lettrines dans un même texte, fut-ce au dam des typographes patentés (qui en ont vu d'autres). Mais du passé...

Tabula rasa
Dans la méthode actuellement utilisée sur ce blog, le traitement est automatique, puisque que l'on se repose sur les propriétés CSS. C'est tout ou rien. On tâtonne pour trouver un résultat satisfaisant, mais après c'est très confortable.

Je vous donne le code avant quelques explications
Dans le modèle de la page « lien permanent » j'ai modifié les lignes suivantes :
<h3 id="p1"><span>{$post.title}</span></h3>
<div class="posttext">
<div class="posttext-decorator1">
<div class="posttext-decorator2">
{if $post.extended}<div class="introductory">{/if}
{$post.source|trimlonglines:60}
{if $post.extended}</div>{/if}
{if $post.extended}<a id="more"></a><br />{$post.extended}{/if}
<div style="clear:both;"></div>
</div>
</div>
</div>


pour ne changer que cela :
<h3 id="p1"><span>{$post.title}</span></h3>
<div class="texte_note">
<div class="posttext-decorator1">
<div class="posttext-decorator2">


Dans la feuille de styles, après l'élément .content ul li on trouve dorénavant les instructions suivantes :
/**************************************************/
.texte_note p {
padding: 5px 28px 5px 28px;
margin: 5px 0px 5px 0px;
font-size: 1em;
line-height: 1.25em;
}
.texte_note p + p {
margin: 0;
}
.texte_note p:first-letter { /*** Pour la 1ère lettre du 1er § ***/
font-size: 3.5em; /*** La taille est multipliée par 3,5 ***/
line-height: 1em;
font-weight: 400; /*** "graisse" normale, donc maigre ***/
float: left;
margin: 0;
}
.texte_note p:first-line { /*** Pour la 1ère ligne du 1er § ***/
font-weight: 800; /*** "graisse" accentuée ***/
}
.texte_note p + p:first-letter { /*** Pour la 1ère lettre des autres § ***/
font-size: 1em; /*** La taille revient à la normale ***/
line-height: 1.25em;
float: none;
margin: 0;
}
.texte_note p + p:first-line { /*** Pour la 1ère ligne des autres § ***/
font-weight: 400; /*** La graisse revient à la normale ***/
}

/*** à partir du code http://jontangerine.com/silo/typography/p/ ***/

/*****************************************************/


Comment ça marche ?


L'élément « texte_note » donne des indications pour p et p+p ; en fait pour le premier paragraphe, puis pour les suivants.
Le code utilise les « pseudo-formats » CSS first-letter et first-line pour appliquer des styles particuliers à la première lettre et à la première ligne du premier paragraphe (p), puis les corrige, rétablit la normale, en appliquant d'autres styles aux paragraphes suivants (p+p).

Mais la méthode a ses limites. En rétablissant la « graisse » de la première lettre, de la première ligne, des paragraphes suivants, le code retire le gras que vous avez éventuellement appliqué en début de paragraphe dans l'éditeur de note. Et pourtant me direz-vous, il y a bien ici des « sous-titres » avec un début de paragraphe en gras ? Oui mais, j'ai triché, il y a un retour à la ligne avant la première lettre. Et si je ne le fais pas...

Voilà ce que cela donne.

C'est pire encore avec Internet explorer qui semble ne pas accepter l'argument (p+p), et donc ne pas savoir distinguer le premier paragraphe des suivants.

Je m'en contente, considérant même que ce retour à la ligne forcé contribue à la bonne mise en forme du texte. Mais c'est une affaire de goût. Le code d'origine comportait une identation (un retrait positif en première ligne), mais cela rendait visible cette astuce du retour à la ligne pour récupérer le gras dès le premier caractère. Il y a peut être une solution plus élégante techniquement, et il ne faut pas hésiter à critiquer tant que l'on apporte une solution.

Sauf à vouloir faire afficher un autre lettrine (et sous IE seulement), il ne faut utiliser que des sauts de lignes (Maj+Entrée). C'est finalement trop pénible à l'usage de vérifier tous les sauts de lignes, aussi vais-je ce code dans la CSS mardi prochain avant de trouver une solution acceptable.

Et merci CUI ?

Merci à Comme Une Image d'avoir éclairé ma lanterne en me donnant l'adresse du site Jon TANgerine. Il est exclusivement anglophone, ce qui peut-être un avantage quand on maîtrise mal l'italien [;-)], et vous donne ici douze modes de mise en forme "typo" de paragraphe.

08:20 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (2) | Tags : personnaliser, blog, hautetfort, lettrine, css | |  del.icio.us | | Digg! Digg |  Facebook

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 ?

08.03.2009

Supplément week-end

Je ne supportais plus l'ancien design de mon blog, aussi ai-je cédé à mon impatience et installé les templates actuels, malgré toutes leurs imperfections qui me prendront encore beaucoup de temps.

Ce n'est peut-être pas très professionnel, mais je ne suis pas un professionnel de la profession.

En attendant que je reprenne le rythme habituel de parution de mes notes, vous pouvez toujours commenter celle-ci pour dire ce que vous pensez des modifications adoptées. N'ayez pas peur d'avoir la dent dure... Je pourrai toujours répondre que c'est prévu et que j'y travaille, en toute honnêteté.

18:09 Écrit par Gee Mee dans Configuration avancée, Personnaliser son blog | Lien permanent | Commentaires (6) | Tags : design, template, aspire, infocreek | |  del.icio.us | | Digg! Digg |  Facebook