28220 sujets

CSS et mise en forme, CSS3

[résolu]Faire une bordure qui déborde

Bonjour à tous,

Je me réfère encore une fois à vous pour me trouver une solution à mon problème dont je ne parviens a résoudre.

Sur cette page ici (en construction..) je souhaiterais que la bordure grise de mes li qui devienent bleu au survol deviennent également plus large pour dépasser sur ma div centre de quelque pixels.

J'ai mis une marge négative pour cela et un overflow: visible mais je n'arrive pas au résultat voulu

voici comme c'est actuelement
http://img336.imageshack.us/img336/2373/menu0gm.png

et comme je souhaiterais
http://img336.imageshack.us/img336/8523/menubon0iy.png

Je penses que cela doit être possible, mais... Smiley cligne
Modifié par le menuisier (02 Jan 2006 - 20:05)
Tu peux tenter un truc du genre :

li
{
position: relative; left: -10px;
width: largeurMenu+20px;
border-left: 4px solid #couleur;
border-right: 4px solid #couleur;
}
Bonjour Olivier,


En fait je viens d'essayer de faire ce que tu me propose mais j'ai une largeur de 0.1em sur mon li a pour que le lien soit cliquable sur toute sa longeur ....

Je viens de rajouter une largeur supérieur à mon .menu li a:hover mais il n'est toujours pas visible à droite comme ci il restait caché derrière
Smiley confus

EDIT j'ai une autre idée, je reviens... Smiley biggrin
Modifié par le menuisier (14 Jul 2005 - 11:56)
Voilà, j'ai utilisé edit CSS pour modifier ton truc :

.menu li a{
position: relative;
left: -0.2em;
  display: block;
width: 12.5em;
  margin: 5px 0 5px 0;
  text-decoration: none;
  color: #000;
  text-indent: 16%;
  border-right: 0.4em solid gray;
  border-left: 0.4em solid gray;
  border-top: 0px;
  border-bottom: 0px;
  line-height: 100%;
  overflow: visible;
  }

Et ton width: 0.1em servait à rien, il était écrasé par le width: auto; en dessous (à supprimer dans mon exemple).
Oui, le positionement relatif te permet de décaler le lien sans décaler le conteneur, ça le sort du flux tout en gardant sa position dans le flux Smiley langue


Pour comprendre, fait toi une page, au milieu du contenu met un bloc de couleur disons de 50*50px et met le en position relative décalée de 150px à gauche et en haut et tu comprendra le principe ^^
Sujet clos
Aller à