> Tous les forums > Forum des Webmasters
 Association html, css et javascript
Ajouter un message à la discussion
Pages : [1] 2 3 ... Fin
Page 1 sur 3 [Fin]
Nicolas78
  Posté le 05/06/2013 @ 09:05 
Aller en bas de la page 
Petit astucien

Salut à tous !

Je suis en ce moment dans la réalisation d'un site et je cherche à faire un menu en haut de la page, horizontal et déroulant !

Pour ça, j'ai chercher un peu partout et j'ai apparement besoin d'html (normal), de css et de javascript !

Ma question : comment faire associer ces 3 fichiers ? Je sais seulement que dans le fichier .html il faut que je mette (pour l'associer au fichier .css) : "<link href="mon_fichier.css" rel="stylsheet" type="text/css">" dans la balise <HEAD> !

Pour les autres, je n'en sais rien !

Merci d'avance ;)



Modifié par Nicolas78 le 05/06/2013 09:14
Publicité
elle
 Posté le 05/06/2013 à 09:13 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Tu peux aussi faire un menu déroulant sans JavaScript, plus accessible. Il y a plein de modèles ici : http://www.cssplay.co.uk/menus/
Nicolas78
 Posté le 05/06/2013 à 09:27 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Merci ;)

Mais...il ne me donne pas le code correspondant à chaque menu (à moins que je n'ai pas trouver) !

Il y a un truc à télécharger mais, travaillant sur Fedora, ça ne va pas :/

kalinka
 Posté le 05/06/2013 à 09:34 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucienne

je plussoie Elle pour le menu en css (plus rapide et plus fluide qu'en javascript) sinon pour répondre à ta question, tu dois mettre

pour un fichier externe : <*script type="text/javascript" src="monbeauscript.js"><*/script> (monbeauscript.js contenant le code)

Pour insérer directement dans le code à l'emplacement voulu : <*script type="text/javascript"> ici le code de monbeauscript <*/script>



Nicolas78
 Posté le 05/06/2013 à 09:41 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bon alors abandonnons le javascript si c'est plus simple et plus fluide en css !

(Mais sinon, pour comprendre quand même un ptit peu, qu'est ce que tu entends par "pour un fichier externe" kalinka ?)

elle
 Posté le 05/06/2013 à 09:46 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Nicolas78 a écrit :

Mais...il ne me donne pas le code correspondant à chaque menu (à moins que je n'ai pas trouver) !

Clic droit, Code source de la page... Il faut lire les conditions aussi, certains menus ne sont pas libres...

Nicolas78
 Posté le 05/06/2013 à 09:55 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Oula...c'est pas évident ça ^^ Je ne m'y connais pas assez bien pour trouver ça comme ça ^^

Enfin bon, j'ai essayer et je dirais que pour celui là : http://www.cssplay.co.uk/menus/cssplay-revolver.html

Il faut prendre de la ligne 135 à 175. C'est ça ?

Par contre, si c'est bien ça, quand je le met dans mon fichier html, j'ai juste les catégories les unes au dessus des autres (Demos, Menus, Layouts...ect...) ! Et ça...c'est moche !

Est ce qu'il est possible qu'il me manque un package ou un module qui me permettrais de le voir s'afficher correctement ?

elle
 Posté le 05/06/2013 à 10:09 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Tu mets le style :

<style type="text/css"> jusqu'à </style>

Et tu mets ceci dans ton code HTML :

<ul class="cssplayNav">jusqu'à <ul>

 
(Édité )

 


Modifié par elle le 05/06/2013 17:41
elle
 Posté le 05/06/2013 à 10:12 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

( d'éditeur de c*l!)

Regarde dans le code source et copie ce qui correspond à ce que j'ai mis.

Je dois aller .

Publicité
Nicolas78
 Posté le 05/06/2013 à 10:22 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Pas de soucis ;)

Ah ! Ben...c'est plus joli ! Mais, il m'affiche ça :

C'est tout :/

Dormir ? D'accord :) Bonne nuit :)

elle
 Posté le 05/06/2013 à 17:35 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Si tu pouvais mettre ta page en ligne, ce serait plus facile pour nous de t'expliquer en voyant et à partir de ce que tu as fait.

Dreamer
 Posté le 05/06/2013 à 17:36 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maître astucien

Coimme madame est partie se coucher, je prends la suite .....

Le html

  • Demos
  • Menus
  • Layouts
  • Boxes
  • Mozilla
  • Explorer
  • Opacity


  • Le css

    .cssplayNav {padding:0; margin:40px auto 80px auto; list-style:none; height:50px; width:714px; overflow:hidden;
    border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
    .cssplayNav li {float:left;}
    .cssplayNav li a {display:block; float:left; width:100px; line-height:50px; text-align:center; font-family:arial, sans-serif;
    font-size:13px; text-decoration:none; font-weight:bold; border-right:1px solid #333; border-left:1px solid #ccc;
    -moz-transition: 0.25s; -ms-transition: 0.25s; -o-transition: 0.25s; -webkit-transition: 0.25s; transition: 0.25s; }
    .cssplayNav li a b {display:block; width:0; height:0; border-left:50px solid #069; border-right:50px solid #069;
    border-bottom:20px solid #fc6; overflow:hidden;}
    .cssplayNav li a:before {content: attr(rel); background:#069; color:#fff; display:block; width:100px; height:50px; text-align:center;
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0));
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0));
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0));
    background-image: linear-gradient(top, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0)); }
    .cssplayNav li a:after {content: attr(rel); background:#fc6; color:#000; display:block; width:100px; height:50px; text-align:center;
    background-image: -moz-linear-gradient(bottom, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0));
    background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0));
    background-image: -ms-linear-gradient(bottom, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0));
    background-image: -o-linear-gradient(bottom, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0));
    background-image: linear-gradient(bottom, rgba(255, 255, 255,0.4), rgba(255, 255, 255,0)); }
    .cssplayNav li a:hover {margin-top:-70px;}





    Modifié par Dreamer le 05/06/2013 17:46
    Dreamer
     Posté le 05/06/2013 à 17:37 
    Aller en bas de la page Revenir au message précédent Revenir en haut de la page
      Maître astucien

    elle a écrit :

    Si tu pouvais mettre ta page en ligne, ce serait plus facile pour nous de t'expliquer en voyant et à partir de ce que tu as fait.

    Ah, madame est levée !!

    Nicolas78
     Posté le 05/06/2013 à 17:38 
    Aller en bas de la page Revenir au message précédent Revenir en haut de la page
    Petit astucien

    En fait, telle que je vous l'ai montrée dans mon avant dernier message, c'est exactement ce que je vois sur mon fond blanc.

    J'essaierais ça demain, je suis parti de mon stage et ce soir je suis bien occupé donc je vous dirais demain !

    Merci ;)

    elle
     Posté le 05/06/2013 à 17:43 
    Aller en bas de la page Revenir au message précédent Revenir en haut de la page
      Grande Maîtresse astucienne

    Dreamer a écrit :

    Ah, madame est levée !!

    Oui, et madame a édité son trop large précédent message et monsieur vient d'en mettre un aussi large!



    Modifié par elle le 05/06/2013 17:45
    Dreamer
     Posté le 05/06/2013 à 17:46 
    Aller en bas de la page Revenir au message précédent Revenir en haut de la page
      Maître astucien

    elle a écrit :
    Dreamer a écrit :

    Ah, madame est levée !!

    Oui, et madame a édité son trop large précédent message et monsieur vient d'en mettre un aussi large!

    Bon, monsieur a réduit la largeur !!

    elle
     Posté le 05/06/2013 à 17:49 
    Aller en bas de la page Revenir au message précédent Revenir en haut de la page
      Grande Maîtresse astucienne

    Et l'éditeur a interprété le code HTML.

    Publicité
    Dreamer
     Posté le 05/06/2013 à 17:54 
    Aller en bas de la page Revenir au message précédent Revenir en haut de la page
      Maître astucien

    elle a écrit :

    Et l'éditeur a interprété le code HTML.

    Comme d'hab !!

    Je sais que Jean-Pierre avait trouvé un truc pour éviter ça !!

    Nicolas78
     Posté le 06/06/2013 à 09:19 
    Aller en bas de la page Revenir au message précédent Revenir en haut de la page
    Petit astucien

    J'ai mis ça pour le html :

    <*HTML>
    <*HEAD>
    <*link href="doc.css" rel="stylsheet" type="text/css">
    <*TITLE>Accueil</TITLE>
    <*/HEAD>


    <*ul class="cssplayNav">
    <*li><a href="../menu/" rel="Demos"><b>Demos</b></a></li>
    <*li><a href="../menus/" rel="Menus"><b>Menus</b></a></li>
    <*li><a href="../layouts/" rel="Layouts"><b>Layouts</b></a></li>
    <*li><a href="../boxes/" rel="Boxes"><b>Boxes</b></a></li>
    <*li><a href="../mozilla/" rel="Mozilla"><b>Mozilla</b></a></li>
    <*li><a href="../ie/" rel="Explorer"><b>Explorer</b></a></li>
    <*li><a href="../opacity/" rel="Opacity"><b>Opacity</b></a></li>
    <*/ul>

    <*/HTML>


    Et pour le css, j'ai mis ce que tu m'as donner Dreamer , hier vers 17h36 !

    Et ça m'affiche toujours la même chose, une liste à puces, verticale, sur le côté gauche de la page :(

    Mais d'ailleurs, où est-ce qu'il va pouvoir les trouver les truc après "href" ? Ils ne sont pas dans le répertoire de mon site puisque ce n'est qu'un copié-collé de code trouver ailleurs...

    Comment pourrais-je la mettre en ligne pour que vous puissez la voir ?



    Modifié par Nicolas78 le 06/06/2013 09:22
    y.bli
     Posté le 06/06/2013 à 11:36 
    Aller en bas de la page Revenir au message précédent Revenir en haut de la page
      Maître astucien
    Nicolas78 a écrit :

    Mais d'ailleurs, où est-ce qu'il va pouvoir les trouver les truc après "href" ? Ils ne sont pas dans le répertoire de mon site puisque ce n'est qu'un copié-collé de code trouver ailleurs...

    Bonjour,

    Bien éVidemment, il faut que le fichier doc.css soit à la racine de ton site.

    @+

    Nicolas78
     Posté le 06/06/2013 à 13:00 
    Aller en bas de la page Revenir au message précédent Revenir en haut de la page
    Petit astucien

    Bonjour,

    Ah bah oui ;) Ca c'est sur ^^ Mais...c'est déjà le cas ;)

    kalinka
     Posté le 06/06/2013 à 16:09 
    Aller en bas de la page Revenir au message précédent Revenir en haut de la page
      Astucienne

    ton appel au fichier doc.css n'est pas bon, tu as oublié de fermer la balise de fin

    <*link href="doc.css" rel="stylesheet" type="text/css"/>

    PS: En xhtml, tu dois toujours écrire tes balises en minuscules même celles entre head et /head


    Modifié par kalinka le 06/06/2013 16:13
    elle
     Posté le 06/06/2013 à 17:23 
    Aller en bas de la page Revenir au message précédent Revenir en haut de la page
      Grande Maîtresse astucienne

    Et il manque le body dans ton code HTML...

    elle
     Posté le 06/06/2013 à 17:26 
    Aller en bas de la page Revenir au message précédent Revenir en haut de la page
      Grande Maîtresse astucienne

    Nicolas78 a écrit :

    Mais d'ailleurs, où est-ce qu'il va pouvoir les trouver les truc après "href" ? Ils ne sont pas dans le répertoire de mon site puisque ce n'est qu'un copié-collé de code trouver ailleurs...

    Ce seront les liens vers les pages que tu auras faites et mises dans ton répertoire...

    elle
     Posté le 06/06/2013 à 17:27 
    Aller en bas de la page Revenir au message précédent Revenir en haut de la page
      Grande Maîtresse astucienne

    Pour mettre en ligne, tu n'as pas d'hébergeur? Avec ton fournisseur d'accès Internet, peut-être?

    Nicolas78
     Posté le 06/06/2013 à 17:37 
    Aller en bas de la page Revenir au message précédent Revenir en haut de la page
    Petit astucien

    Ça ne change rien...! Toujours le même affichage, pas de menu quoi ! Une liste à puces verticale !

    Imaginons je suis chez Free, je l'héberge chez Free, je peux y accéder depuis n'importe où après ? Par ce que ce site, je suis en train de le mettre au point en entreprise, sur leur serveur (enfin bon, pour le moment, ce ne sont que des maquettes et une fois que ce sera bon, il sera sur leur serveur principal) !

    Publicité
    Pages : [1] 2 3 ... Fin
    Page 1 sur 3 [Fin]

    Vous devez être connecté pour poster des messages. Cliquez ici pour vous identifier.

    Vous n'avez pas de compte ? Créez-en un gratuitement !


    Les bons plans du moment PC Astuces

    Tous les Bons Plans
    9,99 €Bloc multiprise parasurtenseur BRENNENSTUHL 8 prises à 9,99 €
    Valable jusqu'au 27 Février

    Amazon fait une promotion sur le bloc multiprise parasurtenseur BRENNENSTUHL avec 8 prises à orientation interversée qui passe à 9,99 € au lieu de 20 €. Le câble fait 1,4 m.


    > Voir l'offre
    99,99 €Pack HP Imprimante Photo Sprocket 200 blanche + housse + 20 papiers photos à 99,99 €
    Valable jusqu'au 26 Février

    La Fnac fait une promotion sur le pack HP Imprimante Photo Sprocket 200 accompagnée d'une housse et de 20 papiers photos à 99,99 € alors qu'on le trouve ailleurs à 129 €. L'imprimante Photo Sprocket 200 va vous permettre d'imprimer des photos instantanées de 5 x 7,6 cm (2 x 3") depuis votre smartphone via le bluetooth. 


    > Voir l'offre
    329,90 €Ecran ultra large LG 34 pouces 34WL50S-B à 329,90 €
    Valable jusqu'au 01 Mars

    Amazon propose actuellement l'écran 34 pouces LG 34WL50S-B à 329,90 € livré gratuitement alors qu'on le trouve à partir de 400 € ailleurs. Cet écran ultra large est au format 21/9, possède une dalle IPS et offre une résolution de 2560 x 1080 pixels. Avec lui, vous pourrez bénéficier d'une plus grande immersion dans les jeux et les films. Cet écran est compatible FreeSync.


    > Voir l'offre

    Sujets relatifs
    Lien html vers fenetre javascript
    Menu HTML & Javascript fonctionne mal, aide SvP
    choisir un langage ASP,PHP,MySQL,javascript,HTML
    Menu Déroulant Html + Javascript
    html et javascript
    code html flocon de neige et non javascript
    HTML: strict+javascript ou Transitional ????
    RECRUTEMENT: Développeur html/css/php/javascript
    Javascript et HTML
    Introduire du javascript sur html
    Plus de sujets relatifs à Association html, css et javascript
     > Tous les forums > Forum Forum des Webmasters