Les promenades du hacker solitaire

Aller au contenu | Aller au menu | Aller à la recherche

samedi 18 avril 2015

CSS et bordure indestructible

Dans une maquette de page que je viens de recoder pour qu'elle ait un comportement adaptatif (responsive quand on cause comme il faut), j'ai deux blocs, des données textuelles à gauche et une image à droite.

J'ai choisi de donner la priorité à l'image et c'est donc elle qui prend toute la place quand on réduit la largeur d'affichage, tandis que le bloc de texte passe au-dessous.

Depuis toujours, on a entre les deux blocs une bordure, qui est collée à droite du bloc de gauche ou à gauche du bloc de droite. Cette ligne sert à séparer les deux éléments et la page a l'air complètement à poil quand la ligne n'est pas là.

Or, je ne suis pas arrivé à trouver une solution pour supprimer la ligne au point de rupture (800 pixels). J'ai testé border-right: 0;, border-right: 1px solid #3C3C3C (donc la couleur du fond). Rien ne marche.

Si l'un de mes lecteurs a une idée géniale...

CSS et puces indomptables d'une liste stylée

Dans mon travail de révision des sites dont je m'occupe, je me suis cassé les dents sur le stylage d'une liste, que je voulais afficher d'une part sous la forme d'une colonne de gauche dans l'affichage sur un écran de PC de bureau et d'autre part sous la forme d'un menu déroulant sur les écrans de moindre taille.

J'ai fini par trouver un modèle pour le menu déroulant, fondé sur une structure à base de balises ul et li. C'est ici.

Voir ici pour savoir à quoi ressemble la barre de navigation à gauche.

La solution que j'ai finalement retenue pour la maquette de la page était un media query à 800 pixels et un display: none; alternativement sur l'un des menu et sur l'autre. Dans le code de la page, les données sont simplement dupliquées. C'est un peu dommage, mais je n'ai pas trouvé de solution élégante pour transformer le style de l'une en style de l'autre autrement.

Du coup, il fallait utiliser la même structure pour obtenir la colonne de navigation à gauche, pour éviter d'avoir tout à déboguer deux fois.

Deux difficultés essentiellement.

D'une part, supprimer le décalage de gauche. On a beau mettre un beau list-type: none;, le décalage est conservé. Il faut donc mettre une marge négative (margin-left: -40px;).

D'autre part, les puces imposées par défaut par la feuille de style de l'agent, à savoir le disque, le cercle vide et le carré plein. J'ai mis pas mal de temps, mais j'ai fini par comprendre que le list-type: none; doit se mettre dans le style des balises ul et non pas dans celui des balises li.

CSS et taille d'un conteneur

J'ai pas mal travaillé sur les sites dont je m'occupe pour permettre de les afficher sur n'importe quelle largeur d'écran.

Un des problèmes rencontrés a été celui de la taille du conteneur général de la page. Ma maquette comprenait une image de 9 x 9 pixels de couleur anthracite avec un point blanc en bas à droite, ce qui, avec les répétitions, donne un joli motif pointillé.

Là-dessus vient se placer une div qui sert de conteneur à la page.

Or, ce conteneur ne voulait pas aller jusqu'au bas de la page (dont la longueur pouvait aller de 500 à 15 000 pixels).

J'ai cherché sur l'internet et j'ai trouvé beaucoup de mauvaises solutions. Par exemple height: 100%; dans la balise html, ou encore dans la balise body. Cela ne marche pas. Je ne suis même pas sûr que ce soit logique d'avoir des données dimensionnelles dans ces balises.

La seule configuration correcte que j'ai trouvée est de supprimer ces éléments dans les balises html et body et de mettre dans le style du conteneur :

  • min-height: 100%;
  • display: inline-block;
  • position: relative;
  • top: 20px;
  • bottom: 0;
  • left: 0;
  • right: 0;

Je suppose qu'on dispose encore d'un degré de liberté pour les quatre dernières lignes...

mercredi 4 mars 2015

St. Pauli pinkelt zurück

Le problème des pissepalas se pose naturellement dans tous les lieux où la vie nocturne est intense. L'un de ces lieux est le quartier de St. Pauli à Hambourg. Les habitants en ont marre de trouver du verre cassé et des ivrognes échoués n'importe où le matin, le tout dans une odeur d'urine extrêmement tenace.

Ils ont donc entamé une campagne de relations publiques, avec notamment un traitement de façades au moyen d'une peinture extrêmement hydrophobe qui renverrait le jet d'urine avec la même force en direction l'émetteur.

Lien vers l'article du Spiegel, avec une petite vidéo.

Publicis Pixelpark

vendredi 30 janvier 2015

utf8_general_ci et utf8_unicode_ci

Récemment, j'ai converti en utf8 une base de données MySQL qui était codée en latin1, afin de gérer correctement toutes les lettres accentuées, notamment celles des pays d'Europe centrale.

Pour ce faire, j'ai procédé à une conversion en deux temps, comme l'indique la documentation, à savoir convertir les valeurs par défaut de la base en utf8 et en utf8_unicode_ci, puis pour chacune des tables, faire de même à la fois pour les valeurs par défaut et pour les données existantes.

Dans cette base, j'ai un tri qui se fait sur les classes (au sens taxinomique), donc Arachnida, Insecta, etc. Voir le résultat ici. Nous avons également une pseudo-classe Divers qui se trouve tout au bas de la page. Pour assurer qu'elle sera bien là, elle est écrite '~DIVERS~' puisque le caractère '~' (0x7E) vient après toutes les lettres non accentuées de la table Ascii de base.

Or, quelle n'a pas été ma stupéfaction de voir que la pseudo-classe Divers était remontée en tête de toutes les classes. En regardant d'un peu plus près les indications trouvées sur la conversion en utf8 des tables MySQL, j'ai observé que certains mentionnaient utf8_unicode_ci et d'autres utf8_general_ci.

J'ai essayé de remplacer utf8_unicode_ci par utf8_general_ci et cela a résolu mon problème. L'ordre alphabétique a vaincu !

Une recherche sur les différences entre ces codes de collation donne de vagues indications sur le fait que utf8_unicode_ci serait plus complet, notamment pour le classement des caractères ß/ss et œ/oe.

Mais je n'ai trouvé aucune indication sur ce traitement spécifique du caractère '~'.

Alors, si quelqu'un a une idée...

jeudi 22 janvier 2015

Petit coin du Monoprix

Au coin du Monoprix, sur la rue de Lorraine mais à deux pas de l'Avenue Jean-Jaurès, cette grille protège un angle formé formé par la construction du magasin, dont la destination ne trompera personne.

Rue de Lorraine (19e) - 19 janvier 2015

Discrète grille de la rue de Meaux

Cette grille discrète, installée sur le terre-plein de Notre-Dame des Buttes Chaumont, ne dévoile sa fonction que si on connaît celle-ci, pour l'avoir observée dans d'autres circonstances. D'ailleurs, l'église elle-même offre un recoin qui est protégé par une grille mobile, doublée en ces temps difficiles de barrières à moutons de la police.

Rue de Meaux (19e) - 19 janvier 2015

vendredi 9 janvier 2015

Je suis Charlie aussi

Je ne trouve pas que le slogan soit réussi, mais comme tout le monde le reprend...

vendredi 5 décembre 2014

Majuscules accentuées

La question des majuscules accentuées est de nature à susciter des discussions parfois houleuses entre les pour et les contre. Pour ma part, je suis radicalement pour étant donné que tous les obstacles techniques qui ont existé par le passé ont désormais disparu.

Cependant, cet exemple est particulier en ce sens que l'on s'est donné la peine de mettre un É ou mot BARRÉE mais qu'on a oublié de le donner à Montmédy.

On constate une fois encore que ces panneaux sont produits à la va-vite, sans prendre le temps de réfléchir un tant soit peu, alors qu'ils sont tout de même destinés à rester en place tout le temps des travaux.

Carignan (08), Place de l'Église, 4 décembre 2014

samedi 25 octobre 2014

Ligatures en signalétique

Les inscriptions sont souvent faites à la va comme je te pousse, tant et si bien que j'ai été agréablement surpris de constater, dans le hall d'accueil des Thermes Chevalley, à Aix-les-Bains, la présence de ligatures 'ti' et 'fi' dans les panneaux destinés à orienter les curistes vers les différents services qui peuvent les intéresser.

Aix-les-Bains, Thermes Chevalley, 14 octobre 2014

La possession est-elle transitive ?

La rédaction de la signalétique est un art difficile.

Le rédacteur de ce panonceau a poussé le sens de l'empathie assez loin pour avoir le souci de dire que la ruelle abritait bien ses artisans, à savoir ceux de la commune, et pas venus d'ailleurs, ou du moins pas des artisans indéfinis. Du coup, le second possessif prend une valeur de surdéfinition qui fait que l'on s'arrête devant l'inscription en n'étant pas sûr de tout avoir compris. Y aurait-il des boutiques qui n'appartiendraient pas à ces artisans ?

Chanaz (73310), rue de l'Auberge - 12 octobre 2014

Les C croisés de Chanel

Il faut bien signaler l'existence des lieux d'aisance, car ils ne peuvent pas sinon remplir leur noble mission.

Ici, l'artisan ferronnier a poussé le souci de l'intelligibilité jusqu'à inclure le C et le C inversé, de manière à ce que l'enseigne puisse se lire dans les deux sens, étant donné que le W est symétrique.

Chanaz (73310), rue principale - 12 octobre 2014

Slippery when wet

On glose souvent sur la traduction standard de cette expression qui est utilisée au Canada francophone (« Glissant si humide ») alors qu'il faudrait certainement dire chaussée glissante dans le cas d'une route, etc.

Voici un panneau observé à Chanaz sur la passerelle qui enjambe le canal de Savières, qui relie le lac du Bourget au Rhône.

On peut d'ailleurs se demander si c'est un dérapage mal contrôlé qui a causé le choc dont nous voyons les traces.

Chanaz (73310) - Passerelle - 12 octobre 2014

Plongeur interdit

J'avoue que j'en suis interdit moi-même.

Aix-les-Bains (73100), Pointe de l'Arve - 10 octobre 2014

Plaques de rues aixoises (2)

Après ce premier billet sur les plaques de rues aixoises, en voici une autre :

Cette fois, le texte s'étend sur trois lignes !

La plaque qui se situe au-dessus, manifestement plus ancienne, utilise le procédé des petites capitales. On se demande toutefois pourquoi une capitale à « souvenir ». On peut aussi se demander pourquoi le gentilé « Aixois » est en majuscules. Enfin, quelle était donc la date qui a été corrigée ? La municipalité était-elle donc si pauvre qu'elle ne puisse pas faire refaire une plaque propre lorsque l'erreur a été découverte ?

Aix-les-Bains (73100) - 11 octobre 2014

vendredi 24 octobre 2014

Ne faudrait-il pas accorder ?

Un panneau d'information, auquel on a voulu ensuite rajouter une restriction aux usages autorisés. Mais ne faudrait-il pas accorder au féminin pluriel ?

Ontex (73310) - Belvédère sur l'Abbaye d'Hautecombe - 3 octobre 2014

jeudi 23 octobre 2014

Plaques de rues aixoises

Traditionnellement, les plaques de rues sont fabriquées en tôle émaillée de couleur bleue, avec un liseré blanc et un petit arc de cercle laissant la place des vis aux quatre coins. Il existe des sociétés spécialisées, que l'on trouve aisément sur un moteur de recherche. La plaque ci-dessus est classique, même si elle est un peu trop classique aux goûts de certains.

Il existe également des versions faisant un large usage des petites capitales

La ville d'Aix-les-Bains, pour les plaques qui ont besoin d'être changées ou renouvelées, a adopté une maquette dans laquelle elle fait une place aux armes de la ville.

Dans cet exemple, deux choses méritent d'être relevées. Tout d'abord l'énorme place occupée par les armes, qui forcent la deuxième ligne à passer dans la deuxième partie de la plaque. Ensuite, un usage résolu des minuscules : d'abord pour « rue », alors que c'est théoriquement le début d'une ligne... ensuite pour « médecin », même problème.

Dans ce deuxième exemple, nous retrouvons la même maquette, qui mérite les mêmes observations. Nous notons également que le gentilé « Hellènes » n'a pas droit à sa capitale, pourtant conforme à l'usage. Je suppose que les royalistes parmi mes lecteurs souhaiteraient également que « roi » bénéficie du même traitement. Je préfère quant à moi relever l'absence de majuscule de début de phrase et je leur laisse argumenter en faveur de la capitale royale.

Enfin, mais vous me direz que je m'acharne mesquinement, l'usage est d'utiliser des chiffres romains pour désigner les papes, les empereurs, les rois et les princes.

Aix-les-Bains (73100) - Septembre et octobre 2014

Conflit de générations

Les rues de la ville d'Aix-les-Bains sont bien ordonnées et présentent assez peu de recoins propices aux épanchements vespéraux ou nocturnes, mais cette photo présente une situation assez cocasse. Nous observons le conflit entre la partie droite de l'image, où le propriétaire a cherché, au moyen de barrières, de jardinières et d'un panneau comminatoire, à éviter les inondations et les dépôts d'ordures.

De l'autre côté, où nous avons probablement une autre parcelle de terrain, la ville a construit deux de ces conteneurs souterrains que l'on voit se multiplier un peu partout.

Aix-les-Bains (73100) - Rue Daquin Joseph - 29 septembre 2014

Société alsacienne d'électricité

Au détour d'une promenade dans les rues piétonnes d'Aix-les-Bains, cette plaque de boîtier de raccordement électrique disparaît presque sous les épaisses couches successives de peinture. Mais le texte est éloquent. Une Société alsacienne d'électricité qui distribuait du courant électrique dans la ville d'eau, à une date non déterminée.

En cherchant un peu, on retrouve une société dénommée Elsässische Elektrizitätswerke, qui est par exemple mentionnée dans un travail de Richard Keller intitulé Production et consommation d'électricité en Alsace de 1876 à nos jours, qui fait partie d'un rapport d'Anny Bloch-Raymond et autres accessible sur le site du Ministère de la culture et de la communication.

Je pense qu'il s'agit d'une plaque remontant à la période de 1870 à 1918, même si le texte est en français. Il a existé une Société alsacienne et lorraine d'électricité après la Seconde Guerre mondiale, mais cela ne me semble pas correspondre.

Aix-les-bains (73100) - Rue de Genève - 29 septembre 2014

Gare d'Aix-les-Bains

Moins célèbre que la gare de Perpignan, la gare d'Aix-les-Bains mérite tout de même que l'on s'y attarde quelques secondes.

On observera donc sur cette photo que les éléments du nom de la ville ne sont pas liés par des traits d'union, contrairement à l'usage. On notera encore que l'addition « Le Revard », destinée à rappeler le maquis de cette région qui domine la ville et le lac, est quant à elle bien séparée par un trait d'union, que l'on aurait peut-être aimé plus long et encadré d'espaces.

Puisque nous en voilà arrivés au sujet des espaces, permettez-moi de m'étonner de voir l'espace immense qui est ménagé entre l'apostrophe et le nom.

Peut-être que le concepteur aurait eu moins de mal à mettre en page (si l'on ose dire) son inscription s'il avait omis la mention « gare ». On se doutait un peu que ce n'était pas la mairie...

D'ailleurs, quand on entre dans cet édifice, on observe sur les quais que l'inscription est cette fois bien tiretée « Aix-les-Bains-Le Revard ». J'ai oublié d'en prendre une photo...

- page 1 de 54