GBlog -Everything is possible

[Css] - Astuce css pour liste de liens.

Deux petites astuces CSS plutôt simple, mais qui peuvent changer la vie ;o)

Liens plus réactifs.

Je voie souvent lors de mes séances de surf des listes de liens, un peut comme sur l'index de chez Pascal à la difference près que si l'effet de style est localisé sur la balise LI, le liens hypertexte n'est localisé que sur le texte lui même alors qu'il serait plus agréable à la navigation que toute la zone soit réactive au clique alors qu'elle l'est déjà au survolement.

Pour cela, ce n'est pas trés dur, il suffit de declaré le liens en display block:

li a {
display: block;
}

et votre zone réactive ne sera plus limitée au texte du liens, mais à toute la zone de la liste. De plus, l'on peux maitenant placer l'effet :hover sur la balise a et ainsi le faire fonctioner dans les navigateurs du XX ieme siecle que plus personne n'utilise, vous etes tous sous Mozilla ? Non ?

Utilisation des marges negatives.

La proprieté margin accepte des valeurs negatives, et cela peux apporter un interet enorme. Par exemple dans le cas d'une liste de liens avec chaque liens encadrés d'une bordure fine d'un pixel, le style suivant presente quelques inconveniants,

li {
border: 1px solid #xxx;
}

car entre chaque élements, il y aura deux bordures, donc l'equivalent d'une bordure de 2 pixels, ce qui n'est pas trés estetique. En première idde, j'aurais juste appliqué la bordure sur les bords bas,gauche et droit et appliqué un style contenant une bordure haute sur le premier élement via :first-child. Mais cette technique est lourde et first-child n'est pas au top de la compatibilité.

Et grace à Jéremie, je connais maitenant une autre solution tellement simple qu'elle ne m'avait pas sautée au yeux,

li {
border: 1px solid #xxx;
margin-bottom: -1xp;
}

et voila votre belle bordure double mangée par la marge negative.

Jeudi 21 Août 2003 20:53:37 - greut Lien

Voilà Je pencherais pour des choses plus simples et éfficaces dans tous les cas.

li{
display:inline;
}
li a{
display:list-item;
width:bork bork;
border:1px gnurk color;
border-bottom:0;
}

"Vivement le style alternatif" :-)

Jeudi 21 Août 2003 21:57:23 - Guillaume

Oué, mais tu as toujours le probleme que le dernier ne possede pas de bottom :)