Le forum des utilisateurs iWeb
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-17%
Le deal à ne pas rater :
Casque de réalité virtuelle Meta Quest 2 128 Go Blanc (+29,99€ ...
249.99 € 299.99 €
Voir le deal

Faire une barre flotante

+2
koeklin
xXjujo002Xx
6 participants

Aller en bas

Faire une barre flotante Empty Faire une barre flotante

Message par xXjujo002Xx 4/4/2010, 17:00

J'aimerais faire un barre flottante comme sur ce site qui suivrait le scrolling.
http://fr.audiofanzine.com/logiciel-musique-divers/maize-soft/Maize-Sampler/
xXjujo002Xx
xXjujo002Xx
Simple Membre

Messages : 12
Inscription : 26/03/2010 Masculin Age : 26
Localisation : France
Version iWeb : A remplir!
Publication : Ftp integré

http://web.graphiz.free.fr

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par koeklin 4/4/2010, 18:28

Des exemples avec iWeb :

http://dl.dropbox.com/u/3563737/Lycos/Fixed.html
http://web.me.com/toad.hall/Demo_1/StaticNavbar.html

http://www.wyodor.net/_Demo/FloatingMenu/Fixed.html
http://www.wyodor.net/_Demo/FloatingMenu/DynamicFloat.html
koeklin
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par xXjujo002Xx 4/4/2010, 18:36

Des exemples avec iWeb :

http://dl.dropbox.com/u/3563737/Lycos/Fixed.html
http://web.me.com/toad.hall/Demo_1/StaticNavbar.html

http://www.wyodor.net/_Demo/FloatingMenu/Fixed.html
http://www.wyodor.net/_Demo/FloatingMenu/DynamicFloat.html

C'est très gentil de me montrer des exemple mais ce qui m'intéresse surtout c'est de savoir le faire.
--------------
ps: Ton site, SUPER je vais le recommander. respect
xXjujo002Xx
xXjujo002Xx
Simple Membre

Messages : 12
Inscription : 26/03/2010 Masculin Age : 26
Localisation : France
Version iWeb : A remplir!
Publication : Ftp integré

http://web.graphiz.free.fr

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par el padre 4/4/2010, 21:41

ah tiens ça m'intéresse aussi
el padre
el padre
iWeb - Modo

Messages : 345
Inscription : 11/04/2008 Age : 43
Localisation : sur mes pieds ou presque
Version iWeb : A remplir!
Publication : Ftp integré

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par xXjujo002Xx 4/4/2010, 22:25

Répondez s'il vous plait c'est assez important. trés happy
xXjujo002Xx
xXjujo002Xx
Simple Membre

Messages : 12
Inscription : 26/03/2010 Masculin Age : 26
Localisation : France
Version iWeb : A remplir!
Publication : Ftp integré

http://web.graphiz.free.fr

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par koeklin 4/4/2010, 23:30

Les deux premières pages données en lien contiennent le script à ajouter dans un fragment HTML. il vous faudra juste remplacer dans ce code l'url de l'image qui servira d'arrière-plan au menu.
Pour le reste, je découvre en même temps que vous. Pour ma part, j 'ai un soucis d'affichage pour la zone d'entête (celle qui correspond au titre) avec le premier lien (lien qui a très probablement servi de base au second) .

Nb : Les scripts ne sont opérationnels qu'en ligne, jamais dans iWeb.
koeklin
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par xXjujo002Xx 5/4/2010, 00:16

J'ai encore une question, où tape on le texte que je désire voir apparaître par dessus mon image backround.
xXjujo002Xx
xXjujo002Xx
Simple Membre

Messages : 12
Inscription : 26/03/2010 Masculin Age : 26
Localisation : France
Version iWeb : A remplir!
Publication : Ftp integré

http://web.graphiz.free.fr

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par koeklin 5/4/2010, 00:32

Ben tu vois, t'as le même problème que moi.
koeklin
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par xXjujo002Xx 5/4/2010, 00:34

ha dacc... je cherche et je te dit si je trouve...
xXjujo002Xx
xXjujo002Xx
Simple Membre

Messages : 12
Inscription : 26/03/2010 Masculin Age : 26
Localisation : France
Version iWeb : A remplir!
Publication : Ftp integré

http://web.graphiz.free.fr

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par xXjujo002Xx 5/4/2010, 01:04

est ce que ça serais possible que quelqu'un m'explique aussi comment faire une barre horizontale mais qui se déplace comme sur ce site. http://www.wyodor.net/_Demo/FloatingMenu/DynamicFloat.html


Code:
<left><FONT COLOR=#ffffff>Développé avec <a http://www.apple.com/fr/ilife/iweb/>Iweb</a></FONT></left>

<script language="Javascript" type="text/javascript">

<!--


parent.document.body.style.backgroundImage='url(http://s2.e-monsite.com/2010/04/04/11/Julien_4.gif)';
parent.document.body.style.backgroundRepeat='repeat-x';

parent.document.body.style.backgroundAttachment='fixed';

elem = parent.document.getElementById('nav_layer');

elem.style.backgroundImage='url(http://s2.e-monsite.com/2010/04/04/11/Julien_4.gif)';



elem.style.backgroundRepeat='repeat-x';

elem.style.position='fixed';

elem.style.zIndex='100';


elem = parent.document.getElementById('body_layer');

elem.style.marginTop='100px';


// -->
</script>

À vous de me dire quoi ajouter pour que cela soit possible.
xXjujo002Xx
xXjujo002Xx
Simple Membre

Messages : 12
Inscription : 26/03/2010 Masculin Age : 26
Localisation : France
Version iWeb : A remplir!
Publication : Ftp integré

http://web.graphiz.free.fr

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par koeklin 5/4/2010, 01:41

Bah elle me plait pas ta technique. je vais chercher autre chose

Wyodor utilise ce script pour faire fonctionner son menu :

http://www.wyodor.net/_Demo/duckmenu/DynamicFloatingMenu.js

C'est du fabriqué maison, sans doute opérationnel pour ce seul thème
copie et colle sur une nouvelle feuille appelée DynamicFloatingMenu.js
Il faut la mettre sur le serveur et récupérer (ou deviner) son URL

Puis il fait appel à ce fichier js par un code dans un fragment HTML

Code:
<script language="Javascript" type="text/javascript">
<!--

var headID = parent.document.getElementsByTagName("head")[0];
var newscript = parent.document.createElement('script');
newscript.type = 'text/javascript';
newscript.src = 'chemin/du/fichier/DynamicFloatingMenu.js';
headID.appendChild(newscript);

// -->
</script>
change chemin/du/fichier/DynamicFloatingMenu.js dans le code par son URL.

Edit :
Dans le code javascript j'ai vu (dans les premières lignes) qu'il futilisait une simple zone de texte pour faire son menu (id2) donc on devrait pouvoir la transposer à un autre thème et d'autre sorte de zone de texte
Code:
elem = parent.document.getElementById('id2');
cette zone de texte qui est pour moi est quelque peu quelconque au fond. Il est probable que l'on peut adapter son script à n'importe zone de texte du moment qu'on est son identifiant (id+nombre). mais pour le connaitre il faut publier et regarder le code source de la page.
Voici par ex le code d'une zone de texte dans laquelle est écrit le seul mot "metropolitan", elle porte comme identifiant id10
Faire une barre flotante Cmdf

je suppose que si je voulais transformer cette zone de texte en menu flottant
je devrais mettre cette ligne à la place de précédente
Code:
elem = parent.document.getElementById('id10');
koeklin
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par xXjujo002Xx 5/4/2010, 02:42

Heuuuu... là je t'avoue que je suis un peu largué, je ne suis certainement pas aussi perfectionné que toi en javascript ou en html.

c'est pas possible de me donner un code tout court. ça serait plus simple pour un débutant comme moi.
xXjujo002Xx
xXjujo002Xx
Simple Membre

Messages : 12
Inscription : 26/03/2010 Masculin Age : 26
Localisation : France
Version iWeb : A remplir!
Publication : Ftp integré

http://web.graphiz.free.fr

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par koeklin 5/4/2010, 10:39

Ben non y'a pas de code tout court, c'est de la bidouille. On s'adapte au cas par cas au code m€®️∂ÍΩ√€ d'iWeb trés happy . Sache que ç existe , c'est déjà ça.
Je pense que bientôt t'en sauras plus que moi. Wink
koeklin
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par xXjujo002Xx 5/4/2010, 10:45

je vais me contenter de ça pour le moment ...
xXjujo002Xx
xXjujo002Xx
Simple Membre

Messages : 12
Inscription : 26/03/2010 Masculin Age : 26
Localisation : France
Version iWeb : A remplir!
Publication : Ftp integré

http://web.graphiz.free.fr

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par koeklin 5/4/2010, 21:14

Je vais expliquer le code suivant :
http://dl.dropbox.com/u/3563737/Lycos/Fixed.html

D'abord vous devez afficher la disposition
iWeb > Barre de Menu > Présentation > Afficher la disposition
Rappel 1 : Une page iWeb se décompose en 4 parties :
  • une zone réservée au menu : nav_layer
  • une zone réservée au titre (l'entête) : header_layer
  • une zone réservée au contenu : body_layer
  • une zone réservée au pied de page : footer_layer (ici on s'en tape)


Rappel 2 : les zones de textes s'ajoute toujours dans le contenu de la page (body_layer ), pour les faire glisser dans une autre zone on maintient la touche cmd enfoncée.

Concernant Le titre blanc sur fond noir , Wyodor
  • efface la zone de texte de l'entête qui sert à afficher le titre de la page, cette zone de est normalement situé dans le header de page (header_layer).
  • ajoute une banale zone de texte dans zone réservée au menu (nav_layer)


Le script a pour but
de donner une image fixée à l'arrière plan de navigateur (1er paragraphe) = bande noire visible de part et d'autre de la page qui le plus souvent à son propre arrière plan.
Code:
parent.document.body.style.backgroundImage='url(chemin/de/l'/image.png)';
parent.document.body.style.backgroundRepeat='repeat-x';
parent.document.body.style.backgroundAttachment='fixed';
de fixer la zone reservée au menu (nav_layer) en haut de la page dans un plan très superficiel et lui donner la même image en l'arrière plan = la bande noire apparait manintenant continue.
Code:
elem = parent.document.getElementById('nav_layer');
elem.style.backgroundImage='url(chemin/de/l'/image.png)';
elem.style.backgroundRepeat='repeat-x';
elem.style.position='fixed';
elem.style.zIndex='100';
En fixa le menu dans un plan superficiel et en délaissant la zone d'entête la partie réservée au contenu de la page (body_layer) normalement située sous ses eux partie va remonter en tout en haut de la page pour éviter cela, il lui ajoute une marge supérieure de 100 px :
Code:
elem2 = parent.document.getElementById('body_layer');
elem2.style.marginTop='100px';
Cette dernière partie du code n'était pas indispensable, on aurait très bien pu se débrouiller sans, en ,sélectionner et décaler tous les élements du contenu pour qu'il soient env. une centaine de pixels plus bas
koeklin
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par el padre 6/4/2010, 19:11

j'ai la tête qui va exploser là langue
el padre
el padre
iWeb - Modo

Messages : 345
Inscription : 11/04/2008 Age : 43
Localisation : sur mes pieds ou presque
Version iWeb : A remplir!
Publication : Ftp integré

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par Yanik 6/4/2010, 19:48

Moi aussi tourner la tete
Pendant ce temps-là, je fais évoluer mon site vers la simplicité monacale. Au moins mes amis sous Windows sont content. confus
Cela dit, j'aimerais un beau site avec un beau menu facile à faire... dont les pages se chargent facilement. On verra plus tard (peut être) trés happy
Yanik
Yanik
iWeb - Modo

Messages : 916
Inscription : 03/11/2007 Masculin Localisation : France, Banlieue Parisienne Est 94
Version iWeb : A remplir!
Publication : MobileMe

http://web.me.com/kereol2/Site/Bienvenue.html

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par el padre 6/4/2010, 20:01

la simplicité et la sobriété sont les éléments clés d'un site réussi. Y a qu'à regarder ce que fait Madeline pour s'en rendre compte.
el padre
el padre
iWeb - Modo

Messages : 345
Inscription : 11/04/2008 Age : 43
Localisation : sur mes pieds ou presque
Version iWeb : A remplir!
Publication : Ftp integré

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par koeklin 6/4/2010, 21:12

Oui mais ce qu'il est fait plus haut, ça existe et ça m'intéresse.
Ça se fait en utilisant une chose le plus souvent : iWeb .
Parfois un client-FTP, parfois le navigateur (rien bien méchant)
Mais le but est surtout de faire des choses qu' iWeb ne peut faire sans avoir besoin d'éditer le code source de la page publiée.
koeklin
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par Madeline 6/4/2010, 21:21

Si j'avais le temps d'essayer de comprendre... je m'y intéresserai aussi... on ne sait jamais... trés happy


@ elpadre
merci pour le compliment... tourner la tete
Madeline
Madeline
iWeb - Modo

Messages : 1088
Inscription : 07/02/2008 Féminin Localisation : dans mes rêves
Version iWeb : 3
Publication : locale

http://madelinederiaz.com

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par keuk 4/4/2012, 19:50

Dans le code il y a un png super étroit qui s’étend ensuite à la longueur de la fenêtre.

J'aimerais utiliser le même procédé afin d'alléger les pages et remplacer mon image "d’arrière plan du navigateur". Je ne veux pas qu'elle se déplace lorsqu'on fait défiler la page juste qu'elle remplisse l'arrière plan sans passer par l'effet mosaïque proposé par l'inspecteur.

keuk
keuk
Simple Membre

Messages : 26
Inscription : 21/03/2012 Masculin Localisation : Marseille
Version iWeb : 3
Publication : Ftp integré

http://www.antoinefleury.com

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par koeklin 4/4/2012, 21:43

Sur mon site iWeb j'utilise la même image d'arrière-plan (même URL) sur toutes mes pages grâce à un javascript

mon site iWeb
http://iweb.debutersurmac.com/
Le mini-site qui me sert de démo et de tutoriel ci-dessous
http://iweb.debutersurmac.com/bg/bg.html
koeklin
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par keuk 4/4/2012, 21:48

TOP !!! Merci je vais lire ça à tête reposée.

Ca m'évitera d'avoir un fond de naviguateur dans des dimensions folles....

http://kranker.free.fr/DesignProduit/Product_design.html
keuk
keuk
Simple Membre

Messages : 26
Inscription : 21/03/2012 Masculin Localisation : Marseille
Version iWeb : 3
Publication : Ftp integré

http://www.antoinefleury.com

Revenir en haut Aller en bas

Faire une barre flotante Empty Re: Faire une barre flotante

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum