Association html, css et javascript

S'inscrire | Se connecter

> Tous les forums > Forum des Webmasters

Ajouter un message à la discussion

Pages : [1] 2 ... Fin

Page 1 sur 2 [Fin]

Suivante >

Nicolas78

Posté le 05/06/2013 @ 09:05

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

elle

Posté le 05/06/2013 à 09:13

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

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

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

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

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

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

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

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 .

Nicolas78

Posté le 05/06/2013 à 10:22

Petit astucien

Pas de soucis ;)

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

Demos
Menus
Layouts
Boxes
Mozilla
Explorer
Opacity

C'est tout :/

Dormir ? D'accord :) Bonne nuit :)

elle

Posté le 05/06/2013 à 17:35

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

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

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

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

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

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 !!

Soutenez PC Astuces

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

Gérer son abonnement

elle

Posté le 05/06/2013 à 17:49

Grande Maîtresse astucienne

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

Dreamer

Posté le 05/06/2013 à 17:54

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

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">Demos</a></li>
<*li><a href="../menus/" rel="Menus">Menus</a></li>
<*li><a href="../layouts/" rel="Layouts">Layouts</a></li>
<*li><a href="../boxes/" rel="Boxes">Boxes</a></li>
<*li><a href="../mozilla/" rel="Mozilla">Mozilla</a></li>
<*li><a href="../ie/" rel="Explorer">Explorer</a></li>
<*li><a href="../opacity/" rel="Opacity">Opacity</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

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

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

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

Grande Maîtresse astucienne

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

elle

Posté le 06/06/2013 à 17:26

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

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

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) !

kalinka

Posté le 06/06/2013 à 17:56

Astucienne

oui quand tu le mets en ligne, il est par défaut accessible par tout le monde.

si tu as juste un menu vertical c'est que le chemin vers le fichier css n'est pas le bon

si tu as bien écrit cette ligne (sans faute)

<*link href="doc.css" rel="stylesheet" type="text/css" /> (sans le *)

c'est que ton fichier doc.css n'est pas au bon endroit, il doit etre dans le même dossier que le fichier index

Nicolas78

Posté le 06/06/2013 à 18:05

Petit astucien

Bah là, je les ais mis tous les deux dans un dossier qui est sur le bureau alors il n'y a pas de soucis normalement si j'écris : <*link href="doc.css" rel="stylsheet" type="text/css"/>

elle

Posté le 06/06/2013 à 18:08

Grande Maîtresse astucienne

C'est : stylesheet .

Il y a quoi dans ce fichier?

Nicolas78

Posté le 06/06/2013 à 18:18

Petit astucien

Dans le doc.css ? Ce que m'a donner Dreamer hier vers 17h30 ;)

Oh punaise...MERCI Elle !!!!!!!! A cause de ce ... de "e" qui manquais à stylesheet, ben évidement, ça ne fonctionnais pas...!!! Olala ça y est ça marche ! :D

Merci beaucoup :)

elle

Posté le 06/06/2013 à 18:21

Grande Maîtresse astucienne

Dire qu'il y en a qui me reprochent d'être trop à cheval sur les détails!

Dreamer

Posté le 06/06/2013 à 18:32

Maître astucien

elle a écrit :

Dire qu'il y en a qui me reprochent d'être trop à cheval sur les détails!

Perso, je n'ai rien dit même si je le pense ........ Parfois !!

Nicolas78

Posté le 06/06/2013 à 18:42

Petit astucien

En tout cas, je me sent un peu con là mdr

Sinon, pour héberger un site, il n'y a rien de bien sorcier ? Là je ne vais pas le faire pour celui là mais, pour mon projet perso, je le ferais !

elle

Posté le 06/06/2013 à 18:46

Grande Maîtresse astucienne

Regarde chez l'ami Malcolm :

http://www.php-astux.info/hebergement-site-web.php

http://www.php-astux.info/mise-en-ligne.php

Modifié par elle le 06/06/2013 18:47

Nicolas78

Posté le 06/06/2013 à 18:50

Petit astucien

Merci beaucoup :)

Pendant que j'y suis, pour "découper" une page en 3, les iframes c'est bien ou on peut faire mieux ?

elle

Posté le 06/06/2013 à 18:53

Grande Maîtresse astucienne

C'est pas bien du tout!

Tu veux dire quoi exactement par découper?

Nicolas78

Posté le 06/06/2013 à 18:55

Petit astucien

Mince ^^'

Partager la page en gros ! Comme ça : http://css.developpez.com/galerie/demo/mise-en-page/exemple_2/

Avec ou sans le pied de page, peu importe ! Que je puisse mettre des textes, listes, images...Ect...partout !

elle

Posté le 06/06/2013 à 18:59

Grande Maîtresse astucienne

Avec des div, simplement. Regarde le code source de la page que tu montres en exemple...

Nicolas78

Posté le 06/06/2013 à 19:09

Petit astucien

Ah oui...!

Mais par exemple, est ce qu'en mettant ça dans comme code, il n'y aura pas de problème sur d'autres pc (par exemple tout en plus gros ou en plus petit selon la résolution...ce n'est pas très clair mais je ne trouve pas les mots ^^')

Et aussi, par exemple, j'avais un problème avec les iframes, c'est que j'avais une bordure blanche sur tous les côtés de la page, je n'arrivais pas à remplir totalement la page ! De toute manière, je verrais ça demain :)

elle

Posté le 06/06/2013 à 19:12

Grande Maîtresse astucienne

Nicolas78 a écrit :

Mais par exemple, est ce qu'en mettant ça dans comme code, il n'y aura pas de problème sur d'autres pc (par exemple tout en plus gros ou en plus petit selon la résolution...ce n'est pas très clair mais je ne trouve pas les mots ^^')

Ce sera à toi de décider, selon la structure du site, entre un design fluide, extensible, qui s'adaptera à la largeur de la fenêtre du navigateur, et un site à largeur fixe, chacun ayant ses contraintes propres. Certaines présentations se prêtent bien à un design fluide, d'autres moins. Dans le cas d'un site qui comporte beaucoup d'éléments devant être précisément positionnés, un design fixe peut s'avérer préférable car un design fluide, par définition, se déforme selon la résolution.

elle

Posté le 06/06/2013 à 19:14

Grande Maîtresse astucienne

Un petit logiciel pour tester tes pages selon différentes résolutions :

MultiRes
Petit utilitaire pour changer rapidement la résolution graphique de l'écran ainsi que le taux de rafraîchissement. Fonctionne aussi bien sous Windows 9X/ME que sous Windows 2000/XP.

Modifié par elle le 06/06/2013 19:14

Pages : [1] 2 ... Fin

Page 1 sur 2 [Fin]

Suivante >

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

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

Recevoir PC Astuces par e-mail

Les bons plans du moment PC Astuces

Tous les Bons Plans

SSD Lexar NM790 1 To (3D NAND, NVMe, PCIe, M.2, 7400 Mo/s, dissipateur thermique)
159,98 € 179,99 € -11%
@Amazon

32 pastilles lave-vaisselle Sun Tout en 1 citron
5,27 € 7,99 € -34%
@Amazon

Adaptateur USB 3.0 Sabrent pour disques durs et SSD 2.5 pouces SATA
10,99 € 16,99 € -35%
@Amazon

Aspirateur eau et poussières Kärcher WD 2 Plus
54,99 € 75,99 € -28%
@Amazon

Lot de 2 lampes solaires Philips avec capteur de présence 196 LED haute luminosité projecteur mural 4 têtes
34,99 € 60 € -42%
@Amazon

Lego Architecture Notre-Dame De Paris (21061)
145,99 € 229 € -36%
@Cdiscount

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