Se connecter / S'enregistrer
Votre question

Menu : fond des liens

Tags :
  • Arrière plan
  • Programmation
Dernière réponse : dans Programmation
12 Octobre 2008 14:51:48

Bonjour à tous !

Je suis actuellement entrain de créer un site web et je me posais une question au niveau codage.

Comment faire un fond pour les items de menu (pour le :hover) qui soit comme ceci :



Et que quand ils ne soient pas recouverts, ils soient sans le fond noir.

J'ai pensé à un background mais le problème est que les textes ne sont pas de même longueur.

Merci d'avance pour votre aide :) 

Autres pages sur : menu fond liens

12 Octobre 2008 20:56:37

Heu... Merci mais je ne vois pas ce qui correspond à ma demande sur la page ^.^"
Contenus similaires
13 Octobre 2008 15:52:03

Merci mais pour la deuxième solution, comment faire pour que cela s'affiche juste quand la souris passe dessus ?
13 Octobre 2008 17:05:04

Dit moi ce que tu veux, je te le ferrais.
13 Octobre 2008 18:56:08

Oui, j'y ai pensé mais si je dois modifier les textes des menus, je serai obligé de changer l'image.

Merci :) 
13 Octobre 2008 20:03:51

Non, dans ce cas, je penserais que le mieux serait de passer par deux images.

Je t'explique la chose.

Une crée un icône de 150 pixel de largeur et 50 pixel de hauteur.
Tu définis une première image sur l'icône dans le cadre de 75 pixels sur la gauche.
Tu définis une deuxième image sur l'icône dans le cadre de 75 pixels sur la droite.

Quand, la souris n'est pas sur une icône, l'image reste celle de gauche. Quand la souris passe sur une icône, l'image se place à droite.

Exemple ici:
http://css.alsacreations.com/xmedia/exemples/menunew/me...

"La méthode des portes coulissantes

Il reste cependant un détail gênant: le délai d'affichage de l'image au moment du survol. En effet, l'image "lienHover.png" n'est pas chargée par le navigateur avant que le visiteur ne passe sa souris au-dessus du menu. Il doit donc aller la chercher sur le serveur, ce qui demande un peu de temps (même si l'image est très légère!).

Dans ce cas précis, ce n'est pas trop pénalisant, car tous les items du menu utilisent les mêmes images d'arrière-plan. Le délai ne se fera sentir qu'une seule fois. Mais rien n'empêche de réaliser des menus plus complexes, où les différents items du menu ont des images d'arrière-plan différentes. Le manque de réactivité du menu devient alors très ennuyeux!

Heureusement, il existe une astuce qui permet de supprimer complètement cette inertie: la méthode des "portes coulissantes".

Au lieu d'utiliser 2 images distinctes pour l'état normal et l'état survolé, on va les regrouper dans une seule et même image. Ici, par exemple, on crée une image de 300x50 px:"
13 Octobre 2008 20:14:15

Merci pour cette solution :) 

Mais si le texte est trop grand, il dépassera ?
13 Octobre 2008 21:24:18

Non, puisque tu ferras ça avec des images dans ce cas :) 

Puis, c'est du Css, le texte restera au milieu :) 
A toi de bien gérer l'image
14 Octobre 2008 18:53:59

Je comprend pas ^^

Si le texte est plus long, logiquement, ça débordera ?
14 Octobre 2008 23:43:02

Règle la taille du texte dans ce cas :) 
15 Octobre 2008 15:19:52

Ok ! Merci :) 

Finalement j'ai trouvé plus simple : pas de fond pour les liens :D 
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS