Faire une barre flotante

[xXjujo002Xx]

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/

[koeklin]

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

[xXjujo002Xx]

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.

[el padre]

ah tiens ça m'intéresse aussi

[xXjujo002Xx]

Répondez s'il vous plait c'est assez important.

[koeklin]

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.

[xXjujo002Xx]

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

[koeklin]

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

[xXjujo002Xx]

ha dacc... je cherche et je te dit si je trouve...

[xXjujo002Xx]

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.

[koeklin]

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

[xXjujo002Xx]

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.

[koeklin]

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 . Sache que ç existe , c'est déjà ça.
Je pense que bientôt t'en sauras plus que moi.

[xXjujo002Xx]

je vais me contenter de ça pour le moment ...

[koeklin]

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

[el padre]

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

[Yanik]

Moi aussi
Pendant ce temps-là, je fais évoluer mon site vers la simplicité monacale. Au moins mes amis sous Windows sont content.
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)

[el padre]

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.

[koeklin]

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.

[Madeline]

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


@ elpadre
merci pour le compliment...