Menu css type Comment ca Marche
Fermé
alwihda
-
13 mars 2010 à 09:19
alwihda Messages postés 4 Date d'inscription samedi 13 mars 2010 Statut Membre Dernière intervention 13 mars 2010 - 13 mars 2010 à 21:00
alwihda Messages postés 4 Date d'inscription samedi 13 mars 2010 Statut Membre Dernière intervention 13 mars 2010 - 13 mars 2010 à 21:00
A voir également:
- Menu css type Comment ca Marche
- Menu déroulant excel - Guide
- Menu démarrer windows 11 - Guide
- Canon quick menu - Télécharger - Utilitaires
- Menu demarrer - Guide
- Menu contextuel windows 11 - Guide
10 réponses
avion-f16
Messages postés
19244
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
17 avril 2024
4 496
Modifié par avion-f16 le 13/03/2010 à 12:04
Modifié par avion-f16 le 13/03/2010 à 12:04
Comme c'est un dégradé vertical, une image de 1px de largeur suffit, il faudra le faire répéter horizontalement en CSS. Pour la hauteur, c'est tout simplement la hauteur de ton lien. Si tu n'as pas Photoshop, pas besoin de l'acheter juste pour ça : The GIMP suffit.
Le « web 2.0 » n'est qu'un buzzword qui ne veut rien dire de précis, tu n'es pas obligé de suivre le mouvement. Le Web 2.0 ne s'arrête pas au design : c'est aussi AJAX, les interfaces intuitives (glisser-déposer, ...), Atom, RSS, ...
Si ça peut d'aider : https://css.developpez.com/galerie/?page=menus-horizontaux#barre-navigation
Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.
Le « web 2.0 » n'est qu'un buzzword qui ne veut rien dire de précis, tu n'es pas obligé de suivre le mouvement. Le Web 2.0 ne s'arrête pas au design : c'est aussi AJAX, les interfaces intuitives (glisser-déposer, ...), Atom, RSS, ...
Si ça peut d'aider : https://css.developpez.com/galerie/?page=menus-horizontaux#barre-navigation
Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.
Py_rex
Messages postés
241
Date d'inscription
samedi 12 juillet 2008
Statut
Membre
Dernière intervention
22 juin 2015
52
13 mars 2010 à 12:03
13 mars 2010 à 12:03
Bonjour,
Un (long) tour par là https://www.alsacreations.com/tutoriels est vivement recommandé.
Un (long) tour par là https://www.alsacreations.com/tutoriels est vivement recommandé.
LelLex
Messages postés
1628
Date d'inscription
mercredi 18 février 2009
Statut
Membre
Dernière intervention
5 septembre 2012
112
13 mars 2010 à 12:31
13 mars 2010 à 12:31
Je vois pas le dégradé moi, c'est quoi ce délire. ;)
Même sur Google ça doit se trouver.
Même sur Google ça doit se trouver.
avion-f16
Messages postés
19244
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
17 avril 2024
4 496
13 mars 2010 à 13:25
13 mars 2010 à 13:25
On parle du menu gris en haut qui devient rouge quand la souris passe dessus.
LelLex
Messages postés
1628
Date d'inscription
mercredi 18 février 2009
Statut
Membre
Dernière intervention
5 septembre 2012
112
13 mars 2010 à 13:29
13 mars 2010 à 13:29
Je sais bien F16. C'était de l'auto-dérision. ;)
alwihda
Messages postés
4
Date d'inscription
samedi 13 mars 2010
Statut
Membre
Dernière intervention
13 mars 2010
13 mars 2010 à 19:49
13 mars 2010 à 19:49
Merci pour les reponses, j'ai consacré toute la journée pour arriver enfin a créer ce beau menu.
Alors maintenant il me reste les sous menu, c'est encore de la casse tete, je vous montrerais le code html et le code css si qqn pourra peut etre m'aider.
Ici je parle du menu CCM gris qui change de couleur au passage de la souris, mais sauf que cette fois-ci avec des sous menu de type : le journal du net.
Alors maintenant il me reste les sous menu, c'est encore de la casse tete, je vous montrerais le code html et le code css si qqn pourra peut etre m'aider.
Ici je parle du menu CCM gris qui change de couleur au passage de la souris, mais sauf que cette fois-ci avec des sous menu de type : le journal du net.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
avion-f16
Messages postés
19244
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
17 avril 2024
4 496
13 mars 2010 à 19:57
13 mars 2010 à 19:57
Ça se gère en Javascript.
Si tu t'emmêles déjà les pinceaux avec le (x)HTML/CSS ...
Enfin, c'est aussi possible sans JS mais le texte en-dessous disparait quand la souris sort.
Si tu t'emmêles déjà les pinceaux avec le (x)HTML/CSS ...
Enfin, c'est aussi possible sans JS mais le texte en-dessous disparait quand la souris sort.
alwihda
Messages postés
4
Date d'inscription
samedi 13 mars 2010
Statut
Membre
Dernière intervention
13 mars 2010
13 mars 2010 à 20:08
13 mars 2010 à 20:08
Ah oui, s'il s'agit de javascript, j'en parle plus, parce que c'est tres compliqué.
J'aimerais que se soit entierement en CSS, je part pas loin, le menu en question est tout en haut a droite du champ de recherche, sur ce site, la ou y a (langue, nos sites, RSS).
J'aimerais que se soit entierement en CSS, je part pas loin, le menu en question est tout en haut a droite du champ de recherche, sur ce site, la ou y a (langue, nos sites, RSS).
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
13 mars 2010 à 20:57
13 mars 2010 à 20:57
Si tu veux du CSS pur, il faut aller voir par là :
http://css.mammouthland.net/menu-horizontal-en-css.php#graphique
http://css.mammouthland.net/menu-horizontal-en-css.php#graphique
avion-f16
Messages postés
19244
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
17 avril 2024
4 496
13 mars 2010 à 20:13
13 mars 2010 à 20:13
Pourquoi parles-tu du site « Le Journal Du Net » d'abord ?
Ce que tu veux faire n'est rien d'autre qu'un menu déroulant.
Va sur Google pour faire tes recherches.
Ce que tu veux faire n'est rien d'autre qu'un menu déroulant.
Va sur Google pour faire tes recherches.
LelLex
Messages postés
1628
Date d'inscription
mercredi 18 février 2009
Statut
Membre
Dernière intervention
5 septembre 2012
112
13 mars 2010 à 20:42
13 mars 2010 à 20:42
La partie xHTML, tu l'a fais du type :
J'espère qu'il n'y a pas d'erreur, parce que bonjour la honte. ;)
<ul> <li>Projet 01 <ul> <li>Projet 01 - 01</li> <li>Projet 01 - 02</li> </ul> </li> <li>Projet 02 <ul> <li>Projet 02 - 01</li> <li>Projet 02 - 02</li> </ul> </li> </ul>
J'espère qu'il n'y a pas d'erreur, parce que bonjour la honte. ;)
avion-f16
Messages postés
19244
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
17 avril 2024
4 496
13 mars 2010 à 20:46
13 mars 2010 à 20:46
Il n'y a pas d'erreur :)
alwihda
Messages postés
4
Date d'inscription
samedi 13 mars 2010
Statut
Membre
Dernière intervention
13 mars 2010
13 mars 2010 à 20:52
13 mars 2010 à 20:52
Merci infiniment pour ta reponse en temps reel
Je veux integrer un sous menu a ce menu, les codes en bas.
Pour qu'il devient comme le menu tout en haut a droite du champs de recherche dans cette page de CCM.
La partie xHTML:
<div id="menu">
<ul>
<li><a href="*">Accueil</a></li>
<li><a href="*">Tourisme</a></li>
<li><a href="*">Emploi</a></li>
<li><a href="*">Formation</a></li>
</ul>
</div>
Voici la partie CSS:
#menu {
background-image: url(cell_background.gif);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
#menu li {
display: inline;
}
#menu li a {
font-weight: bold;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
margin: -1px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFF;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
#menu li a:hover, #top-menu li a:focus {
color: #FFF;
background-image: url(bg.gif);
background-repeat: repeat;
}
Je veux integrer un sous menu a ce menu, les codes en bas.
Pour qu'il devient comme le menu tout en haut a droite du champs de recherche dans cette page de CCM.
La partie xHTML:
<div id="menu">
<ul>
<li><a href="*">Accueil</a></li>
<li><a href="*">Tourisme</a></li>
<li><a href="*">Emploi</a></li>
<li><a href="*">Formation</a></li>
</ul>
</div>
Voici la partie CSS:
#menu {
background-image: url(cell_background.gif);
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
#menu li {
display: inline;
}
#menu li a {
font-weight: bold;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFF;
margin: -1px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFF;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
#menu li a:hover, #top-menu li a:focus {
color: #FFF;
background-image: url(bg.gif);
background-repeat: repeat;
}
alwihda
Messages postés
4
Date d'inscription
samedi 13 mars 2010
Statut
Membre
Dernière intervention
13 mars 2010
13 mars 2010 à 21:00
13 mars 2010 à 21:00
En fait il y a eu une erreur, je fermais la premiere liste </LI>
donc, je faisais ca:
<ul>
<li>Projet 01</li>
<ul>
<li>Projet 01 - 01</li>
<li>Projet 01 - 02</li>
</ul>
<li>Projet 02</li>
<ul>
<li>Projet 02 - 01</li>
<li>Projet 02 - 02</li>
</ul>
</ul>
au lieu de:
<ul>
<li>Projet 01
<ul>
<li>Projet 01 - 01</li>
<li>Projet 01 - 02</li>
</ul>
</li>
<li>Projet 02
<ul>
<li>Projet 02 - 01</li>
<li>Projet 02 - 02</li>
</ul>
</li>
</ul>
Merci encore pour cette rectification
Je vais le reconstruire, et si y a qqchose, je poserai.
donc, je faisais ca:
<ul>
<li>Projet 01</li>
<ul>
<li>Projet 01 - 01</li>
<li>Projet 01 - 02</li>
</ul>
<li>Projet 02</li>
<ul>
<li>Projet 02 - 01</li>
<li>Projet 02 - 02</li>
</ul>
</ul>
au lieu de:
<ul>
<li>Projet 01
<ul>
<li>Projet 01 - 01</li>
<li>Projet 01 - 02</li>
</ul>
</li>
<li>Projet 02
<ul>
<li>Projet 02 - 01</li>
<li>Projet 02 - 02</li>
</ul>
</li>
</ul>
Merci encore pour cette rectification
Je vais le reconstruire, et si y a qqchose, je poserai.
