Faire une barre flotante

Voir le sujet précédent Voir le sujet suivant Aller en bas

Faire une barre flotante

Message par xXjujo002Xx le 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/
avatar
xXjujo002Xx
Simple Membre

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

http://web.graphiz.free.fr

Revenir en haut Aller en bas

Re: Faire une barre flotante

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


-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
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

Re: Faire une barre flotante

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


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
avatar
xXjujo002Xx
Simple Membre

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

http://web.graphiz.free.fr

Revenir en haut Aller en bas

Re: Faire une barre flotante

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

ah tiens ça m'intéresse aussi

-------------------


mon blog: http://web.me.com/blaisecorneloup/equity/
avatar
el padre
iWeb - Modo

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

Revenir en haut Aller en bas

Re: Faire une barre flotante

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

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

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

http://web.graphiz.free.fr

Revenir en haut Aller en bas

Re: Faire une barre flotante

Message par koeklin le 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.

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
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

Re: Faire une barre flotante

Message par xXjujo002Xx le 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.
avatar
xXjujo002Xx
Simple Membre

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

http://web.graphiz.free.fr

Revenir en haut Aller en bas

Re: Faire une barre flotante

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

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

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
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

Re: Faire une barre flotante

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

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

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

http://web.graphiz.free.fr

Revenir en haut Aller en bas

Re: Faire une barre flotante

Message par xXjujo002Xx le 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.
avatar
xXjujo002Xx
Simple Membre

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

http://web.graphiz.free.fr

Revenir en haut Aller en bas

Re: Faire une barre flotante

Message par koeklin le 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


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');

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
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

Re: Faire une barre flotante

Message par xXjujo002Xx le 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.
avatar
xXjujo002Xx
Simple Membre

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

http://web.graphiz.free.fr

Revenir en haut Aller en bas

Re: Faire une barre flotante

Message par koeklin le 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

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
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

Re: Faire une barre flotante

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

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

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

http://web.graphiz.free.fr

Revenir en haut Aller en bas

Re: Faire une barre flotante

Message par koeklin le 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

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
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

Re: Faire une barre flotante

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

j'ai la tête qui va exploser là langue

-------------------


mon blog: http://web.me.com/blaisecorneloup/equity/
avatar
el padre
iWeb - Modo

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

Revenir en haut Aller en bas

Re: Faire une barre flotante

Message par Yanik le 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
avatar
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

Re: Faire une barre flotante

Message par el padre le 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.

-------------------


mon blog: http://web.me.com/blaisecorneloup/equity/
avatar
el padre
iWeb - Modo

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

Revenir en haut Aller en bas

Re: Faire une barre flotante

Message par koeklin le 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.

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
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

Re: Faire une barre flotante

Message par Madeline le 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

-------------------
Mon site: http://madelinederiaz.com
Le projet «D'un printemps à l'autre»: http://www.postcard.madelinederiaz.com/site/Accueil.html
Graphisme et illustration: http://portfolio.madelinederiaz.com
L'art et la culture: http://forum.ravir.ca/fr/Accueil.html
avatar
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

Re: Faire une barre flotante

Message par keuk le 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.

avatar
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

Re: Faire une barre flotante

Message par koeklin le 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

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
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

Re: Faire une barre flotante

Message par keuk le 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
avatar
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

Re: Faire une barre flotante

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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