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.

03.03.2009

Quand le burp mène au style

Il m'avait promis celle qui fait oublier toutes les autres, celle qui interroge sur le néant que peut être la vie jusque là... et il n'avait pas menti.

L'auteur du blog Comme une image, évoqué dans la note précédente a fort à propos commenté nombre des miennes. Et dans celle qui vous incitait à ne pas manquer de style, son commentaire invitait à découvrir une autre extension de Firefox : Firebug. J'ai testé, j'approuve.


Une extension qui va loin

Firebug vous permet de visualiser le code HTML d'une page en même temps que la feuille de styles qui lui est liée, ce qui est bien le moins. Selon la sélection que vous ferez dans la page ou ce que vous trierez dans les volets (parce que le tri se fait dans les volets, et pas dessus, allons), vous verrez défiler les paramètres précis du style concerné, et sa "généalogie" dans la feuille. Rappelons qu'il y a bien "Cascading Style Sheet", et donc nécessité de ne pas se perdre dans les caractères hérités ou transmis d'un style à l'autre.


Modifiez à la volée

Firebug vous permet de modifier ce que vous voyez, alors même que cela ne vous appartient pas. En agissant sur les fichiers stockés en mémoire cache, cette extension vous permet de modifier tant le code HTML que les styles utilisés. Évidemment, ces modifications sont sans effet sur les fichiers du site. Cela vous permet de visualiser, tester, avant de rentrer dans le code de vos fichiers. Vous ne pourrez pas ajouter un argument dans la feuille de styles, seulement modifier les valeurs de ceux qui existent déjà.


Ça fait un peu peur...

geemee2_lettrine.jpgVous voyez ci-contre une capture faite alors que je tentais de mettre en place un style de paragraphe avec lettrine dans mon labo (sur un autre conseil de CUI).

Il faut tout de même reconnaître que l'outil est puissant, et demande un certain temps de prise en main. Je ne l'ai moi-même pas eu pour l'instant, ce qui n'est pas forcément une référence, j'en conviens. C'est donc un outil que je ne recommande qu'à ceux qui sont prêts à sérieusement bricoler. D'autant que je n'ai pas encore trouvé de documentation en français à partir de la page qui lui est consacrée sur le site officiel de Firebug.

Bonne nouvelle pour les utilisateurs exclusifs de Microsoft Internet Explorer : une version compatible (avec Opera et Safari aussi), allégée, est disponible à cette adresse.

 

17.02.2009

Ne manquez pas de styles, affichez-les tous !

Je vous avais déjà incité à ne pas manquer de caractères, ce qui ne saurait vous arriver, aussi continué-je dans mes conseils superflus pour qu'il ne vous arrive pas de manquer de style.

L'essentiel de la mise en forme de votre blog Hautetfort est commandé par la feuille de styles, document de référence qui contient toutes les zones de chaque page méritant des attributs de style différents. Dans le code de la page HTML on indique « ceci est un titre de niveau 1 », et dans la feuille de styles on indique les paramètres applicables aux titres de niveau 1. Ce qui a pour énorme avantage de n'avoir qu'à intervenir sur la feuille de styles pour modifier l'apparence de toutes les pages d'un site.

Pour en savoir plus à propos des feuilles de styles, vous pouvez vous lancer dans l'exploration du site SelfHTML. Ce n'est peut-être pas le meilleur, même si je m'y réfère souvent.


Comment voir les styles ?


S'agissant de votre feuille de styles, une fois passé en « configuration avancée », il suffit d'aller visualiser le fichier du même nom. Mais pour les sites dont vous n'avez pas la clé ?

C'est le moment de vous présenter deux modules additionnels (add-on) de Firefox. Je n'ai rien contre les utilisateurs de Microsoft Internet Explorer, mais j'ai une nette préférence.


JS View

Ce module permet d'accéder à toutes les instrucions en javascript et à toutes les feuilles de styles appelées par la page courante. Il vous est donc loisible de visualiser le code et de vous en inspirer pour vos propres développements.

Attention, il ne suffit pas de copier la feuille de styles de ce blog pour que le votre ait la même apparence. J'ai une colonne de chaque côté de la zone centrale, peut-être pas vous. Et puis, il vous manquera des éléments comme des images qui sont stockées dans mes répertoires. Vous pourrez toujours bidouiller pour aller les récupérer, il n'y a pas de sécurisation particulière.

Plus d'information sur JSView sur le site des modules de Firefox.


CSS viewer

Ce module permet de voir quelle partie de la feuille de styles (quelle « classe ») est concernée par la zone que vous survolez avec la souris, et quels sont les paramètres.

L'imbrication des différentes classes rend parfois les choses un peu compliquées, et ce module vous aidera à vous y retrouver.

Plus d'informations sur CSS Viewer sur le site des modules de Firefox.


Pour un bricoleur comme moi, ces deux modules me sont vite devenus indispensables. Et si cela doit vous faire passer à Firefox, vous pourriez doublement tirer profit de cette note.

 

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.

13.01.2009

Ascenseur pour les chats faux

Sur le blog de Pierrot, j'ai trouvé une méthode d'affichage des photos, que l'on fait défiler avec un « ascenseur ». Vous montez ?

Techniquement c'est assez trivial, mais il fallait y penser, et le mettre en œuvre correctement. Pierrot l'a bien fait pour des photographies par ailleurs magnifiques, comme toutes celles que l'on peut voir chez lui. Bref, c'est dans cette note au titre difficilement plus explicite : Ascenseur à photos

Il s'agit de créer une division dans la page, pour y afficher des éléments que l'on sait être trop grands et ou trop nombreux pour s'afficher pleinement. Il va falloir gérer le défilement proprement pour montrer qu'on l'a fait exprès. Autant dire tout de suite que le mode d'interprétation des navigateurs est capital, et vous ne verrez pas forcément la même chose selon que vous utilisez Firefox ou Internet Explorer. Microsoft interprète plus de paramètres, ignorés par Mozilla.

Voici un « cadre » avec ascenseur :


^ Chat faux, bleu

^ Chat faux tôt

^ Chat : photo et maori

Voici le code, brut de décoffrage, mais sans malle de vis :

<div style="border: 2px solid #ffffff; overflow: scroll; width: 480px; height: 380px; background-color: #ffffff;" align="left"><span style="font-size:10pt"><img src="http://geemee.hautetfort.com/images/Chat_faux_bleu.jpg" style="width: 459px; height: 344px;" border="0" /><br /> ^ Chat faux, bleu<br /> <img src="http://geemee.hautetfort.com/images/Chat_faux_tot.jpg" style="width: 459px; height: 344px;" border="0" /><br /> ^ Chat faux tôt<br /> <img src="http://geemee.hautetfort.com/images/Chat_photo_et_maori.jpg" style="width: 459px; height: 344px;" border="0" /><br /> ^ Chat : photo et maori<br /></span></div>

Pour comprendre le code :

<div

On crée la division, dont la mise en forme en fera un cadre.

style="border: 2px solid #ffffff;

On fixe le style du cadre, la bordure aura 2 pixels d'épaisseur, en trait continu, et sera de couleur blanche.

overflow: scroll;

C'est le principal. Littéralement, si le flux déborde, on fera défiler.

width: 480px;
height: 380px;

Le cadre fera 480 pixels de large pour 380 pixels de haut.

background-color: #ffffff;"

L'arrière-plan sera blanc. C'est la fin du style du cadre

align="left">

On alignera à gauche.

<span

On crée une rupture dans la feuille de style courante.

style="font-size:10pt">

La taille des caractères sera de 10 points.

 

Puis c'est du classique, on insère une image dont on précise la taille, que l'on fait suivre de quelques mots de légende.

</span>

On ferme la rupture dans la feuille de style.

</div>

On ferme la division, et donc le « cadre ».

Si vous avez la curiosité de regarder le code source de la page du blog de Pierrot, vous constaterez qu'il y a bien plus de paramètres. Les barres de défilement sont colorées, notamment. Bizarrement, je n'ai pas réussi à intégrer le code in extenso dans une note. Est-ce un filtrage automatique, est-ce dû au fait que mon blog est gratuit ? Je suis preneur de toute explication.

Pour vous faciliter l'intégration, voici une courte feuille de route.

Un avertissement avant de commencer : Les critères de taille, valables pour le template de ce blog, ne sont pas forcément applicables au vôtre. Vous aurez peut-être à ajuster la taille du cadre et des photos.

1 – Préparer des images de taille « 459 x 344 » correspondant à un honnête 4/3.
2 – Téléchargez ces photos sur votre blog, via Tableau de bord / Fichier / Images
3 – Notez l'adresse de chacune des images téléchargées.
4 – Copiez le code ci-dessous et collez-le dans une note via la méthode code embed entre deux paragraphes pour garder la main avant et après le cadre.
<div style="border: 2px solid #ffffff; overflow: scroll; width: 480px; height: 380px; background-color: #ffffff;" align="left">
<span style="font-size:10pt">
<img src="<!--adresse de l'image 1 -->" style="width: 459px; height: 344px;" border="0" /><br />
^ Légende de l'image 1<br />
<img src="<!--adresse de l'image 2 -->" style="width: 459px; height: 344px;" border="0" /><br />
^ Légende de l'image 2<br />
<img src="<!--adresse de l'image 3 -->" style="width: 459px; height: 344px;" border="0" /><br />
^ Légende de l'image 3<br />
</span>
</div>

5 – Passez en éditeur HTML et remplacez <!--adresse de l'image 1 --> par l'adresse de l'image 1.
6 – Je vous conseille de rester dans l'éditeur HTML pour modifier ou supprimer les légendes. Dans l'éditeur Wysiwyg, dans la division, l'utilisation de la touche [Entrée] vous fera diviser la division.
7 – Pour insérer plus d'images, il suffira de procéder par copier/coller pour avoir assez de lignes complètes à modifier : <img src="<!--adresse de l'image 1 -->" style="width: 459px; height: 344px;" border="0" /><br /> ^ Légende de l'image 1<br />

Bonne chance, et n'hésitez pas à me dire ce que vous en avez fait.

P.S. : Aucun animal n'a été maltraité pour préparer cette note. C'est une photo libre de droit domiciliée ici.

01:00 Écrit par Gee Mee dans Personnaliser son blog | Lien permanent | Commentaires (10) | Tags : photo, ascenseur, défiler | |  del.icio.us | | Digg! Digg |  Facebook