Résultats de la recherche (Page 1) / Forum d'entraide: tuto-fr.com

#1 Re : Le site: tuto-fr.com » Menu qui descend. » 31-07-2006 16:02:05

J'ai un peu cherché avec les éléments que tu m'as donné (je pense que les deux éléments ne doivent pas se trouver dans le head, seulement le second et l'autre dans le body ou le div peut-être).
La solution ne marche pas chez moi, car la page de mon site est trop complexe à mon avis...
Mais en surfant de lien en lien, je suis tombé sur deux solutions qui n'utilisent que le CSS (donc mieux que le javascript) et qui marchent :
La première fait semblant d'avoir des frames disponible ici. C'est en anglais, mais fort compréhensible (car j'ai compris big_smile).
Le second permet de créer une sorte de calque, donc très intéressant et en français : www.ibilab.net.

Merci pour la réponse et j'espère que ces articles pourront servir à d'autres.

@+

#2 Re : Le site: tuto-fr.com » Menu qui descend. » 30-07-2006 22:05:09

Merci encore de cette réponse rapide.

Ca marche nickel avec Firefox et evidement, IE ne comprend rien (qui en douterait). Mais j'ai vu, très rapidement, qu'il était possible de régler ça par du javascript.

Sous Firefox, du coup le tableau "sort" de sa cellule, mais c'est très bien comme ça.

Pour les frames, je m'en suis aperçu un peu tardivement (mon site est actuellement fait avec des frames, c'est pour ça que j'essaye d'évoluer smile).

S'il y a besoin de mettre le code javacript dès que j'aurais trouvé (sauf si quelqu'un l'a déjà), dites-le moi.

@ bientôt.

#3 Le site: tuto-fr.com » Menu qui descend. » 30-07-2006 16:46:56

sly_31415
Réponses : 4

Bonjour,
Ce message fait un peu suite au sujet menu en images, mais j'ai préféré ouvrir un nouveau sujet.

Voilà, certaines de mes pages sont longues (très pour le CAPES) et je souhaiterais que le menu qui est sur le côté descende en même temps que le scrolling.
Je m'explique un peu mieux : le menu est dans un tableau à deux colonnes et le contenu dans la deuxième colonne. Est-il possible de faire descendre le menu dans la colonne sans utiliser le javascript ?

Sinon, j'avais entendu (enfin, plutôt lu...) qu'il existait des iframes avec le php.

Enfin, si je fais des includes comme le proposais ItIsHardToProgram, cela pourrait-il marcher ?

Merci de vos avis.

@ bientôt.

#4 Re : Le site: tuto-fr.com » Menu en images. » 27-07-2006 16:25:23

Youpi !
Avec ton aide précieuse (et un peu de trifouillage), j'ai réussi.
Voici le code CSS :

body {behavior: url(csshover.htc);}
div#menu img {display: block; cursor:pointer; margin-bottom:0px; _margin-bottom:-3px;}
div#menu {width: 95px;}
div#menu ul {padding: 0px; border:0px; margin:0px none; font-size: 1px; line-height:1px;}
div#menu li.sousmenu {height:30px; border-bottom:0px; padding: 0;}
div#menu ul li {position:relative; list-style: none; border-bottom:0px;}
div#menu ul ul { position: absolute; top: 0; left: 95px; display:none}
div#menu li a {text-decoration: none;}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;} 
div#menu ul.niveau1 li.sousmenu:hover ul.niveauperso {display:block; margin-top:-20px;}

C'était le premier ul qui posait problème et en utilisant font-size: 1px; line-height:1px; il n'y a plus de bandes entre les images.

pour faire la distinction entre un navigateur w3c (type mozilla) et IE dans un CSS, il faut rajouter un "_" devant l'attribut de ton choix.

En effet cela marche bien, et moi, je suis ^_^ ou big_smile.

Je viens de faire un essai en remplaçant :

div#menu img {display: block; cursor:pointer; margin-bottom:0px; _margin-bottom:-3px;}

par

div#menu img {display: block; cursor:pointer; font-size: 1px; line-height:1px;}

Et ça marche de la même façon, je pense que ça doit être un peu plus propre, mais je retiendrais le underscore.

Je pense avoir appris bien plus en 3 jours sur le CSS ici qu'en trois mois tout seul..., donc merci bien.

Ne vous inquiter pas, je reviendrais vous embêter de temps à autre (une histoire d'intégration du menu dans les différentes pages de Gest'Classe, un petit truc avec phpmychat et l'été n'est pas fini tongue).

Bon, je vais me plonger dans le code pour l'intégration du menu.
@+.

P.S. : pour un tutoriel sur le php, il est vrai que c'est assez difficile de faire quelque chose de bien et d'un peu original (il existe une documentation officielle que j'ai (ouvert une fois)). Peut-être que le tutoriel serait de faire un script utile (genre un chat roll) et de rajouter des fonctionnalités par petites touches pour voir les possibilités du php.

EDIT : Je ne parviens pas à changer le sujet pour mettre [Réglé] devant...

#5 Re : Le site: tuto-fr.com » Menu en images. » 26-07-2006 00:59:07

Merci pour proposer de nouvelles voies.
J'ai testé avec le "onclick", c'est vrai que je n'y avais pas pensé (hum, sans commentaires). Cependant, après un certain temps de test, je ne parviens pas à supprimer la bande blanche sous les menus donnant des sous-menus (si vous m'avez suivi). Du coup, le problème est autre !
Le " margin-bottom:-6px" est une bonne idée (-3 est suffisant) et il faudrait faire une distinction entre IE et Firefox (car ça devient très moche chez ce dernier).

Je pense que tu aimerai bien que les deux sous menus correspondants a "college" et "capes" s'affichent devant respectivement college et capes ?

Non, justement, je souhaiterais que, par exemple devant collège, le sous menu affiche cinquième en face (donc le deuxième item) et Leçons pour le menu CAPES (donc le premier item).

Pour ceux qui disent que je n'ai rien fait big_smile, voici la syntaxe exacte afin d'avoir la fenêtre dans la même page :

onclick="window.open('index.php?page=page&id_page=1', '_self');"

Et donc remplacer _self par _blank pour l'avoir dans une fenêtre différente.

Et j'ai placé des titles de partout (je crois)...

Bon, je continuerai à réfléchir au problème tout à l'heure, la nuit portant conseil...

@ bientôt.

#6 Re : Le site: tuto-fr.com » Menu en images. » 25-07-2006 17:42:07

Avant de mettre Régler, j'ai oublié un autre problème (je ne le refaireais plus, promis) :
Comment avoir des margin-top différents pour deux sous-menus dans le même menu ?
En utilisant peut-être un id pour le deuxième sous-menu ; j'ai essayé mais sans succès.

Bon, @ bientôt...

#7 Re : Le site: tuto-fr.com » Menu en images. » 25-07-2006 17:33:39

Merci pour ces remarques.

Le script php Gest'Classe permet, pour des fainéants comme moi tongue ou ceux qui ne comprennent pas ce langage (bon, d'accord, encore comme moi roll), de mettre en ligne les pages web sans rien connaitre au php, en utilisant un éditeur de texte directement. Ce script est fait par un professeur de mathématiques et pas d'informatique et donc, je comprends fort bien tes histoires de pages et les siennes.
Quand je m'y connaîtrais un peu mieux (si tenté que cela arrive un jour), j'essayerais de faire comme tu dis, je pense en effet que ce sera mieux (surtout qu'il va falloir intégrer le menu de partout, donc avoir une frame pour le menu - à méditer...).

Passons à la bonne nouvelle big_smile : j'ai réussi à supprimer les bandes blanches à force de mes pie... euh d'acharnement dirons-nous.
J'ignore encore les raisons de mes modifications, mais je mets ci-dessous le fichier .css modifié (je suis sûr qu'il y a beaucoup de choses inutiles) :

/*issu de http://www.tuto-fr.com/tutoriaux/tutorial-menu-deroulant-css.php*/
div#menu img {
 display: block;
}
div#menu a {
 border:0;
}
div#menu {
 width: 190px;
}
body {behavior: url(csshover.htc);}
div#menu ul {
 padding: 0;
 width: 190px;
 border:0px;
 margin:0px none;
 line-height: 1px;
}
div#menu li.sousmenu {
 background: white;
 height: 30px;
}
div#menu ul li {
 position:relative;
 list-style: none;
 border-bottom:0px none;
 font-size:0;
}
div#menu ul ul {
 position: absolute;
 top: 0;
 left: 190px;
 display:none;
 margin-top: -90px;
 font-size:0;
}
div#menu li a {
 text-decoration: none;
 font-size:0;
 border:0px;
 height: 30px;
}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}

La place du body est très importante apparemment.

J'ai lu "work around" dans ton précédent message et après recherche, je ne sais pas ce que c'est !?

Rien à voir avec la choucroute, mais mon écran est large avec une grosse résolution et j'aimerais un petit programme qui montre l'écran en 800x600, 1024x768, etc. sans avoir à le faire manuellement. Et puis, s'il pouvais donner le temps d'affichage des pages php, ce serait bien cool.

Bon, je sais, j'en demande beaucoup wink.
Merci encore.

#8 Re : Le site: tuto-fr.com » Menu en images. » 24-07-2006 23:11:03

Ah, cela me fait un peu plus plaisir tous ces messages critiques mais très constructifs big_smile.

Ma marge de manoeuvre n'est pas très grande car j'utilise un script php d'un collègue et ce n'est pas sûr qu'il accepte trop de changements (et je n'arrive pas à le joindre, il parait que c'est les vacances tongue). Le logo Gest'Classe restera obligatoirement, mais mon site à l'avis unanime d'une personne s'appelle Animathix.

En ce qui concerne les deux menus (un vertical et l'autre horizontal) un seul restera si la permission m'est accordée.

Pour la page d'introduction, j'en ai déjà une (qu'il faudra un peu reprendre, mais l'été n'est pas fini...) issue du site web en html que j'avais fait l'année dernière.

Pour les couleurs du menu, je précise à nouveau que je ne fais que m'amuser avec The Gimp et je pense faire effectivement quelque chose dans les tons bleus.

En ce qui concerne le font, j'ai mis : font-size=0; cela a effectivement bien réduit les bandes blanches sous Internet Explorer. Mais pour les supprimer complètement !?

En tant qu'élève (université) ca ne prend pas des belles images pour m'impressioner.

Va demander à des élèves de collège s'ils ont le même avis lol.

Ils ont pas changé ces profs de college, toujours les meme, des malins, des malins, je vous dis.

Qui a vendu la mêche, hein, qui, levez le doigt ! lol

Merci pour votre promptitude et vos avis.

#9 Re : Le site: tuto-fr.com » Menu en images. » 24-07-2006 18:43:02

Bonjour.
Le site est à destination principalement de mes élèves de collège (donc, en gros, faut des couleurs pour ces pauvres petits). Ensuite, je ne fais que des essais, donc ces images vont sans changer, mais le concept image me semble intéressant (pour moi tongue). De plus, je n'ai absolument pas créé ces images pour le web (trop lourdes). Dernier point, je suis chez Free qui est assez lent. Et pour ceux qui pensait que j'avais fini, j'ai mis des alt (euh, je crois).

Bon, maintenant que je me suis (un peu) défendu et défoulé big_smile, passons aux choses sérieuses !
Je n'ai toujours pas de réponses sur comment faire ; ce devrait être un joli défi roll...

Sinon, il me reste d'autres solutions comme le flash, du coup, le nom de l'auteur n'apparaîtra pas dans mes pages...

(au cas où : le premier paragraphe est à prendre avec humour (sait-on jamais, des fois que je me fasse bouter du forum...:lol:).

@+.

#10 Le site: tuto-fr.com » Menu en images. » 23-07-2006 19:56:43

sly_31415
Réponses : 23

Bonjour,
Tout d'abord bravo et merci pour cet excellent travail (me fait un peu peur le réseau WEP...).
J'ai voulu intégré le menu du site http://www.tuto-fr.com/tutoriaux/tutori … nt-css.php, mais en utilisant des images et non du texte.
Et j'ai un souci : sous les images, j'ai une barre transparente qui m'embête un peu ! J'ai essayé le menu d'Alsacréation avec le même problème. Et n'ayant que peu de connaissance dans ce langage, j'ai testé plusieurs choses sans succès.
Cependant, ici, avec Firefox, j'ai résolu le problème en rajoutant une ligne de code dans mon fichier css :

#menu img {display: block;}

En contre-partie, cela devient du n'importe quoi sous Internet Explorer. Je vous laisse contempler le carnage wink: http://sylvain.etienne1.free.fr/gestclasse_v7/.
Si une bonne âme, ayant pitié de moi roll pouvait me dire quelle(s) ligne(s) rajouter pour ne plus avoir de "trous" dans tous les navigateurs, cela m'arrangerait beaucoup.

Autre souci, j'ai ramené les premiers sous-menus pour les avoir en face de collège grâce à

margin-top: -90px;

.
J'aimerais faire de même avec les deuxièmes sous-menus correspondants à CAPES, donc avoir un margin-top de -30px et non -90...

Je vous remercie par avance.