3
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
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.
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie… Répondre à Dalida
4
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
oups…
en relisant ton post je remarque que tu n'as jamais fait miroiter quoi que ce soit concernant la validation, je brule les étapes !!! j'étais en train d'écrire ma remarque sur la confusion entre les liens de bas de page et des liens de validation et du coup c'est moi qui me suis confusionné… (?)
mea culpa, mea maxima culpa !
je demande donc au greffier de retirer du procès verbal ces lignes insensées :
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)
et je demande aux membres du jury de n'en tenir aucun compte au cours de leurs délibérations.
ça me vaudra un coup au café !
-;o)
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie… Répondre à Dalida
5
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
Bonjour Dalida,
La sanction est TERRIBLE! J'me marre ;-)))))
Voilà, j'ai deux petits soucis, le premier, justement avec la validation W3C, qui me repond "quatre erreurs" sur la page que je viens de mettre en ligne, et "une remarque".
Dans mon menu, je n'arrive pas à caler le "submenu" de Laboratoire. Voici le code du "sub"
<li><a href="/lab/trav/">Le développement</a></li>
<li class="submenu"><a href="lab/trav/">Le tirage</a></li>
<ul class="level3">
<li><a href="/lab/nb/">Le noir et blanc</a></li>
<li><a href="/lab/coul/">La couleur</a></li>
<li><a href="/lab/truc/">Les trucages</a></li>
Mon problème est en fait que je n'arive pas à trouver le style qui correspond. Bie fait pour moi, ce n'est qu'une copie d'un style, donc les appellations étant différentes... Ce qui me donne un lien qui ne passe pas entre "Tirages" / " Noir et Blanc ..." du groupe "Laboratoire"
Allez, deux cafés. Combien de sucre, à moins que ce ne soit des sucrettes!?
Internet ne vaut que s'il est partagé ...
Jacques Répondre à Jacobéo
7
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
salut,
je viens juste de rentrer.
je vais fumer et me penche sur le problème.
je suis sûr que tu as lu formulaire et base de données.
tu sais ce que c'est que démarrer en html/css et mamirock a besoin d'un coup de main, alors je compte sur toi pour participer à la discussion !
-;o)
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie… Répondre à Dalida
8
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
vouiiiiiiii Chefffffff.
Internet ne vaut que s'il est partagé ...
Jacques Répondre à Jacobéo
9
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
ça va pas de m'appeler comme ça ?
moi qui toujours eu du mal avec la hiérarchie…
en plus le chef c'est Jeff !
-;o)
bon, mon cigare est roulé, on s'y met ?
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie… Répondre à Dalida
11
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
Le temps de manger et on décolle
Internet ne vaut que s'il est partagé ...
Jacques Répondre à Jacobéo
13
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
moi j'y vais !
:oD
bonne lecture !
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie… Répondre à Dalida | | | | |
10
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
" à moins que ce ne soit des sucrettes"
mais tu veux me tuer ?
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie… Répondre à Dalida |
12
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
en indentant et en aérant le code je suis arrivé là :
<li><a href="lab">Le laboratoire</a>
<ul>
<li><a href="lab/01a_dev.html">Le développement</a></li>
<li><a href="lab/01a_dev.html">Le tirage</a></li>
<ul>
<li><a href="lab/01b_nb.html">Le noir et blanc</a></li>
<li><a href="lab/01c_coul.html">La couleur</a></li>
<li><a href="lab/01d_truc.html">Les trucages</a></li>
</ul>
</ul>
</li>
pour appliquer le style à la liste de niveau 3 tu as du essayer de sélectionner avec :
div#nav ul li ul li ul
or, cela n'est pas la même généalogie que dans ta structure html qui est :
div#nav ul li ul ul
tu me feras remarquer, et à juste titre, que j'aurais pu m'en apercevoir en utilisant l'outil Information/Display element information de la barre Web Developper (pour FireFox). j'aurais pu ainsi lire directement la généalogie de l'<ul>.
ou bien avec l'extension Source Chart (toujours pour FF) on aurait pu regarder l'imbrication des éléments.
dis-moi si tu réussi à appliquer ton style comme ça !
ps : m¤¤¤de, en me relisant je remarque que j'ai enlevé tous les identifiants. avec une sélection contextuelle ils sont inutiles donc je les ai viré de ma copie locale. tu peux les garder, ça ne doit rien changer.
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie… Répondre à Dalida
14
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
J'ai remis <ul class="level2 (et3)>, cela me supprime les sous-menus.
En fait, le problème est le décalage entre le "level2" et le "level3". Cela occasionne une rupture de lien et le level3 est ainsi hors de portée de la souris. J'ai vu par ailleurs que l'on pouvait régler le temps dans JavaScript, mais que cela est impossible dans le CSS. Le truc est (serait?) donc de "croiser légèrement les deux "level pour permettre le passage de la souris sans interruption. J'ai bien compris le truc, mais c'est cela que je n'arrive pas à réaliser.
Je regarde la généalogie des <ul/il>
Internet ne vaut que s'il est partagé ...
Jacques Répondre à Jacobéo |
15
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
Dalida,
Je pense que ce la est inutle (lignes 233 à 237) div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3
{
display:block;
}
, comme cela (lignes 226 à 229 div#nav li.submenu li.submenu:hover {
background-color: ;
border:inherit ;
}
J'ai essayé de jouer ave les lignes 238 div#nav ul.level2 et 242 div#nav ul.level3, mais sans résultat. je commence à ne plus y voir très clair. Pourtant le soleil brille très fort.
Internet ne vaut que s'il est partagé ...
Jacques Répondre à Jacobéo |
16
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
Superbe l'imbrication des éléments, quant à la généalogie des UL, plutôt sympa.
Internet ne vaut que s'il est partagé ...
Jacques Répondre à Jacobéo
17
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
as-tu réussi à corriger ta mise en page ?
je viens de regarder ton site (maintenant il y a un dégradé en fond, ça s'habille, ça s'habille.
pour ton menu il faudrait essayer d'en coder un sur trois niveaux en css pur, ça doit bien être faisable.
de toute façon il y a un problème sur la taille des "ul li ul" qui ne devrait pas être fixe mais s'adapter à la taille des "ul li ul li a". pour cela il faut que chaque élément englobe son descendant direct avec {float}.
mais bon, je parle dans le vide. je devais faire l'essai du menu trois niveaux depuis longtemps, je le ferai donc dès que j'en aurai le temps et te tiendrai au courant.
pour le nettoyage de code, tu peux prendre l'habitude de classer tes règles par ordre logique et/ou alphabétique. il faut le faire à chaque ajout pour que ce ne soit pas trop fastidieux. cela permet entre autre de mieux déceler les doubles déclarations.
je crois d'ailleurs que ta css contient une règle pour l'identifiant 'menu' alors qu'il n'est pas utilisé dans ton document html.
voili, voila…
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie… Répondre à Dalida |
18
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
Bonjour Dalida,
Là, cela commence à se compliquer pour moi. Lol, ;-) ça va venir, mais ..
Pour la correction de la mise en page, c'est ok, enfin je crois, cela devient une véritable forêt d'informations! On pourrait presque en faire un sujet pour les suggestions ..
Pour le nettoyage des codes, j'ai commencé à les classer par ordre alpha. Pour la règle "menu", je la conserve telle quelle, elle peut me servir ailleurs. Toutes ces "règles" seront à la fin, importées via un lien. Pour le moment, cela me permet de mieux comprendre le fonctionnement et surtout de pouvoir créer un style différent par page, ce que je commence à faire, avec une certaine précaution.
Encore merci de ton aide précieuse. Mais une mauvaise nouvelle, ensuite, je vais attaquer le PHP. Cela fera partie d'un autre sujet.
Internet ne vaut que s'il est partagé ...
Jacques Répondre à Jacobéo
19
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
lol aussi !
ce que je ne comprends pas c'est que la structure de ton menu ne fait toujours pas apparaitre 3 niveaux. il faudrait que le dernier <ul> soit un descendant direct du <li> et non pas un frère.
enfin, bref…
pour le php, je cois que tu vas adorer. tu connais php dans html mais connais-tu php dans une css ? et hop, je renvois un style différent selon une condition php (le jour de la semaine, l'âge du capitaine…) !
je me suis aussi demandé pourquoi dans ta balise <style> tu encadrais les règles de styles avec des commentaires html <!-- -->.
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie… Répondre à Dalida |
20
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
Ah, ...
Ce menu est ...ma bêtre noire, le point délicat et je n'arrive plus à rien, largué !! Je pense que le mieux serait que je le refasse complètement, avec des noms à moi, et non comme ici par une importation d'un autre programme.
Pour le PHP, non, je ne le connais pas en HTML, seulement la lecture, et je manque d'une vision entre les textes et la situation en réel. Mais je verrais plus tard.
Pour les commentaires, cela était sans doute un reste de la machine, je ne sais plus. C'est maintenant supprimé. Merci
Internet ne vaut que s'il est partagé ...
Jacques Répondre à Jacobéo
21
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
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…
[ Mathieu ]
savoir rester faignant, c'est progresser en informatique. enfin, j'essaie… Répondre à Dalida | |
22
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
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 ...
Internet ne vaut que s'il est partagé ...
Jacques Répondre à Jacobéo |
23
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
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>
Internet ne vaut que s'il est partagé ...
Jacques Répondre à Jacobéo | | | | |
6
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
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.
Internet ne vaut que s'il est partagé ...
Jacques Répondre à Jacobéo |
24
Ce message vous semble utile, votez !- Signaler ce message aux modérateurs
|
 Jacobéo, le samedi 28 avril 2007 à 11:19:53 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;
}
Internet ne vaut que s'il est partagé ...
Jacques Répondre à Jacobéo | | |