Menu

CSS - Menu déroulant [présentation d'un... ] [Résolu/Fermé]

Messages postés
305
Date d'inscription
samedi 10 mars 2007
Dernière intervention
28 août 2008
- - Dernière réponse :  lilouille - 10 déc. 2008 à 09:44
Bonjour,

Je continue tranquillement, y a pas l'feu au lac !
J'ai ajouté un menu déroulant à ma page. Si quelqu'un a envie de s'en servir, no problème, mais attention, je ne suis pas un pro et il reste encore quelques points obscurs à corriger. La feuille de style est directe, cela est nécessaire pour le W3C. A vous de voir. Un simle clin d'oeil, cela est possible même sans connaisance. Vraiment génial le CSS, même si je me répète. Encore la même adresse http://www.j-images-j-in.com ... sans prétentions.
Afficher la suite 

3 réponses

0
Merci
Met quelque choz dans ton titre pour dire que cela est une ressource car là, j'ai perdu mon temps :p ( et beaucoup de gens vont aussi faire cette remarque croyant que c'est une question...)
Jacobéo
Messages postés
305
Date d'inscription
samedi 10 mars 2007
Dernière intervention
28 août 2008
100 -
Ola, le titre le présente et si tu perds ton temps, merci, tu passes à autre chose !
Messages postés
6766
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
1306
0
Merci
salut,

bravo Jacobéo, ça commence à prendre forme !

il va falloir l'habiller un peu plus, même si l'hiver est fini !
et peut être proportionner un peu le tout. je trouve le texte un peu grand et les éléments du menu un peu trop serrés.

tes liens en bas de page font penser aux liens de validation habituels et porte à confusion.
et qu'en as-tu à faire d'être conforme à la section 508 ?
pourquoi ne mets-tu pas les liens vers les validateurs xhtml et css ?
quoique, je sais peut-être pourquoi… tu nous a fait miroiter un site valide xhtml/css mais du côté du W3C ils disent 16 erreurs pour XHTML et 2 pour css !
-;o)

ton numéro de siret (qui n'est pas un information anodine) est illisible car trop petit et invisible sur un navigateur texte ou même un mobile. il vaudrait mieux ne pas le dessiner dans le bitmap mais plutôt l'écrire par dessus en html, au passage tu y gagnera en accessibilité.

dans ta css tu peux faire du ménage (l'identifiant menu est la règle la plus définie mais n'existe pas dans le chteumeuleu…).
-:oD

par contre la simplicité de la conception et la légèreté de l'ensemble en font une bête de concours pour la vitesse d'affichage.

donc bravo et courage pour la suite !

maintenant je tiens aussi à reprendre les propos de H, ton titre n'est pas explicite du tout car tronqué. CSS - Menu déroulant [présentation d'un... ] et c'est plutôt CSS qu'il aurait fallu encadrer par des crochets.
Dalida
Messages postés
6766
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
1306 > Jacobéo
Messages postés
305
Date d'inscription
samedi 10 mars 2007
Dernière intervention
28 août 2008
-
si tu veux, pour le menu on fait les investigations à deux et on fait un piti article commun pour notre ccm adoré en explicant tout ça, tout ça, étape par étape…
Jacobéo
Messages postés
305
Date d'inscription
samedi 10 mars 2007
Dernière intervention
28 août 2008
100 > Jacobéo
Messages postés
305
Date d'inscription
samedi 10 mars 2007
Dernière intervention
28 août 2008
-
J'ai enfin pu rouver une solution pour cette barre de menu. Lien avec couleur, survol, visité choisis. Reste à voir l'alignement pour passer de sub2 à sub3. Cela sent la fin ...
Jacobéo
Messages postés
305
Date d'inscription
samedi 10 mars 2007
Dernière intervention
28 août 2008
100 > Jacobéo
Messages postés
305
Date d'inscription
samedi 10 mars 2007
Dernière intervention
28 août 2008
-
Voilà le code du menu, je l'avais oublié dans le précédent message.

div#nav {
margin: -1px 0 0 7em;
background: rgb(255,255,255);
position:absolute;
left: 127px;
margin:auto;
width: 486px;
}
div#nav ul {

margin: 0;
padding: 0;
background: white;
border: 1px solid rgb(204,204,204);
border-width: 0 1px;
font-family:Arial, Helvetica, sans-serif;
font-size:0.95em;
font-weight:bold;
color: rgb(255,255,255);
width: auto;

}
div#nav li {
position: relative;
list-style: none;
margin: 0;
float: left;
width: auto;
line-height: 1em;
font-family:Arial, Helvetica, sans-serif;
font-size:0.95em;
color: rgb(235,235,235);
}
div#nav li hover{
position: relative;
list-style: none;
margin: 0;
float: left;
width: auto;
line-height: 1em;
font-family:Arial, Helvetica, sans-serif;
font-size:0.95em;
color: rgb(100,100,100);
}
div#nav li:hover {
background-color:rgb(102,102,102);
}
div#nav li.submenu {
background: url(../../dropmenu.gif) 95% 50% no-repeat;
}
div#nav li.submenu:hover {
background-color:rgb(000,000,000) ;
}
div#nav li a {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 6.5em;
}
div#nav ul a {
width: auto;
}
div#nav ul ul {
position: absolute;
width: 7em;
display: none;
}
div#nav li.submenu li.submenu {
background: url(../../submenu.gif) 95% 50% no-repeat;
}
div#nav li.submenu li.submenu:hover {
border:inherit ;
}
div#nav li.submenu li.submenu:hover {
background-color:rgb(150,150,150);
}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3
{
display:block;
}
div#nav ul.level2 {
top: 1.5em;
left: -1px;
}
div#nav ul.level3 {
top: auto;
left: 7.5em;
}
a:link {
color: rgb(50,51,102);
text-decoration: none;
}
a:visited {
text-decoration: none;
color: rgb(255,153,102);
}
a:hover {
text-decoration: none;
color: rgb(255,255,255);
}
a:active {
text-decoration: none;
}
</style>
Jacobéo
Messages postés
305
Date d'inscription
samedi 10 mars 2007
Dernière intervention
28 août 2008
100 > Dalida
Messages postés
6766
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
-
Je modifie la partie basse comme tu le dis Dalida, mais je voudrais bien pouvoir maîtriser la couleur des liens (blancs et non par défaut), et éventuellement un effet de survol et de liens lus. La propriété de la balise "color" de " #liens_pdp "ne semble pas vouloir s'activer. Sans doute est-elle gênée par une autre balise du même groupe.

Pour l'habillage, un rien m'habille alors... Sérieux, je vois en premier les fonctions et ensuite j'habille chez La Croix Dior de Chanel.
Jacobéo
Messages postés
305
Date d'inscription
samedi 10 mars 2007
Dernière intervention
28 août 2008
100 > Dalida
Messages postés
6766
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
-
Bonjour à tous,

Fin de la recheche "menu déroulant"

Le menu est terminé (pour moi...). Je vous en propose ici le résultat. Sans doute peut-il encore être affiné notamment pour les couleurs de survol, des liens visités.

Merci donc pour l'aide reçue.
Le résultat est visible sur le lien de mon site (voir les messages précédents)

div#nav {
position:absolute;
left: 125px;
margin:auto;
top: 339px;
width: 486px;
}
div#nav ul {
border-left: 2px solid rgb(000,000,000);
color: rgb(255,255,255);
font-family:Arial, Helvetica, sans-serif;
font-size:0.95em;
font-weight:bold;
margin: 1px;
padding: 0;
width: auto;
}
div#nav li {
color: rgb(235,235,235);
float: left;
font-family:Arial, Helvetica, sans-serif;
font-size:0.95em;
font-style:normal;
line-height: 1em;
list-style: none;
margin: 0;
position: relative;
width: auto;
}
div#nav li hover{
color: rgb(100,100,100);
float: left;
font-family:Arial, Helvetica, sans-serif;
font-size:0.95em;
line-height: 1em;
list-style: none;
margin: 0;
position: relative;
width: auto;
}
div#nav li.submenu {
background: url(../../dropmenu.gif) 95% 50% no-repeat;
}
div#nav li.submenu:hover {
background-color: rgb(000,000,000);
}
div#nav li a {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 6.5em;
}
div#nav ul a {
width: auto;
}
div#nav ul ul {
position: absolute;
width: 7em;
display: none;
}
div#nav li.submenu li.submenu {
background: url(../../submenu.gif) 95% 50% no-repeat;
}
div#nav li.submenu li.submenu:hover {
border:inherit ;
}
div#nav li.submenu li.submenu:hover {
}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3
{
display:block;
}
div#nav ul.level2 {
left: -1px;
top: 1.5em;
width: auto;
}
div#nav ul.level3 {
left: 5.1em;
top: 0.5em;
width: 300px;
}
a:link {
color: rgb(50,51,102);
text-decoration: none;
}
a:visited {
color: rgb(255,153,102);
text-decoration: none;
}
a:hover {
color: rgb(255,000,000);
text-decoration: none;
}
a:active {
text-decoration: none;
}
0
Merci
Bonjour,

Je suis en train de me prendre la tête avec web creator pro 4 pour seulement créer des menus déroulants dans mes sections ??? Impossible à comprendre avec le manuel d'utilisateur. Quelqu'un peut il m'aider svp ? Merci par avance.
Lilouille.