Bonjour, je souhaite créer une barre verticale flottante sur la gauche de ma page web avec des flèches de navigation haut, bas, page précédente, etc...comme sur ce site https://www.immortelleegypte.com/ quelqu'un aurait il un code javascript correspondant à ça? merci d'avance didier

Créer barre verticale flottante sur la gauche [Résolu]

Réponse 1 / 23

KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
14 mars 2009 à 14:02

La meilleure manière d'apprendre le xHTML/CSS, c'est d'aller sur le site du zero ;)

En gros pour un menu du genre, tu as besoin de plusieurs éléments :

Plusieurs icones de même taille qui vont servir de boutons, une div pour les assembler tous, des liens à mettre dessus.

Tes images devraient faire 50x50px environs.

Imaginons que tu aies 3 liens à faire : un pour retourner en haut de page, un pour aller en bas de page et un pour revenir à l'accueil (les bounton pg préc et pg suiv me semblent faire double emploi avec ceux du navigateur...). Tu auras besoin, en plus de tes boutons de créer des ancres nommées en haut de page et en bas de page. Il s'agit d'un id que tu vas placer sur la première balise en haut de page et sur la dernière en bas de page. Je vais ici les mettre sur des <div> vides, mais ce n'est pas à faire "en vrai".

<div id="top"></div>

<div id="bottom"></div>

<div id="menu">
<a href="#top" title="Retour en haut de page"><img class="menu_item" src="fleche_haut.jpg" alt="Haut de Page"/></a>
<a href="index.html" title="Retour à l'accueil"><img class="menu_item" src="maison.jpg" alt="Accueil"/></a>
<a href="#bottom" title="Aller en bas de page"><img class="menu_item" src="fleche_bas.jpg" alt="Bas de Page"/></a>
</div>

Le CSS donnera un truc du genre :

#menu {
width: 50px;
height: 150px;
position: fixed center left;
}
.menu_item {
display: block;
}

a {
text-decoration: none;
border: none;
}

Voilà, évidemment à modifier largement selon tes besoins. N'hésite pas à aller jeter un oeil sur le site du zéro pour mieux comprendre le code et apprendre à le faire toi même ;)

Bonne journée, et n'hésite pas à poser tes questions si besoin !

didier6526 Messages postés 152 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 10 mars 2025 4
15 mars 2009 à 21:40

salut

j'avance mais comme je suis sur un site créé avec Guppy il faut que je fasse avec le code existant.

je veux que le css de ce code soit dans le code plutôt que dans la feuille de style css pour ne pas avoir à la corriger à chaque mise à jour de guppy..

voila le code que j'ai inséré dans le fichier hpage.inc qui gère l'affichage de la page principale d'un site sous Guppy.

<!-- Début essai barre à gauche --> 
  <div id="menu">
  <a href=#top title="Aller en haut de page - Go up" >
   <img style="z-index : 200;   border: 0px ;   position: fixed;
   top:50%;   left:0px;   width:25px;   height:25px"   class="menu_item" src="http://chazaldidier.free.fr/micro_ardoise_haut25x25.jpg" alt="haut de page"/></a> 
  <a href=#foot  title="Aller en bas de page - Go down" >
   <img style="z-index : 200;    border: 0px ; position: fixed;
   top:55%;   left:0px;   width:25x;   height:25px"   class="menu_item" src="http://chazaldidier.free.fr/micro_ardoise_bas25x25.jpg" alt="bas de page"/></a> 
  </div> 
<!-- FIN essai barre à gauche -->

j'ai trouvé 2 ancres existant déjà dans guppy #top et #foot

il y a déjà dans les css de guppy une ligne

a { /* lien */
    color: ".$lien[0].";
    text-decoration: none;
}

ça marche dans mon site d'essais http://chazaldidier.free.fr/index.php?lng=fr

mais
1) je n'ai pas de class menu_item et ça marche quand même, que dois je modifier?
2) j'ai essayé position fixed center left; ça me met les boutons en haut et ça ne fait plus une position bloquée sur l'écran, c'est pas grave, ça marche en spécifiant la position en pixels à gauche de l'écran
3) j'ai lu que la position fixed ne marchait pas sous IE6, que se passe-t-il pour ceux qui ont IE6? faut-il ajouter une ligne de code ressemblant à

<!--[if !IE]> <-->
   <blablabla/>
<!--> <![endif]-->

merci pour ton aide
didier

Réponse 2 / 23

KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
14 mars 2009 à 12:15

Salut !

Pourquoi faire ça en JavaScript quand on peut le faire en pur CSS ?

Il suffit de créer ta barre d'icônes et de mettre en {position: fixed center left;} ;)

Fais tout de même attention à ne pas baser l'ensemble de ta navigation là-dessus. C'est pratique pour accélérer la navigation, mais ça risque de perdre un peu les internautes les moins aguerris...

mikette
14 janv. 2010 à 01:28

perdu barre de volume horizantale verte window xp

merci à l`avance,

mikette

Réponse 3 / 23

KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
16 mars 2009 à 23:00

J'ai Multiple IEs sur mon PC au boulot. Je te dirai ça demain...

Réponse 4 / 23

didier6526 Messages postés 152 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 10 mars 2025 4
17 mars 2009 à 08:05

salut
je viens de tester mon code sur opera
problème: les 2 boutons sons superposés
il semble qu'il ne reconnaisse pas le vspace que j'ai mis dans le bouton du bas.
comment faire pour que les 2 boutons soient l'un au dessus de l'autre en n'ayant qu'une seule classe fixed pour les 2?

merci
didier

Réponse 5 / 23

KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
17 mars 2009 à 08:35

Tu les rassemble dans une <div> sur laquelle tu appliques la position: fixed ;)

Réponse 6 / 23

didier6526 Messages postés 152 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 10 mars 2025 4
29 mars 2009 à 22:28

salut
encore moi

j'ai un code en CSS pur qui a l'air de marcher avec FF3 et IE7 sur

http://mycomenius.free.fr/index.php?lng=fr

//<!-- DEBUT essai barre à gauche --> 
echo "<a name='foot'></a>";
?>
<div  style="position: fixed; top: 360px; left: 0px; z-index: 200; text-align:left;">
  <a href=#top  title="Aller en haut de page - Go up" >
   <img style="z-index: 200; border: 0px;"
    
    src="<?php echo CHEMIN; ?>inc/img/general/micro_ardoise_haut20x20.jpg" alt="haut de page"/></a>
    <br />
  <a href=#foot  title="Aller en bas de page - Go down" >
   <img style="z-index: 200; border: 0px;margin-top:10px;"
    
    src="<?php echo CHEMIN; ?>inc/img/general/micro_ardoise_bas20x20.jpg" alt="bas de page"/></a>
 </div>
<?php
//<!-- FIN essai barre à gauche -->

mais je ne sais pas ce que ça donne avec IE6
faudra-t-il ajouter une condition IF IE6 etc..... pour éviter un bug sous IE6
merci et A+
didier

Réponse 7 / 23

didier6526 Messages postés 152 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 10 mars 2025 4
14 mars 2009 à 12:22

salut
n'aurais tu pas un code un peu plus détaillé quelque part.
je ne suis pas le pro du css et de l'html
je commence à savoir modifier des scripts mais je n'en suis pas encore à les créer de toutes pièces

merci
didier

Réponse 8 / 23

KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
16 mars 2009 à 07:18

1) je n'ai pas de class menu_item et ça marche quand même, que dois je modifier?

Si ça marche, ne touche plus à rien ;)

2) j'ai essayé position fixed center left; ça me met les boutons en haut et ça ne fait plus une position bloquée sur l'écran, c'est pas grave, ça marche en spécifiant la position en pixels à gauche de l'écran

Idem, si ça marche, ne change rien...

3) j'ai lu que la position fixed ne marchait pas sous IE6, que se passe-t-il pour ceux qui ont IE6?

N'oublie pas que Google est ton ami ;) En y entrant "position fixed IE6" on peut trouver ceci : http://www.ab-d.fr/date/2008-02-11/

N'hésite pas si tu as d'autres questions !

Réponse 9 / 23

didier6526 Messages postés 152 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 10 mars 2025 4
16 mars 2009 à 22:27

salut encore
à propos de class menu_item ça marche sans que je déclare cette classe dans le css mais ça ne marche pas si je ne l'appelle pas dans le code de l'image.
peux tu m'expliquer?

si cela fait appel à du css de guppy ça risque de ne plus marcher un jour si le css est modifié lors d'une mise à jour. j'aimerais bien que cela fasse appel à une classe que je définis moi même

j'ai rajouté du code pour empêcher le plantage sous IE6. est tu équipé pour me dire si ça marche avec IE6?

mon site d'essais: http://chazaldidier.free.fr/index.php?lng=fr
mon code dans le <head>

<!-- Code CSS pour Firefox, Safari, Opera, Internet Explorer 7... -->	
	   <style type="text/css" media="screen">
		
	#fixed {
		position: fixed;	
		top:50%; 	     
                  z-index : 200				  
	}
	
	   </style>	
	
	<!-- Code CSS pour Internet Explorer 6 -->	
	   <!--[if lte IE 6]>
	   <style type="text/css" media="screen">
	
	   #fixed {
		position: absolute;
		top: expression((document.documentElement.scrollTop || document.body.scrollTop) + this.offsetHeight - this.offsetHeight);
	      }
	
	   </style>
	<![endif]-->

mon code dans le <body>

!-- Début essai barre à gauche --> 
  <div id="fixed">
  <a href=#top title="Aller en haut de page - Go up" >
   <img style="z-index : 200;   border: 0px ;   position: fixed;
    class="menu_item" src="http://chazaldidier.free.fr/micro_ardoise_haut25x25.jpg" alt="haut de page"/></a> 
  <a href=#foot  title="Aller en bas de page - Go down" >
   <img vspace="35" style="z-index : 200;    border: 0px ; position: fixed;
      class="menu_item" src="http://chazaldidier.free.fr/micro_ardoise_bas25x25.jpg" alt="bas de page"/></a> 
  </div> 
<!-- FIN essai barre à gauche -->

faut il modifier quelque chose?
merci et A+
didier

Réponse 10 / 23

didier6526 Messages postés 152 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 10 mars 2025 4
17 mars 2009 à 10:18

salut
peux tu préciser?
ils sont déja dans un div en position fixed

<div id="fixed">
  <a href=#top title="Aller en haut de page - Go up" >
   <img style="z-index : 200;   border: 0px ;   position: fixed;
    class="menu_item" src="http://chazaldidier.free.fr/micro_ardoise_haut25x25.jpg" alt="haut de page"/></a> 
  <a href=#foot  title="Aller en bas de page - Go down" >
   <img vspace="35" style="z-index : 200;    border: 0px ; position: fixed;
      class="menu_item" src="http://chazaldidier.free.fr/micro_ardoise_bas25x25.jpg" alt="bas de page"/></a> 
  </div>

A+
didier

Réponse 11 / 23

KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
17 mars 2009 à 11:58

Atta, j'étais pas réveillé hier ou quoi ? C'est quoi cet attribut vspace ?!?

Réponse 12 / 23

didier6526 Messages postés 152 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 10 mars 2025 4
17 mars 2009 à 12:57

vspace = vertical space
c'est ce qui m'a permis de mettre un espace vertical entre les 2 boutons.
si je ne le mets pas ils sont superposés
j'ai trouvé ça sur un tutoriel html et ça marche nickel avec firefox

comment il faut faire?
2 div dans un div????
A+
didier

Réponse 13 / 23

KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
17 mars 2009 à 17:36

Plutôt que ce vspace, mets un attribut css margin-top. Essaie de supprimer le position: fixed sur les boutons, ce n'est pas utile. Il est déjà sur ta <div>... et puis dis-moi ce que ça donne.

Réponse 14 / 23

didier6526 Messages postés 152 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 10 mars 2025 4
17 mars 2009 à 21:40

salut
si je mets un margin-left comme ci dessous ça m'écarte les 2 flèches qui restent sur la même ligne

<!-- Début essai barre à gauche --> 
  <div id="fixed">
  <a href=#top  title="Aller en haut de page - Go up" >
   <img style="z-index : 200;   border: 0px ; "  
    class="menu_item" src="http://chazaldidier.free.fr/micro_ardoise_haut25x25.jpg" alt="haut de page"/></a> 
  <a  href=#foot  title="Aller en bas de page - Go down" >
   <img   style="margin-left:40px;z-index : 200;    border: 0px ; "
      class="menu_item" src="http://chazaldidier.free.fr/micro_ardoise_bas25x25.jpg" alt="bas de page"/></a> 
  </div> 
<!-- FIN essai barre à gauche -->

si je mets un margin-top comme ci dessous ça me descend les 2 flèches vers le bas et elles restent sur la même ligne

!-- Début essai barre à gauche --> 
  <div id="fixed">
  <a href=#top  title="Aller en haut de page - Go up" >
   <img style="z-index : 200;   border: 0px ; "  
    class="menu_item" src="http://chazaldidier.free.fr/micro_ardoise_haut25x25.jpg" alt="haut de page"/></a> 
  <a  href=#foot  title="Aller en bas de page - Go down" >
   <img   style="margin-top:200px;z-index : 200;    border: 0px ; "
      class="menu_item" src="http://chazaldidier.free.fr/micro_ardoise_bas25x25.jpg" alt="bas de page"/></a> 
  </div> 
<!-- FIN essai barre à gauche -->

je n'arrive pas à en descendre l'une en dessous de l'autre
A+
didier

Réponse 15 / 23

KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
17 mars 2009 à 21:58

As-tu mis

#menu_item {
display: block;
}

Dans ton css ?

Réponse 16 / 23

didier6526 Messages postés 152 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 10 mars 2025 4
17 mars 2009 à 22:10

je l'ai rajouté
ça faisait plusieurs messages où je me demandais où était définie cette classe.

mais ça ne change rien, je pense que je ne dois pas mettre mon margin-top:200px au bon endroit.

mon css:

#fixed {
		position: fixed;
		top:50%;
                  z-index : 200;				  
	}
    #menu_item { 
                  display: block; 
         }

mon code:

<div id="fixed">
  <a href=#top  title="Aller en haut de page - Go up" >
   <img style="z-index : 200;   border: 0px ; "  
    class="menu_item" src="http://chazaldidier.free.fr/micro_ardoise_haut25x25.jpg" alt="haut de page"/></a> 
  <a  href=#foot  title="Aller en bas de page - Go down" >
   <img   style="margin-top:200px;z-index : 200;    border: 0px ; "
      class="menu_item" src="http://chazaldidier.free.fr/micro_ardoise_bas25x25.jpg" alt="bas de page"/></a> 
  </div>

A+
didier

Réponse 17 / 23

KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
18 mars 2009 à 07:18

Ca me semble correct mais je peux louper un truc. Je testerai le code tout à l'heure. Je te dis quoi...

Réponse 18 / 23

didier6526 Messages postés 152 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 10 mars 2025 4
19 mars 2009 à 16:48

salut
ce n'est pas un problème d'interférence avec guppy

j'ai testé sur ma page index.html (en de hors de guppy)
j'obtiens les mêmes icones côte à côte

A+
didier

Réponse 19 / 23

didier6526 Messages postés 152 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 10 mars 2025 4
19 mars 2009 à 17:33

salut.
pour faire avancer le schmilblik
je viens d'essayer ça: 2 div l'un au dessus de l'autre avec 2 class fixed haut et bas.
ça marche sous firefox
par contre sous IE les 2 flèches sont l'une au dessus de l'autre en haut au centre de l'écran

<!-- Code CSS pour Firefox, Safari, Opera, Internet Explorer 7... -->	
	   <style type="text/css" media="screen">
		
	#fixed_haut {
		position: fixed;
		top:50%;
                  z-index : 200;				  
	}
	#fixed_bas {
		position: fixed;
		top:55%;
                  z-index : 200;				  
	}
    #menu_item { 
                  display: block; 
         } 
	   </style>	
	
	<!-- Code CSS pour Internet Explorer 6 -->	
	   <!--[if lte IE 6]>
	   <style type="text/css" media="screen">
	
	   #fixed {
		position: absolute;
		top: expression((document.documentElement.scrollTop || document.body.scrollTop) + this.offsetHeight - this.offsetHeight);
	      }
	
	   </style>
	<![endif]-->
</head>


<body<?php if (!empty($loader)) { echo " onload=\"".$loader."\""; } if (!empty($unloader)) { echo " onunload=\"".$unloader."\""; } ?>>

<!-- Début essai barre à gauche --> 
  <div id="fixed_haut">
     <a href=#top  title="Aller en haut de page - Go up" >
        <img style="z-index : 200;   border: 0px ; "  
         class="menu_item" src="http://chazaldidier.free.fr/micro_ardoise_haut25x25.jpg" alt="haut de page"/></a>      
  </div> 
  
  <div id="fixed_bas">     
     <a  href=#foot  title="Aller en bas de page - Go down" >
        <img   style="margin-top:10px;z-index : 200;    border: 0px ; "
         class="menu_item" src="http://chazaldidier.free.fr/micro_ardoise_bas25x25.jpg" alt="bas de page"/></a> 
  </div> 
<!-- FIN essai barre à gauche -->

merci
A+
didier

Réponse 20 / 23

KorriganVehuiah Messages postés 171 Date d'inscription jeudi 2 octobre 2008 Statut Membre Dernière intervention 22 mars 2009 70
22 mars 2009 à 14:26

Salut didier, rassures-toi je ne t'oublie pas mais j'ai moi-même des petits problèmes de PC donc forcément moins dispo...

didier6526 Messages postés 152 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 10 mars 2025 4
23 mars 2009 à 21:57

salut encore
j'ai adapté le code précédent dans une page appelée http://chazaldidier.free.fr/essai_div.html

ça marche sous firefox et sous IE7 mais je ne sais pas comment intégrer ça dans mon site sous guppy car le body est déjà défini dans le css de guppy

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
 <head>
 <title>DIV Fixed sur la page</title>
 <style type="text/css">
 /* CSS pour le BODY */
 body {
 margin : 0px;
 padding : 0px;
 overflow :hidden;
 }
 /* CSS pour le DIV BODY du document */
 #D_BODY {
 position : relative;
 height : 100%;
 width : 100%;
 overflow : auto;
 }
 /* CSS pour le DIV FLECHES ou autre */
 #FLECHES {
 position : absolute;
 top : 50%;
 left : 5px;
 }
.menu_item { 
                  display: block; 
         } 
 </style>
 </head>
 <body>
 <!-- Dans le BODY on intégre les DIVs comme ceci -->
 <div id="D_BODY">
 <!-- Mettre toute la page dans le DIV -->
           <div id="top"><!--ancre nommée du haut--></div>          
					<!-- code pour afficher plein de lignes -->
 <script type="text/javascript" language="JavaScript">
 var Html="";
 for( var i=0; i < 150; i++)
 Html += '<br>Ligne '+ (i+1);
 document.write( Html);
 </script>
                    <!-- FIN de code pour afficher plein de lignes -->
		<div id="foot"><!--ancre nommée du bas--></div>
			
 </div>
 <!-- le DIV HAUT doit étre mis après pour
 ne pas passer sous les ScrollBars -->
 <div id="FLECHES">
 <!-- Mettre votre super Logo ou Menu dans ce DIV -->
 <a href=#top  title="Aller en haut de page - Go up" >
   <img style="z-index : 200;   border: 0px ; "  
    class="menu_item"
    src="http://chazaldidier.free.fr/micro_ardoise_haut25x25.jpg" alt="haut de page"/></a> 
	
  <a href=#foot  title="Aller en bas de page - Go down" >
   <img style="z-index : 200;   border: 0px ; margin-top:20px;"  
    class="menu_item"
    src="http://chazaldidier.free.fr/micro_ardoise_bas25x25.jpg" alt="haut de page"/></a> 
 </div>
 
 </body>
 </html>

A+
didier

didier6526 Messages postés 152 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 10 mars 2025 4 > didier6526 Messages postés 152 Date d'inscription mardi 1 janvier 2008 Statut Membre Dernière intervention 10 mars 2025
29 mars 2009 à 16:41

salut encore
en attendant de trouver une solution en css j'ai trouvé du javascript qui marche avec IE6 IE7 et FF3 sur mon site d'essai construit sous guppy 4.6.5 http://chazaldidier.free.fr/index.php?lng=fr

par contre le même code placé au même endroit dans la body du fichier qui gère l'affichage de la page principale sur mon site principal créé sous guppy 4.6.9 ne marche pas, les icones ne flottent plus: http://mycomenius.free.fr/index.php?&lng=fr
ça semble complètement absurde.
je te donne le code encadré par les lignes du fichier dans lequel j'ai inséré ce code.
merci et A+
didier


<body<?php if (!empty($loader)) { echo " onload=\"".$loader."\""; } if (!empty($unloader)) { echo " onunload=\"".$unloader."\""; } ?>>

<!-- Début essai barre à gauche --> 
  <div align="left" id="watermark" style="position: absolute;  z-index:200; visibility:hidden; width:25px;">
<a href=#top title="Aller en haut de page - Go up" style="text-decoration:none;cursor:hand;">
<img  src="http://chazaldidier.free.fr/micro_ardoise_haut25x25.jpg" width="25" height="25" border="0" alt="haut de page"></a>

<a href=#foot title="Aller en bas de page - Go up" style="text-decoration:none; cursor:hand; ">
<img  style="margin-top:10px;"  src="http://chazaldidier.free.fr/micro_ardoise_bas25x25.jpg" width="25" height="25" border="0" ; alt="bas de page"></a>
</div>
<script language="javascript">
function SetStatic(){
if(document.all){watermark.style.pixelTop=document.body.scrollTop+300;}
else if(document.layers){eval(document.watermark.top=eval(window.pageYOffset+300));}
else if(document.getElementById && !document.all){document.getElementById("watermark").style.top=window.pageYOffset+300;}
}

setInterval("SetStatic()",1);

function position() {
if(document.all){
watermark.style.pixelLeft = 2;
setTimeout('watermark.style.visibility = "visible"', 50);}
else if(document.layers){
document.watermark.left+=2;
setTimeout('document.watermark.visibility = "visible"', 50);}
else if(document.getElementById && !document.all){
document.getElementById("watermark").style.left=2;
setTimeout('document.getElementById("watermark").style.visibility = "visible"', 50);}
}
position();
</script>
<!-- FIN essai barre à gauche --> 


<div id="page">

Créer barre verticale flottante sur la gauche

23 réponses

Discussions similaires