var Phenix = function () {
Troll du Web depuis 1996

CSS


Un header image en fullscreen

Je déteste cette mode : une grande image qui prend tout l’écran. Si vous avez de la chance, vous avez un titre et un menu. Basta.

Mais ce n’est pas le propos. Il se trouve qu’il y a des gens qui souhaite avoir cela, et comme ils payent pour...

Voici une technique assez simple. Il faut garder une chose à l’esprit quand on fait cela : tous les containers parent doivent avoir height : 100% ;.
Rien de folichons ici, mais comme j’oublie régulièrement comment faire...

  1. html, body, #page {
  2. height: 100%;
  3. }
  4.  
  5. .full-image {
  6. position: relative;
  7. width: 100%;
  8. height: 100%;
  9. background-image: url([...]);
  10. background-size: cover;
  11. background-position: center;
  12. }

Et le tour est joué !


Pourquoi le WYSIWYG est si compliqué ?

Une petite vidéo qui a été envoyée sur la liste de SPIP. Un bon résumé de pourquoi tout le monde peste contre les éditeurs WYSIWYG. Que ce soit les développeurs ou les éditeurs de contenu.

Du coup, je la garde ici car j’aurai envie de la revoir ou de la partagée.

La vidéo explique en détail le bordel que c’est à gérer, et surtout pourquoi cela ne fonctionnera sans doute jamais correctement :

Merci à Ybbet pour la découverte :)


Du text-overflow : ellipsis et un élément à width : 100%.

J’étais en train de bricoler une div avec une largeur à 100% et un texte-overflow ellipsis.

Cela ne fonctionne pas en l’état :

  1. .ma_div {
  2. display: block;
  3. overflow: hidden;
  4. white-space: nowrap;
  5. width: 100%;
  6. text-overflow: ellipsis;
  7. }

Pourquoi ? Je ne sais pas trop, mais avec quelques règles en plus on peut avoir le résultat que l’on attend, a savoir une div « fuilde » et un texte avec « ... » pour ce qui dépasse :

  1. .ma_div {
  2. display: table;
  3. overflow: hidden;
  4. white-space: nowrap;
  5. width: 100%;
  6. table-layout: fixed;
  7. text-overflow: ellipsis;
  8. }
Voir en ligne : text-overflow : ellipsis in table-cell without width

Ajouter l’icône des blocs AJAX dans l’espace publics d’un site #SPIP

Parce que c’est mieux !

Petite astuce que j’ai trouvée il y a peu.

Lorsque l’ont AJAX des blocs SPIP, le comportement par défaut est de passer le bloc en opacité 50%.
Ce n’est pas forcément le plus explicite pour les visiteurs, plus habitués à avoir un signe de « pseudo-progression ».

Ce n’est le comportement de la partie admin, qui affiche une icône « Loading » dans le coin supérieur droit.

On peut facilement reproduire ce comportement dans l’espace publique avec une petite ligne de css :

  1. .loading {
  2. background: url(../../prive/themes/spip/images/searching.gif) no-repeat top right;
  3. }

Ici je suppose que le fichier css se trouve dans un sous-dossier du dossier squelettes de SPIP. Si ce n’est pas le cas, il faut adapter le chemin.

Bien entendu on peut mettre ce que l’on veut sur la class loading, ici je n’ai fais que reproduire le comportement de SPIP.