[RÉGLÉ] englober un menu dans des flèches

[thebadgones77]

Bonjour,

je souhaiterais faire un petit design au niveau de mon menu principal. Je m'explique, je souhaiterais savoir s'il est possible de mettre à l'intérieur d'une flèche chaque nom de menu.
photo ci dessous de mon plan.





Donc sur la 2éme photo, (Menu1 dans dans la première flèche, menu2 dans la deuxième flèche et ainsi de suite).

Auriez vous une idée comment procéder? Faut il faire de la retouche photo?

Je précise que mon template est allrounder 3 .

Merci par avance.

[ced1870]

Re : englober un menu dans des flèches

Salut
il faut faire cela en CSS. Déjà créer les images des fleches (sans texte), et définir en CSS que tu veux tes flèches en background des éléments de menu.Tu peux t'aider de la console développeur de ton navigateur pour cela
CEd

[thebadgones77]

Re : englober un menu dans des flèches

Bonjour ced1870,

J'ai crée dans un premier temps l'image de la flèches comme tu me l'as suggérer



J'ai inspecté le code de mon site et inséré le chemin de l'image mais rien n'y apparait en fond, screen ci dessous.

[thebadgones77]

Re : englober un menu dans des flèches

J'ai reussi à supprimer les bordures et le fond blanc en insérant le chemin de la flèche, mais celle ci apparait en bas du menu et non sur l'intitulé de chaque menu.

[lefabdu51]

Re : englober un menu dans des flèches

ul.nav.menu li {background : 'monimage';}

a mettre en bas du fichier custom.css du template.

[thebadgones77]

Re : englober un menu dans des flèches

ul.nav.menu li {background : 'monimage';}

a mettre en bas du fichier custom.css du template.

Merci pour ta réponse, mais il ne se passe rien...

voici le contenu de mon custom.css

#topmenu_container {
  width: 100%;
  margin:0;
  height: auto;
  min-height:30px;
  background-image: url('../images/dropdown-smooth.png');
  background-color: #222;
  background-repeat: repeat-x;
  border-top: 3px double #fff;
  border-bottom: 3px double #fff;
  }

#topmenu {
    float: right;
    left: -50%;
    position: relative;
	
}
#topmenu ul.menu, #topmenu ul.menu ul {
    left: 50%;
    border:none;
}

.module_menu ul.menu li {
  margin : 0;
  padding : 0 0 0 20px;
  background : none;
  list-style:none;
  margin: 0;
  background-image:url('../images/mirage2.gif');
  background-repeat:no-repeat;
  background-position: 0 8px;
  }
  
 ul.nav.menu li {
   background-image : url('../images/fleche.gif');
   }

[ced1870]

Re : englober un menu dans des flèches

tu as une url pour voir ça ?

[thebadgones77]

Re : englober un menu dans des flèches

Non mon site est en local malheureusement, mais je peux fournir ce dont vous avez besoin (contenu de l'inspecteur de code etc..)

voici le contenu que donne l'inspecteur de code

#Leftcol



#module_outer_menu



#module_menu



#lvround_inner



#nav_menu



#item101

[ced1870]

Re : englober un menu dans des flèches

faudrait mettre ton site en ligne temporairement pour que je puisse t'aider

[thebadgones77]

Re : englober un menu dans des flèches

arf, ça risque de ne pas être possible, mon site est hébergé en local sur le pc du boulot et sur un réseau privé. Mais je peux essayer de l’héberger temporairement chez Free si c'est possible

[thebadgones77]

Re : englober un menu dans des flèches

Bonjour,

je reviens vers vous pour mon soucis, j'ai pu héberger mon site chez free.

voici le lien: florian.barbaud.free.fr

Merci pour votre aide.

[thebadgones77]

Re : englober un menu dans des flèches

Personne pour m'aider?

[ced1870]

Re : englober un menu dans des flèches

dans ton custom.css tu as

.module_menu ul.menu li {
margin : 0;
padding : 0 0 0 20px;
background : none;
list-style:none;
margin: 0;
background-image:url('../images/mirage2.gif');
background-repeat:no-repeat;
background-position: 0 8px;
}

il suffit de remplacer ton mirage2.gif par fleche.jpg
ça mettra ta fleche à la place. ET mettre ton image dans le meme dossier "images"

[thebadgones77]

Re : englober un menu dans des flèches

Bonjour ced1870,
j'ai effectué la modification de mon custom, l'image mirage2.gif disparait mais d'apparition de la flèche...

#topmenu_container {
  width: 100%;
  margin:0;
  height: auto;
  min-height:30px;
  background-image: url('../images/dropdown-smooth.png');
  background-color: #222;
  background-repeat: repeat-x;
  border-top: 3px double #fff;
  border-bottom: 3px double #fff;
  }

#topmenu {
    float: right;
    left: -50%;
    position: relative;
	
}
#topmenu ul.menu, #topmenu ul.menu ul {
    left: 50%;
    border:none;
}

.module_menu ul.menu li {
  margin : 0;
  padding : 0 0 0 20px;
  background : none;
  list-style:none;
  margin: 0;
  background-image:url('../images/fleche.gif');
  background-repeat:no-repeat;
  background-position: 0 8px;
  }

[ced1870]

Re : englober un menu dans des flèches

ton image s'appelle "fleche.gif" ?