Pages :: 1
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 : http://sylvain.etienne1.free.fr/gestclasse_v7/.
Si une bonne âme, ayant pitié de moi 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.
Hors Ligne
Ouashhh...!!!!! commence par changer les images!!!!!!!
Hors Ligne
c'est vrai que moi non plus j'accroche pas trop
Et choisir un menu comme ca ca a l'avantage de l'accessibilité mais la avec les image, tu a interet de mettre des alt
++
Les cartes wifi recommandée et testées
Billyboylindien parle d'informatique (un peu ).
Proposez vous aussi vos tutos sur tout les sujets (web, prog, bricolage ...)
Hors Ligne
uep les images ne sont pas top top :s et trop lourd à mon goût
Hors Ligne
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 ). 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é , passons aux choses sérieuses !
Je n'ai toujours pas de réponses sur comment faire ; ce devrait être un joli défi ...
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:).
@+.
Dernière modification par sly_31415 (24-07-2006 18:43:41)
Hors Ligne
ce devrait être un joli défi
...
Ils ont pas changé ces profs de college, toujours les meme, des malins, des malins, je vous dis .
Je vais qd meme jeter un oeil
Des malins ...
Les cartes wifi recommandée et testées
Billyboylindien parle d'informatique (un peu ).
Proposez vous aussi vos tutos sur tout les sujets (web, prog, bricolage ...)
Hors Ligne
Sinon, il me reste d'autres solutions comme le flash, du coup, le nom de l'auteur n'apparaîtra pas dans mes pages...
C'est sur que pour les impressionés c'est giga... mais il faut tout de même garder une ergonomie, le site que tu as présenté ressemble un peu au site de manga/jeu d'ordinateur que l'on retrouve sur le net..... (je parle présentement)
bon le flash c'Est encore plus dure alors bonne chance =/... une animation c'est facile, un site c'est plus trucqué rendu a mettre en ligne......
bon pour ton menu, une petite suggestion, diminue le FONT et surtout rapetisse tes images, colle ton menu à l'idée de billyboy et tuto-fr, puis arrange les distance avec tes sous-menus... ca devrait déjà être moins pire =/
En tant qu'élève (université) ca ne prend pas des belles images pour m'impressioner =/ mais par contre un site très bien géré, efficace, avec contenue interessant, c'est toujours mieux
Ils ont pas changé ces profs de college, toujours les meme, des malins, des malins, je vous dis .
Arf ça c'est vrai...
Hors Ligne
Bon... a bien regarder je vois ce que tu veux faire......
commence par changer de fond d'écran, c'est pas super rouge sur blanc, avec du noir un peu partout... change surtout ta banner d'introduction.. c'est affreux, met la p-e dans ta fenêtre de menu sur le dessus si tu la veux omniprésente, mais on devrait au moins voir une introduction lorsqu'on ouvre ton site... bon pour ce qui est des menus... habituellement on garde un modèle de menu STANDARD lorsqu'on ouvre ton site, les menus devraient être pareil (.... pas besoins d'autant de menu, habituellement simplement un suffit.....) p-e penser à juste mettre le login dans la fenêtre du haut...
Bon c'est mes suggestions vite fait.... moi je mettrais mon menu en couleur bleu, ou dérivé de bleu, mais pas rouge et noir, ca l'irait mieux avec ton site.....
+ tu devrais tout le temps garder le même template pour tes liens.... donc le menu devrait s'afficher partout ou presque... puis lorsque tu veux qu'il ne s'affiche pas, un pop-up s'avère utile....
Mais bon pour en revenir aux choses les plus importante, change la disposition de banière, change de menu, et ca serait très sympa!
Hors Ligne
utilise juste ta dernière banner, et utilise le même type d'écriture (word art ou kekechose dans le genre j'imagine) pour ton menu, si tu tiens absolument a avoir des images... ca pourrait être mieux...
Hors Ligne
Ah, cela me fait un peu plus plaisir tous ces messages critiques mais très constructifs .
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 ). 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 .
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 !
Merci pour votre promptitude et vos avis.
Hors Ligne
Ouf j'ai lu la source de ton site et c'est très lourd un tableau comme ca..... j'aurais préféré voir 3 page différente, une pour le menu de gauche, une pour le menu du haut, puis la page du millieu avec un tableau, une page pour toute les joindre
tu crois que tu pourrais essayer, peut-être que ton problème de bordure est justement grâce à ce magnifique tableau... mon je lance une tomate dans les airs bien sur =/
Hors Ligne
Premièrement enlève le paramêtre Border
Ensuite diminue un peu la grosseur de tes images et dans ton code ton Width et height.... voir si ca fait une différence....
et hop une autre tomate de lancé.....
Hors Ligne
bon j'ai tout essayé je vois vraiment rien, semblerait que tu as un problème qui est relié au type de menu.... peut-être qu'il y a un work around, mais je suis pas familier.....
bonne chance
Hors Ligne
Merci pour ces remarques.
Le script php Gest'Classe permet, pour des fainéants comme moi ou ceux qui ne comprennent pas ce langage (bon, d'accord, encore comme moi
), 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 : 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 .
Merci encore.
Hors Ligne
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...
Hors Ligne
redimensionner les pages web n'est pas si compliqué, il y a un paquet de FAQ sur le web, mais ce n'est pas conseillé.... à toi de voir....
Bon c'est vrai qu'il y a un paquet d'affaire innutile dans le css, mais heureux de savoir que ca l'a fonctionné =/ moi je me casse la tête présentement avec ma base de donnée.....
Pour les margins il faut probablement créer deux menu avec deux css... je peux pas vraiment t'aider je suis pas familié =/, sinon p-e que si tu enlèves la spécification dans le body, et tu la places pour chaque sous-menu, ca pourrait faire la job..... a part ça je vois pas très rapidement.....
Work around c'est anglais, en gros c'est une manière d'éviter des problèmes, en passant par des issues que tu ne serais pas sensé =/ un peu comme modifier la taille de la police que j'avais suggérer, c'est pas idéal mais ca pouvait fonctionner, pratiquement....
Bon courage pour le php, c'est pas si compliqué.....
Puis ca serait PAS MAL MIEUX de laisser tomber les maudits tableaux...... je déteste les tableaux =/ c'Est sensé être plus clair, mais ca mélange tlt, entk je parle pour moi....
Désolé de pas pouvoir t'en dire plus =/
Hors Ligne
salut.
J'ai suivi d'un peu loin ton problème, et je ne suis pas sur d'avoir compris celui ci (du moins le dernier ).
Je pense que tu aimerai bien que les deux sous menus correspondants a "college" et "capes" s'affichent devant respectivement college et capes ?
Si c'est le cas, j'ai essayé et voici ce que j'obtiens !!
Ce qui posait problème en ce qui concernait les bandes blanches s'était les liens. Mais puisque toi tu préfère les images, pourquoi ne pas mettre les liens directement dans les images. Ensuite, pour info tes alt ne marcheront pas sur firefox, utilise plutot les "title" .
Bref voici la partie de code correspondant a ton menu :
<div id="menu">
<ul class="niveau1">
<li class="sousmenu"><IMG SRC="images_p/menu/flamme_menu_010.jpg" border="0" WIDTH="98" HEIGHT="30" alt="Cours de colège" vspace="-2">
<ul class="niveau2">
<li><IMG SRC="images_p/menu/flamme_menu_020.jpg" border="0" WIDTH="98" HEIGHT="30" alt="Cours de sixième" hspace="0" vspace="-2" onclick="window.open('index.php?page=page&id_page=1');"></li>
<li><IMG SRC="images_p/menu/flamme_menu_021.jpg" border="0" WIDTH="98" HEIGHT="30" alt="Cours de cinquième" hspace="0" vspace="-2" onclick="window.open('index.php?page=page&id_page=2');"></A></li>
<li><IMG SRC="images_p/menu/flamme_menu_022.jpg" border="0" WIDTH="98" HEIGHT="30" alt="Cours de quatrième" hspace="0" vspace="-2" onclick="window.open('index.php?page=page&id_page=3');"></A></li>
<li><IMG SRC="images_p/menu/flamme_menu_023.jpg" border="0" WIDTH="98" HEIGHT="30" alt="IDD" hspace="0" vspace="-2"></A></li>
</ul>
</li>
<li><IMG SRC="images_p/menu/flamme_menu_011.jpg" border="0" WIDTH="98" HEIGHT="30" alt="Exercices interactifs" hspace="0" vspace="-2" onclick="window.open('index.php?page=page&id_page=4');"></li>
<li class="sousmenu"><IMG SRC="images_p/menu/flamme_menu_012.jpg" border="0" WIDTH="98" HEIGHT="30" alt="CAPES">
<ul class="niveau2" id="essai">
<li><IMG SRC="images_p/menu/flamme_menu_030.jpg" border="0" WIDTH="98" HEIGHT="30" alt="Leçons de CAPES" onclick="window.open('index.php?page=page&id_page=8');"></li>
<li><IMG SRC="images_p/menu/flamme_menu_031.jpg" border="0" WIDTH="98" HEIGHT="30" alt="programme TI" onclick="window.open('index.php?page=page&id_page=9');"></li>
</ul>
</li>
<li><IMG SRC="images_p/menu/flamme_menu_013.jpg" border="0" WIDTH="98" HEIGHT="30" alt="Forum" onclick="window.open('http://sylvain.etienne1.free.fr/phpBB/');" target="_blank"></li>
<li><IMG SRC="images_p/menu/flamme_menu_014.jpg" border="0" WIDTH="98" HEIGHT="30" alt="Livre d'or" onclick="window.open('http://sylvain.etienne1.free.fr/alex_guestbook3/');" target="_blank"></li>
<li><IMG SRC="images_p/menu/flamme_menu_015.jpg" border="0" WIDTH="98" HEIGHT="30" alt="Origami" onclick="window.open('index.php?page=page&id_page=10');"></li>
</ul>
</div>
Le css reste quasiment inchangé, a part ceci a rajouté (pour les images)
img{
cursor:pointer;
margin-bottom:-6px;
}
Dis moi si cela te convient
Hors Ligne
AH lalala stouille, tu sais comment c'est les profs, ils donnent jamais rien tout cru dans le bec, alors pourquoi le faire pour eux!!!
Hors Ligne
Pour ce qui est des dimmension d'affichage, il y a un plugin firefox (mais encor il faut l'utiliser), sinon je n'en connais pas d'autre.
Pour ce qui est d'apprendre le php, tetre que je ou un convive ferais un bon tuto
++
Les cartes wifi recommandée et testées
Billyboylindien parle d'informatique (un peu ).
Proposez vous aussi vos tutos sur tout les sujets (web, prog, bricolage ...)
Hors Ligne
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 , 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.
Hors Ligne
Pour ce qui est d'apprendre le php, tetre que je ou un convive ferais un bon tuto
++
javascript:insert_text(':lol:', '');
Le problème c'est qu'il est difficile de faire un tuto sur le php, par ou commencer ??
Ce qu'il faudrait c'est des lignes directrices. Sinon je veux bien m'y coller !
PS : Si des gens sont interessés par un tuto en php particulier qu'ils me le fasse savoir !
PS 2 : le problème de sly_31415 n'est pas trop un problème php, mais plutot un melange de problème html + css.
De plus, mettre le nez dans php Gest'Classe c'est assez hard !!
Hors Ligne
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).
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.
Par exemple, pour ton problème voici comment faire :
img
{
cursor:pointer;
margin-bottom:-6px;
_margin-bottom:0px;
}
Mozilla va prendre en compte uniquement ce qui n'a pas de "_", tandis que IE est le seul a prendre en compte
le _margin-bottom:0px;
Pour ton menu, pour CAPES ca a l'air d'être bon, par contre pour college, il suffit de modifier la class du ul
<ul class="[b][i]niveau_perso[/i][/b]">
<li><IMG SRC="images_p/menu/flamme_menu_020.jpg" border="0" WIDTH="95" HEIGHT="30" alt="Cours de sixième" title="Cours de sixième" onclick="window.open('index.php?page=page&id_page=1', '_self');"></li>
<li><IMG SRC="images_p/menu/flamme_menu_021.jpg" border="0" WIDTH="95" HEIGHT="30" alt="Cours de cinquième" title="Cours de cinquième" onclick="window.open('index.php?page=page&id_page=2', '_self');"></li>
<li><IMG SRC="images_p/menu/flamme_menu_022.jpg" border="0" WIDTH="95" HEIGHT="30" alt="Cours de quatrième" title="Cours de quatrième" onclick="window.open('index.php?page=page&id_page=3', '_self');"></li>
<li><IMG SRC="images_p/menu/flamme_menu_023.jpg" border="0" WIDTH="95" HEIGHT="30" alt="IDD" title="IDD" onclick="window.open('index.php?page=page&id_page=7', '_self');"></li>
</ul>
contenant les cours de 6, 5 etc ... et de modifier le css correspondant en modifiant le margin-top.
body {behavior: url(csshover.htc);}
img { display: block; cursor:pointer; margin-bottom:-3px;}
div#menu {width: 95px;}
div#menu ul {padding: 0; width: 95px; border:0px; margin:0px;}
div#menu li.sousmenu {background: black; 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;}
.niveau_perso{
display:block;
margin-top:-10px;
}
Désolé je ne peux pas tester ce que ca donne, dis moi si ca marche !!
Dernière modification par stouille (26-07-2006 08:04:34)
Hors Ligne
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 .
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 ).
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 ) 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...
Dernière modification par sly_31415 (27-07-2006 16:46:45)
Hors Ligne
Peut-être que le tutoriel serait de faire un script utile (genre un chat
) et de rajouter des fonctionnalités par petites touches pour voir les possibilités du php.
Je vais voir ce que je peux faire
Hors Ligne
Pages :: 1
Discussion | Réponses | Vues | Dernier message |
---|---|---|---|
besoin d'aide sur le menu déroulant par nonogemeaux
|
1 | 3067 | 14-01-2012 23:41:51 par Ririna |
Problème de plaçage de menu par koni41
|
0 | 4011 | 08-01-2011 05:59:59 par koni41 |
2 | 2877 | 11-06-2010 18:56:24 par metis15 | |
1 | 3756 | 04-05-2010 15:24:59 par klipper | |
menu deroulant pour ecran tactile par arsouille
|
0 | 3448 | 06-09-2009 02:19:03 par arsouille |