A:hover en gras et decalages

Salut,

je fais une Newsletter, le choix est de mettre les liens en gras en hover, mais cela crée au survol avec la souris des décalages sur les lignes de textes environtes.

En particulier quand c'est sur deux lignes : voir dans la colonne de gauche il y a un <li> qui passe a la ligne (ce qui nous donne un lien sur deux lignes de texte, c'est le quatrieme lien en partant du haut...).

Aussi dans la partie haute de la page, le bloc adresse a droite il y a :

contact : <a href="">mon lien</a>

Au survol, contact se decale en hauteur.

La page en question

Merci de votre aide!
Modifié par Hum (14 Jun 2006 - 16:33)

Salut,

T'aurais pas m... ton post ?

Salut

>Fausse manipulation .

Edité


Modifié par Hum (14 Jun 2006 - 16:34)

Salut,

Remarque qui n'a rien à voir : la partie CSS n'est pas très lisible. Il y a jusqu'à dix tabulations devant certaines déclarations et ça part dans tous les sens.
Si tu veux il existe certains outils en ligne pour optimiser les styles :
– http://cdburnerxp.se/cssparse/css_optimiser.php
– http://flumpcakes.co.uk/css/optimiser/

Pour ton problème, peut-être jouer sur letter-spacing ou la taille du texte pour limiter la casse. Sinon mettre juste un couleur plus foncée sans mise en gras ne pourrait pas faire l'affaire ?
Modifié par Alan (14 Jun 2006 - 17:07)

Salut,

Alan a écrit :

Remarque qui n'a rien à voir : la partie CSS n'est pas très lisible.

Oui c'est vrai, je suis un cochon.

Alan a écrit :

– http://cdburnerxp.se/cssparse/css_optimiser.php
– http://flumpcakes.co.uk/css/optimiser/

Oui ça m'interresse, je regarde merci !
Je viens d'essayer : c'est génial ! ! !

Alan a écrit :

jouer sur letter-spacing ou la taille du texte pour limiter la casse.

Là j'ai l'impression qu'on rentre dans la bidouille qui risque de pas etre efficace (dans le cas ou je trouve une parade qui fonctionne) sur les differents navigateurs. Non ?

Alan a écrit :

mettre juste un couleur plus foncée sans mise en gras

Oui, ça va terminer comme ça je le sent, dommage je voulais changer.
Modifié par Hum (14 Jun 2006 - 17:19)

Alan a écrit :
Salut,
Si tu veux il existe certains outils en ligne pour optimiser les styles :
– http://cdburnerxp.se/cssparse/css_optimiser.php
– http://flumpcakes.co.uk/css/optimiser/

Salut,

C'est efficace ? est ce qu'apres la compression on est toujours valide, et est ce sur comme systeme (à par pour la relecture bien sur ) ?

Hum a écrit :
Là j'ai l'impression qu'on rentre dans la bidouille qui risque de pas etre efficace (dans le cas ou je trouve une parade qui fonctionne) sur les differents navigateurs. Non ?

Ben forcément. Tu constates un comportement tout à fait standard et… connement logique. Une lettre en gras prend plus de place qu'une lettre en pas gras. Un tas de lettres en gras prend pas mal de place en plus que le même tas de lettre en pas gras. CQFD.

Donc il n'y a pas de bug.

Je vois une solution :
– tu dessines une police de caractères dont la déclinaison en gras (techniquement, une police à part) a des lettres de largeur identique à celles de la police de base… ça risque d'être très moche, mais tant pis ;
– tu t'arranges pour que cette police soit installée par défaut chez 90% des utilisateurs… dans l'idéal un peu plus ;
– tu utilises cette police.

Ça me semble super simple à faire. Allez, au boulot !

Nan franchement, sans déconner, tu crois pas que transformer un comportement logique en comportement pas logique mais qui t'arrange, ça risque fort d'impliquer une forte dose de bricolage ?

Ah la la, et voilà, j'ai encore été sarcastique.
Modifié par mpop (14 Jun 2006 - 21:26)

salut,

Le seul moyen d'obtenir que le décalage soit moins géneant, même s'il ne disparaitra pas, c'est de faire en sorte que la typo avant la mise en gras soit plus espacées que quand elle passera en gras. Je crois que la commande c'est "word-spacing" ou un truc comme ca. Mais bon ca sera jamais parfait pasque comme le disait mpop, une typo grasse est forcément plus large qu'un e typo pas grasse.

Mikachu a écrit :
Je crois que la commande c'est "word-spacing" ou un truc comme ca.

letter-spacing, pour être précis.

Merci de cette précision, j'arrivais plus à retrouver la propriété.

mais les deux existent (dès CSS1).
Il n'y a d'ailleurs pas de problème d'implémentation, même pour les IE5 win/mac

Ou tu peux aussi utiliser une police don les lettres ont la mêmes largeur incluant les espaces (je me souviens plus du terme précis) comme la police Courier new pour ton menu. Cela devrait éliminer complètement le problème.

mpop a écrit :

Ben forcément. Tu constates un comportement tout à fait standard et… connement logique. Une lettre en gras prend plus de place qu'une lettre en pas gras. Un tas de lettres en gras prend pas mal de place en plus que le même tas de lettre en pas gras. CQFD.
...

Tu m'as fait bien rire sur ce coup mpop, merci.


Aymeric, excellent.
Modifié par AymericJ (15 Jun 2006 - 09:10)

sigmao a écrit :
Ou tu peux aussi utiliser une police don les lettres ont la mêmes largeur incluant les espaces (je me souviens plus du terme précis)

Une police à chasse fixe, il me semble.
http://alis.isoc.org/glossaire/chassefixe.fr.htm
En anglais : monospace.

Merci de vos suggestions, effectivement c'est emmerdant de devoir bidouiller des trucs pareils meme si le passage en gras d'un lien au survol c'est joli et efficace je trouve ...si ça ne se décale pas.

D'ailleurs je vais essayer, car je ne suis pas sur qu'une chasse fixe suffise dans le cas d'une liste de liens avec certains sur deux lignes, car là, il y avais aussi un decalage vertical qui faisais bouger le reste de la liste...

a écrit :
C'est efficace ? est ce qu'apres la compression on est toujours valide

Je trouve ça super, avec mes 'ti reglages (c.a.d le minimum...) c'était tjrs valide, je doute que cela puisse rendre invalide.

a écrit :
En anglais : monospace.

Ok. Merci Lolipop !
Modifié par Hum (15 Jun 2006 - 23:27)