Petite astucienne ![]() | Bonjour, <div id="tabsH"> <ul> <li id="current"><a href="Accueil.html"><span>Accueil</span></a></li> <li><a href="Les recherches.html"><span>Les recherches</span></a></li> <li><a href="Déposer un projet<.html"><span>Déposer un projet</span></a></li> <li><a href="formulaires.html"><span>Les formulaires</span></a></li> <li><a href="Historique.html"><span>Historique</span></a></li> <li><a href="Membres.html"><span>Membres</span></a></li> <li><a href="Liens.html"><span>Liens</span></a></li> </ul> </div> Mon.css est celui là : /*- Menu Tabs H--------------------------- */ #tabsH { float:left; width:100%; background:#000; font-size:98%; line-height:normal; } #tabsH ul { margin:0; padding:30px 10px 0 240px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; margin:0; padding:0 0 0 4px; text-decoration:none; background-image: url(tableftH.gif); background-repeat: no-repeat; background-position: left top; } #tabsH a span { float:left; display:block; padding:5px 15px 4px 6px; color:#FFF; background-image: url(tabrightH.gif); background-repeat: no-repeat; background-position: right top; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } #tabsH #current a { background-position:0% -42px; } #tabsH #current a span { background-position:100% -42px; } Le résultat de ma page pour l’instant : http://www.andja.ch/index.html
body { margin:0; padding:0; font: bold 11px/1.5em Verdana; position: absolute; } #logo { position:absolute; left:-4px; top:17px; width:143px; height:109px; z-index:1; } Je me demande s’il va rester à sa place ? Sorry to be so nouille Modifié par albatros le 10/06/2009 19:28 | ||||||||
Publicité | |||||||||
| |||||||||
![]() ![]() |
Tu as plusieurs modèles de menus déroulants imbriqués ici : http://www.cssplay.co.uk/menus/ Tu pourrais t'en inspirer... | ||||||||
![]() ![]() | Salut Petit truc en passant : pas de majuscules , ni d'accents , ni morceaux de balise sur les liens ........ Exemple : Déposer<.html et Styles_perso.css Pas de <style type="text/css"> </style> tout seul , il n'y a rien au milieu !!! | ||||||||
Petite astucienne ![]() | Salut elle, je suis Suissesse (surtout ne va pas trop l'ébruiter y'a pas de quoi être très fière vu l'actualité de ces derniers temps ici) c'est peut-être plus utilisé chez nous le terme "nouille" Merci pour le lien j'avais déjà été pêcher dans ces eaux là, mais rien à faire je n'arrive pas a adapter les sous menus à mes menus à moi. Je me retrouve avec des menus et sous menus tout déplacés décalés....un truc pas présentable du tout !
merci Dreamer, je tente souvent de suivre tes explications qui sont toujours très pertinentes. Je n'ai pas encore l'automatisme de faire attention aux accents et aux majuscules mais je vais me le répéter 82 fois d'ici demain.
| ||||||||
![]() | Bonjour albatros Tout d'abord rectifie ce que dit Dreamer, puisque tu as déja une feuille de style en racine: stylesperso.css Pourquoi ces hacks dans ta feuille, tu peux trés bien faire tes menus déroulant en CSS pour tous navigateurs. Ta feuille xHTML, pourquoi ne pas mettre un header, un corps de page et un footer, regarde, tu positionnes d'abord ton menu avec photos en premier, puis ton menu horizontal en second, l'inverse serait plus logique. Tu peux trés bien mettre un menu déroulant sur une photo, c'est un background comme un autre. Le logo, direct sur fond noir, c'est triste et on voit mal par exemple, l'accent en gris. Jette un coup d'oeil sur ces modestes menus tout en CSS par un clic droit > code source:
Modifié par griggione le 11/06/2009 07:38 | ||||||||
Petite astucienne ![]() | Bonsoir griggione, Désolée de répondre si tard mais c'était une journée de ouf chez moi ! Je fais mes premiers pas dans ce domaine, autant te dire que cette phrase là "Pourquoi ces hacks" ....je ne sais même pas ce qu'elle veut dire Tu sais ce que je cherche ce n'est pas comment doit être présenté le site, c'est un site de chercheurs d'un reseau d'études appliquées je ne peux pas me permettre trop de fantaisies avec eux ! Je dois resté dans le sobre, donc je vais faire 4 ou 5 présentations et ils choisiront ce qu'ils veulent, si c'était mon site je ne le ferai pas ainsi mais je dois suivre certaines directives. Donc mon problème n'est pas pour l'instant l'apparence mais comment appliquer les fonctions !!??? Comment faire ces fichus sous menus sur ces boutons là ! Bon aujourd'hui même pas eu le temps de mettre mon nez dessus j'avoue...je vais y passer les 3 prochains jours.
Bonne soirée | ||||||||
![]() | RE Ben justement, ce qui est écrit avant est pour simplifier tes mises en pages.
/* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } Les hacks sont des codes de bidouillage pour s'adapter à IE5 et + et Mac...... mais qui passent pas aux normes internationales. Heureusement, il y a d'autre possibilités qui passent, au plus en cas de feuille de style + html un peu complexe, tu peux te servir éventuellement de Commentaires Conditionnels. Donc pour rester sobre et faire disons 1 proposition concrète, commence par lire et appliquer les conseils donnés avant. Et la oui, tu pourra faire diverses propositions puisque tu maitrises la 1ere. | ||||||||
Petite astucienne ![]() | Merci griggione. Ok pour l'explication des hacks, de ce côté là c'est le webmaster qui adaptera à sa façon, c'est un pro.... me fais pas de soucis sur ce genre de choses là. mais bon c'est toujours intéressant a savoir je te rermercie. En ce qui concerne :
ça m'avance pas du tout hein ! Oui, je vais arriver a faire différents header, colonnes, paragraphes et autres positionnements, il y a des 100 ènes de tutos et je parviens a appliquer le principe ! mais pour l'instant c'est pas mon problème. mon problème c'est toujours le même je n'arrive pas a faire mes sous-menus adapté à-mon-menu-a-moi et pas un autre ! ...en même temps à la base c'était ma seule question comment faire mes sous-menus, le reste je vais me débrouiller !
il est ou mon pca des années 2000-2004 ?...Polo au secours !
Modifié par albatros le 12/06/2009 08:16 | ||||||||
![]() ![]() |
Et le principe des sous-menus est bien démontré dans le site que j'ai cité plus haut. Modifié par elle le 12/06/2009 08:29 | ||||||||
![]() | RE De deux chose l'une, ou tu dois arranger ce site, tes menus compris, et dans ce cas c'est toi qui fait office de webmaster, ou tu as un webmaster et c'est lui qui corrige. Si vous êtes à deux dessus et que chacun fait sa méthode, bonjour l'angoisse. En plus, comme vérifier tes menus, tu as désactivé ton lien, on avance comme ça.
| ||||||||
![]() ![]() | griggione a écrit :
| ||||||||
![]() | RE Ca fait deux fois ....... | ||||||||
Petite astucienne ![]() | J'ai pas désactivé mon lien c'est mon hebergeur qui me fait un caca nerveux...merci infomaniak c'est exactement le moment !
L'autre c'est le soleil...excuse je ne peux jamais m'empêcher ! Non griggione on ne s'emmêle pas les pinceaux avec le webmaster vraiment pas, c'est que du bonheur de travailler avec ce mec.On a une complémentarité sur plusieurs choses tout va bien.
Merci elle, ton lien et pleins d'autres expliquent très bien le "comment faire"...sauf que je n'arrive pas a l'appliquer sur mes menus ce principe là !
Mais bon, je ne sais pas comment vous le dire autrement ? j'ai toujours la même phrase qui revient c'est pénible et pour vous et pour moi.
En tout cas merci du temps passé a m'avoir donné des indications.
Modifié par albatros le 12/06/2009 09:01 | ||||||||
![]() | RE Pour nous c'est pas pénible Attendons de voir le site à nouveau, car avec les codes que tu as mis ici, c'est sur que tu n'as pas de déroulant, un menu oui, mais c'est tout.
| ||||||||
Petite astucienne ![]() | Saluuuuuuuuuuuuuuut mon Polo adoré Ben pour le coup je me demande si c'est parce que je suis de plus en plus blonde, ou parce que j'ai de moins en moins 18 ans que je mets si longtemps a comprendre ! Ils sont adorablent ils me donnent des liens, des tutos, etc....mais bon en même temps ça je les trouve toute seule, je sais faire ! Ce que je voulais c'est que quelqu'un puisse placer les codes des sous-menus dans mon code que j'aii laissé au dessus, pour que ça me permette enfin de comprendre ce que je fais comme nouillerie ! et pourquoi ça marche pas chez moi ! C'est marrant quand même que quand tu fais un s.o.s on te donne des tutos à suivre ! C'est moi qui ai changé ou c'est pca ??? J'en sais rien ? Bon évidement faut que je fasse deux trois manip. chez mon hebergeur pour réactiver l'affichage mais là j'ai pas le temps je verrai demain.
C'est un vrai plaisir pour moi de te revoir mon Polo
Bisousssss
| ||||||||
![]() ![]() |
Maintenant, si tu veux que quelqu'un te crée ton menu, ce qui n'est pas possible sans modifier le code du menu auquel tu tiens tant, c'est autre chose. Modifié par elle le 13/06/2009 17:19 | ||||||||
PC Astuces a besoin de vous pour survivre. Nos conseils et astuces vous ont aidé ? Vous avez résolu un problème sur votre ordinateur ? Vous avez profité de nos bons plans ? Aidez-nous en retour avec un abonnement de soutien mensuel. 5 € par mois 10 € par mois 20 € par mois
| |||||||||
![]() ![]() | Salut
On voudrait bien aider , mais sans la page , sans script c'est dur !!! | ||||||||
![]() ![]() | polo a écrit : J'ai oublié mes bésicles !!! | ||||||||
![]() | albatros a écrit : RE Il me semble bien ne pas avoir de lien (sauf exemple) mais plutot essayé de te faire comprendre que tes codes ne sont pas actuellement comme il faut pour ta demande.
As-tu au moins essayé de modifier griggione a écrit :
| ||||||||
Petite astucienne ![]() | Que personne ne sorte ! on me dit : - "ton code actuel ne comprend aucun sous-menus" - As-tu lu comme dit et comme le souligne elle, que ton code actuel ne comprend aucun sous-menu c'est une histoire de fou ou quoi !? le truc c'est que mon code menu n'est pas déroulant forcément....puisqu'il n'a pas de sous-menus (par définition ) et que je cherche comment faire des sous-menus Ma page est a nouveau active http://www.andja.ch/index.html les images qui constituent le menu sont : et ici : je dois le renommer, Dream je n'oublie pas la leçon
Modifié par albatros le 13/06/2009 22:14 | ||||||||
![]() ![]() |
| ||||||||
Petite astucienne ![]() | J'avais tenté deux ou trois fois d'inverser la procédure effectivement elle...mais c'est assez cata j'ai pleins de décalage de grandeur.....ça c'est le manque de connaissances dans ce domaine, c'est pour ça que je demande de l'aide. | ||||||||
![]() | albatros a écrit : RE C'est bien ce qu'on te dit, commence par mettre de l'ordre dans tes fichiers Xhtml et CSS, car sinon ce que tu vas rajouter sera toujours avec des problèmes Regarde déja, on te dit que tu as des balises inutiles et tu laisses comme ça: <style type="text/css"> Ensuite si tu veux de l'aide et que tu as corrigé, ben comme proposé plusieurs fois, choisis un sous-menu qui te convient, fais des éssais et revient avec tes codes et là ou tu bloques. Mais, je sais je radote, commence par rectifier tes fichiers actuels. | ||||||||
Petite astucienne ![]() | Tu confonds probablement les gens qui ont déjà une bonne base et n'ont besoin que de quelques conseils, et ceux qui débutent, qui demande juste qu'on leur modifie le fichier tel qu'il devrait être afin de comprendre et apprendre ces bases. Sur ma page c'est mon premier fichier non modifié parce que les essais que j'ai fait pour corriger ne fonctionne pas ! (et qu'on me demandait de réactiver cette page pour voir les codes.) je dois juste enlever ce =text/css
Si j'y arrivais je ne serais pas là à demander de l'aide ! ce serait assez grave de demander de l'aide sur un truc qu'on sait faire non...me semble.....mais bon !
| ||||||||
Petite astucienne ![]() | Si y'en a un seul qui me dit encore une fois "T'as qu'a faire tes sous-menus" je lui mords l'oreille droite | ||||||||
Petite astucienne ![]() | oui Polo parce que j'ai pas changé mon premier fichier chez mon hebergeur j'ai déjà dû batailler avec lui ces deux derniers jours. Je modifie plus tard.
Tu veux que je te morde l'oreille toi ? | ||||||||
![]() ![]() | polo a écrit : Peut-être qu'elle t'écoutera ?? | ||||||||
Petite astucienne ![]() | Ok laissez tomber mes petits chatons je vais me débrouiller autrement
merci de votre aide Modifié par albatros le 14/06/2009 13:39 | ||||||||
Astucien ![]() | Bonjour,
Voici un tuto de départ qui permet de faire sans problème un menu horizontal déroulant. http://css.developpez.com/tutoriels/menu-deroulant/
Une fois ce menu fait, tu pourras poster ici les problèmes que tu rencontres. C'est bien plus facile pour nous de plancher sur un problème spécifique.
Et là c'est un autre tuto complémentaire pour aborder la compatibilité avec IE entre autre (application du :hover). http://www.tuto-fr.com/tutoriaux/tutorial-menu-deroulant-css.php
Déjà, voici de quoi réaliser ce que tu demandes. Ensuite nous pourrons t'aider à l'adapter (entre autre avec le logo) mais ce ne sera pas la difficulté. Bon dimanche ... | ||||||||
![]() | albatros a écrit : RE On a bien compris que tu t'es avancée pour faire une mise en page de site sans les connaissances, mais faut pas non plus croire que dans un forum technique tu trouveras tout. tirikou a écrit : D'abord c'est vrai que c'est plus facile et puis surtout s'il y a aide c'est sur des difficultés, par pour faire tout le travail. Ensuite suis les conseils mais fait aussi attention. <title>Accueil</title> | ||||||||
Astucien ![]() | Re, C qu'il te faut comprendre pou développer ton menu ne serait-ce qu'au nivau du html c'est l'imbrication des balises et leur niveau : Ton menu est contenu dans un div <div id="menu"> </div> Ensuite, ton premier niveau est contenu dans des ul <div id="menu"> <ul class="niveau_1"> </ul> </div> Tes liens de premier niveau sont donc à ce niveau là dans les li <div id="menu"> <ul class="niveau_1"> <li><a href="">Accueil</a></li> <li><a href="">Recherche</a></li> <li><a href="">Projet</a></li> ..... </ul> </div> Tes liens de second niveau doivent aussi être contenus dans des ul puis des li <div id="menu"> <ul class="niveau_1"> <li><a href="">Accueil</a></li> <ul class="niveau_2"> <li><a href="">Accueil 1</a></li> <li><a href="">Accueil 2</a></li> <li><a href="">Accueil 3</a></li> </ul> <li><a href="">Les Recherches</a></li> <ul class="niveau_2"> <li><a href="">Recherche 1</a></li> <li><a href="">Recherche 2</a></li> <li><a href="">Recherche 3</a></li> </ul> </ul> </div> Donc, à chaque fois que tu veux rajouter un onglet et ses sous menus il faut rajouter ceci : <li><a href="">Onglet</a></li> <ul class="niveau_2"> <li><a href="">sous menu 1</a></li> <li><a href="">sous menu 2</a></li> <li><a href="">sous menu 3</a></li> </ul> J'essaie d'être le + clair possible, mais l'indentation sur ce forum étant tellement galère Je te conseille d'abord de faire ton menu pour qu'il fonctionne, ensuite tu pourras l'intégrer dans ton site. As tu compris cette première partie avant d'aller voir ce qu'il se passe en css ? | ||||||||
![]() | tirikou a écrit : RE Mais pourquoi la team a mis cet éditeur de message de m.... en javascript.
| ||||||||
Petite astucienne ![]() | On a bien compris que tu t'es avancée pour faire une mise en page de site sans les connaissances, mais faut pas non plus croire que dans un forum technique tu trouveras tout. non, c'est juste une propositon de design et pas une gestion de site c'est pas mon job. Par exemple, tu as enlevé les lignes citées mais pour en mettre d'autres, cela devait te choquer, et là oui voila de l'aide que tu auras: oui t'a raison ça m'a choquée sur dream il m'a souligné toute la 1ère partie en rouge je vais réctifier avec ton code. tirikou les code des sous menus c'est bon je sais bien comment les faire mais regarde le résultat j'suis pas vraiement enchantée
| ||||||||
![]() | RE Pense à remettre ton url de temps en temps pour suivre, ça évite de chercher Bon tu as commencé, mais tu as oublié le principal, ton sous-menu accueil doit être dans ton menu accueil, pas en dehors, aprés le : <li id="current"><a href="http://www.resar.ch/"><span>Accueilspan>a>li> attention de déplacer la balise de fermeture Oupppsssss l'url: http://www.andja.ch/index.html Modifié par griggione le 14/06/2009 15:26 | ||||||||
Astucien ![]() | Je comprends que tu ne sois pas enchantée .... Voici ton code : <div id="tabsH"> <li><a href="http://www.resar.ch/?page=21"><span>Liens</span></a></li> <li><a href="">Accueil 2</a></li> <li><a href="">Recherche 2</a></li> Et voici ce qu'il aurait fallut : <div id="tabsH"> <ul class="niveau1"> <li><a href="">Acceuil 1</a></li> <ul class="niveau2"> <li><a href="">Sous Accueil 1</a></li> <li><a href="">Sous Accueil 2</a></li> <li><a href="">Sous Accueil 3</a></li>
</ul> <li><a href="">Les Recherches</a></li> <ul class="niveau2"> <li><a href="">Sous Recherche 1</a></li> <li><a href="">Sous Recherche 1</a></li> <li><a href="">Sous Recherche 1</a></li>
</ul> <li><a href="">Déposer un projet</a></li> <ul class="niveau2"> <li><a href="">Sous projet 1</a></li> <li><a href="">Sous projet 1</a></li> <li><a href="">Sous projet 1</a></li>
</ul> <li><a href="">Les formulaires</a></li> </ul>
</div> // Fin de div tabsH Il faut faire pareil avec les autres "têtes" de menu et leur sous menus. Ensuite tu met cela à la place de ton menu existant (div tabsH). Après il va falloir faire le Css (faire floater les ul, enlever les puces, masquer les sous menu, etc, etc.) Et il y a tout dans le tuto. Et de l'aide ici pour y aller step by step ... | ||||||||
![]() ![]() | Re
J'ai fait un peu mumuse avec ton script et voilà le résultat fait un peu à l'arrache prouvant que c'est faisaible et à toi de l'adapter : http://www.pashmina-le-site.com/albatros/ Bon , j'ai pas eu le temps de tester sur IE !!
A+
| ||||||||
![]() | RE IE7 et 8 ça passe, IE6 et 5.5 non, pas de sous-menus. | ||||||||
Astucien ![]() | Pas de souci, dans le deuxième tuto donné il y a le fichier htc qui permet de faire fonctionnr sous IE. | ||||||||
![]() | RE Dreamer tu as essayé sans les commentaires conditionnels | ||||||||
![]() | tirikou a écrit : RE Ha oui sous IE 6 au moins il le faut ce htc | ||||||||
Petite astucienne ![]() | Vous êtes super merci bien Pense à remettre ton url de temps en temps pour suivre, ça évite de chercher Oui griggione j'y ai pensé mais plus tard je vais corriger selon tes infos
ok tirikou
Dreamer moi j'aime bien quand tu fais joujou
Désolée pour les mal entendus du début de post. je reviens vous dire quand j'aurai fait les améliorations (sans oublier de remettre le lien)
| ||||||||
Les bons plans du moment PC Astuces | Tous les Bons Plans | ||||||||||||||||||
|