Faire une barre flotante
+2
koeklin
xXjujo002Xx
6 participants
Page 1 sur 1
Faire une barre flotante
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/
http://fr.audiofanzine.com/logiciel-musique-divers/maize-soft/Maize-Sampler/
Re: Faire une barre flotante
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
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
Re: Faire une barre flotante
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.
Re: Faire une barre flotante
ah tiens ça m'intéresse aussi
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é
Re: Faire une barre flotante
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.
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.
Re: Faire une barre flotante
J'ai encore une question, où tape on le texte que je désire voir apparaître par dessus mon image backround.
Re: Faire une barre flotante
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
À vous de me dire quoi ajouter pour que cela soit possible.
- 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.
Re: Faire une barre flotante
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
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
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
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>
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');
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');
Re: Faire une barre flotante
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.
c'est pas possible de me donner un code tout court. ça serait plus simple pour un débutant comme moi.
Re: Faire une barre flotante
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.
Je pense que bientôt t'en sauras plus que moi.
Re: Faire une barre flotante
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 :
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
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.
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';
- 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';
- Code:
elem2 = parent.document.getElementById('body_layer');
elem2.style.marginTop='100px';
Re: Faire une barre flotante
j'ai la tête qui va exploser là
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é
Re: Faire une barre flotante
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)
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)
Re: Faire une barre flotante
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- iWeb - Modo
- Messages : 345
Inscription : 11/04/2008 Age : 43
Localisation : sur mes pieds ou presque
Version iWeb : A remplir!
Publication : Ftp integré
Re: Faire une barre flotante
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.
Ç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.
Re: Faire une barre flotante
Si j'avais le temps d'essayer de comprendre... je m'y intéresserai aussi... on ne sait jamais...
@ elpadre
merci pour le compliment...
@ elpadre
merci pour le compliment...
Re: Faire une barre flotante
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.
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.
Re: Faire une barre flotante
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
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
Re: Faire une barre flotante
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
Ca m'évitera d'avoir un fond de naviguateur dans des dimensions folles....
http://kranker.free.fr/DesignProduit/Product_design.html
Sujets similaires
» barre de menu
» Barre de progression ?
» barre de défilement
» barre de menu
» Barre de lecture des films
» Barre de progression ?
» barre de défilement
» barre de menu
» Barre de lecture des films
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|