18073 sujets

Questions générales et questions de débutants

[Resolu] Border-right solid => Peut-on "dimensionner la barre&

Bonjour à tous,

Voilà, je me pose la question suivante:
Je fais un menu horizontal de 6 liens.
J'utilise sur chaque lien un 


border-right: 1px solid #A6A5A5;


Le line-height de mon menu est de 20px;

Comme on pouvait s'y attendre, mon border right s'affiche de la hauteur du line-height soit 20px

Or je souhaiterai que mon border right ne fasse que 10px et qu'il soit centré en hauteur.

Possible à faire en CSS ou obligé de le faire par une image ?

Merci ! Smiley smile
Modifié par pp51 (02 Apr 2006 - 19:43)
Bonjour,

On ne connait jamais assez les possibilités des propriétés.
Ta question m'a "turlupiné" ( Smiley biggrin ), alors, j'ai essayé de consulter les spécifications

Peut-être en jouant sur le line-heigth ?

a écrit :

Quand la valeur de la propriété 'line-height' est inférieure à la taille de la police, la hauteur finale de la boîte en-ligne sera inférieure à la taille de la police et l'affichage des glyphes "débordera" de la boîte de ligne. Si une telle boîte en-ligne touche le bord de la boîte de ligne, l'affichage "débordera" aussi dans la boîte de ligne adjacente.

Bien que les marges, bordures et espacements des éléments non remplacés n'interviennent pas dans le calcul de la hauteur de la boîte en-ligne (et ainsi dans celui de la boîte de ligne), ceux-ci sont quand même rendus autour de la boîte de ligne. En conséquence, si la hauteur de la boîte de ligne est inférieure à celle comprise entre les bords externes des boîtes qui y sont contenues, les arrière-plans et les couleurs des espacements peuvent "déborder" dans les boîtes de ligne adjacentes. Cependant, certains agents utilisateurs peuvent utiliser la boîte de ligne pour "découper" les aires de bordure et d'espacement (et ne pas les rendre).


Mais, je ne suis sûre de rien ...
Smiley biggrin

Personnellement, je ferais cela avec une image ...
Hello Vero,

Merci pour ta réponse Smiley cligne

Oui j'ai bien pensé à reduire le line-height à 10px par exemple, mais dans ce cas, ce qui est tout à fait normal, mes backgrounds associé à chaque lien (ou bloc devrais-je dire) font aussi 10px de hauteur.

Ce que je voudrais serait un background de 20px de haut avec un border-right de 10 px centré verticalement

Bon une petite image alors hein Smiley cligne
C'est difficile de réfléchir sans le contexte de la page.

Si tu imbriques 2 balises : un bloc, avec un span à l'intérieur, en définissant le background sur le bloc et la bordure sur le span (à passer en display : block) ...
Hello,

Bon ça me semblait un peu compliqué Vero, j'ai donc choisi la facilité en utilisant une image Smiley cligne

Je sais, c'est petit, mais c'est tellement plus rapide
Smiley confused
Modifié par pp51 (02 Apr 2006 - 19:43)
L'essentiel est que ton problème soit réglé ... et les solutions simples sont souvent les meilleures. Ne dit-on pas : le mieux est l'ennemi du bien ?
Smiley biggrin
Sujet clos
Aller à