| Créer un ascenseur pour naviguer sur le forum (messages) | |
|
|
Kuro
{ Membre }
Messages : 7
| Humfp ... J'comprend pas è_é. J'ai fait un test pour #top ça marche mais pour #bottom ça marche pas... T.T Pourtant j'avais déjà fait un ascenceur avec un widget flottant & ça marchais parfaitement .... CSS : - Code:
-
.ascenseur { position: fixed; top: 50px; left: 0px; border: 2px solid #66523D; -moz-border-radius: 0px 35px 35px 0px; -webkit-border-radius: 0px 35px 35px 0px; border-radius: 0px 35px 35px 0px; } HTML : - Code:
-
<div class="ascenseur"> <a href="#top"><img src="http://www.fastuces.toile-libre.org/fleche_haut.png" /></a><br /> <a href="#bottom"><img src="http://www.fastuces.toile-libre.org/fleche_bas.png" /></a> </div> | | |
|
| |
tekken
{ Membre }
Messages : 44
| extra, ça marche nikel, merci pour ce partage est il possible de faire la même chose sur un site ? edit : j'ai trouvé la réponse à ma question tout seul j'ai créé 2 ancre et je me suis servis de ces codes pour le css : - Code:
-
.ascenseur { width: 40px; float: right; position: absolute; top: 800px; right: 0px; }
<div class="ascenseur" align="right"> <a href="#haut"><img src="http://i82.servimg.com/u/f82/14/02/73/06/haut10.gif" border="none"/></a> <a href="#bas"><img src="http://i82.servimg.com/u/f82/14/02/73/06/haut10.gif" border="none"/></a> </div>
| | |
|
| |
LB670
{ Membre }
Messages : 25
| Merci pour ce tuto super sympa chez moi tout marche impec !!! | | |
|
| |
Fantasia
{ Membre }
Messages : 6
| Bonjour bonjour ! Et comment on fait pour placer un code avec l'ascenseur en bas à droite svp ?^^ Sion le tuto est super, bravo !!! Ps : j'ai accès au template, merci | | |
|
| |
Ami
{ Membre }
Messages : 89
| Bonjour,
J'ai fais le tuto sur mon forum sauf que j'ai un petit soucis. En fait tout marche sauf que mes flèche ne sont pas constamment sur l'écran, elle ne s'affichent qu'une fois arrivé en bas du forum. Moi j'aimerais que mes flèches soit présente tout le temps comme vous. MERCI BEAUCOUP d'avance.
J'ai bien mis la ligne position: fixed; /*--- Cette ligne permet de toujours afficher l'ascenseur à l'écran ---*/
Mais rien...
Voici mon fofo -> http://fdt2.forumotion.com/forum.htm?tt=1
Merki encore ^^ | | |
|
| |
Invité Invité
| remplace fixed par absolute | | |
|
| |
Ami
{ Membre }
Messages : 89
| Heu je crois que ça vient pas de la le problème... et je crois que c'est pour ça que mes images fonctionnent pas avec l'effet. c'est mon css qui a un problème je crois. Regardes ce qu'il me dit -> Erreur détectée Nous avons compté un nombre différent de "{" et de "}". Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum. Nous vous conseillons de relire votre code. Pourtant..je ne vois pas d'erreur... - Spoiler:
body { cursor: crosshair } a:hover { cursor:crosshair; }
a {font-variant: small-caps;}
a { text-decoration: none ; }
a.hover { text-decoration: none ; }
a.mainmenu{ text-shadow: #FFFFFF 1px 1px 1px; font-weight:bold; font-size: 12px; }
input,textarea,select { background: #EBDDDD; border: 1px #af6563 solid; border-radius: 9px 9px; -moz-border-radius: 9px;}
.forumline{ border: 1px dashed #af6563; }
a:hover{ text-decoration: none !important; }
a.forumlink, a.forumlink:hover{ display: block; text-shadow: #FFFFFF 1px 1px 1px; text-align: right; font-style: oblique; border-bottom: 2px dashed #af6563; text-decoration:none !important;}
.postbody { font-size: 12px; } .text { color:#000000; /*Couleur du texte de vos onglets*/ cursor:pointer; }
#cat_Gérance,#cat_Début,#cat_La ville,#cat_Le lycée,#cat_Flood,#cat_Hors RPG, /*nomonglet... à remplacer par le nom des onglets*/ { padding-top:4px; }
.spoiler_content { display: block; } .hidden .spoiler_content { display: none; }
.cat_forum { background-color: #000000; margin: auto; margin-bottom:30px; width:90%; }
.onglet { display:inline-block; margin-top:30px; text-decoration:none; !important cursor:pointer; }
.onglet li { float:left; list-style-type:none; margin-bottom:-20px; text-decoration:none; !important cursor:pointer; }
.onglet li:hover { text-decoration:none; !important cursor:pointer; }
.onglet li a { display:block; text-decoration:none; !important list-style-type: none; cursor:pointer; }
.onglet li a: hover { text-decoration:none; list-style-type:none; cursor:pointer; }
.onglet_actif { background: url('https://2img.net/h/oi52.tinypic.com/dfi0zn.jpg') no-repeat; /*URL de l'onglet étant actif*/ width:150px; /*Largeur de l'onglet étant actif*/ height:50px; /*Hauteur de l'onglet étant actif*/ cursor:pointer; }
.onglet_nactif { background:url('https://2img.net/h/oi55.tinypic.com/28w1pxe.jpg') no-repeat; /*URL de l'onglet étant inactif*/ width:100px; /*Largeur de l'onglet étant inactif*/ height:50px; /*Hauteur de l'onglet étant inactif*/ cursor:pointer; }
ul, li{ list-style: none; } .mon_onglet{ float: left; padding: 2px 10px; margin-right: 5px; color: #333; background: #EBDDDD; border: 1px solid #EBDDDD; cursor: pointer; margin-bottom: -1px; } .mon_onglet:hover{ background: ##EBDDDD; } .mon_onglet_selected{ float: left; padding: 2px 10px; margin-right: 5px; color: #333; background: #EBDDDD; border-top: 1px solid #EBDDDD; border-right: 1px solid #EBDDDD; border-left: 1px solid #EBDDDD; border-bottom: 1px solid #EBDDDD; cursor: pointer; margin-bottom: -1px; } .clear{ clear: both; } .mon_contenu{ color: #666; background: #EBDDDD; border: 2px solid #EBDDDD; padding: 2px; margin-left: -40px;
#mes_contenus, #mes_onglets{ width: 100%; } #mes_contenus, #mes_onglets{ width: 400px; } .opacity img { filter:alpha(opacity=50); -moz-opacity:0.5;opacity: 0.5; }
.opacity img:hover { filter:alpha(opacity=100); -moz-opacity:1;opacity: 1; }
.ascenseur { position: absolute; /*--- Cette ligne permet de toujours afficher l'ascenseur à l'écran ---*/ top: 50px; /*--- On le place à 50 px du haut de l'écran ---*/ left: 0px; /*--- On le place à 0px de la gauche de l'écran ---*/ background-color: #e7dfcf; /*--- On donne une couleur au fond ---*/ -moz-border-radius: 0px 35px 35px 0px; /*--- On arrondit les bords ---*/ -webkit-border-radius: 0px 35px 35px 0px; border-radius: 0px 35px 35px 0px; }
Oui bon je re édite pour confirme le problème vient de la balise qui n'est pas fermé au niveau de -> .mon_contenu{ color: #666; background: #EBDDDD; border: 2px solid #EBDDDD; padding: 2px; margin-left: -40px; et si je corrige l'erreur en écrivant -> .mon_contenu{ color: #666; background: #EBDDDD; border: 2px solid #EBDDDD; padding: 2px; margin-left: -40px;} ben ma page d'acceuil est toute déformée TT pouuu dégoutée!!! et tu sais quoi? le problème des images venait bien de ça! Donc ma petite analyse est bonne sauf que sur le coup je ne vois aucun moyen de corriger ma page d'accueil...Si ce n'est remettre comme avant et laisser tomber le reste... ALORS après tous ces problèmes et blabla! je me suis cassée la tête pour trouver la solution! et j'y suis arrivée!!! mais alors le chemin était long XD mais bon sur le coup je mérite 20/20 mdr tout fonctionne nickel sauf les images avec l'effet dans mes catégorie sur les sujets ça fonctionne mais pas dans l'endroit ou je veux le mettre à part ça c'est cool! ça marcheuuuuu | | |
|
| |
Leelewine
{ Membre }
Messages : 74
| Magnifique tuto !! merci beaucoup !!! Je l'ai placé en haut à gauche, ça fait trop beau ! merci !! | | |
|
| |
Passion406
{ Membre }
Messages : 4
| Bonjour à tous !
Le Tuto est bien sympa, je cherchais quelque chose dans le genre mais pas pour passer de #top à #bottom mais plutôt pour qu'à chaque clic sur une flèche je monte ou descende de 50px avec valeur de pixels modifiable, non lié à un élément de la page.
Je suis en PunBB et accès OK aux templates.
Une idée pour réaliser cette modif ?
Merci d'avance.
Sébastien | | |
|
| |
Rosalie Hale
{ Membre }
Messages : 89
| Merci pour le tuto, mais je me demandais ou nous pouvions trouver des images pour les fleches :S | | |
|
| |
.Little Lady
{ Membre actif }
Messages : 564
| - .Little Lady a écrit:
- Là avec ce code, dès qu'on clique sur la flèche on arrive direct en haut ou en bas. Moi je chercherais, si possible, un code qui permettrait, lorsqu'on clique sur la flèche que la page monte ou descende au-fur et à mesure. Un peu comme avec le scroll et comme sur ton fow' Basil.
| | |
|
| |
Cuian
{ Membre }
Messages : 22
| Bonjour, tout d'abord merci de cette excelent tuto qui m'a permit de réaliser un ascenseur comme je l'espérais =). Mais il y a un problème depuis aujourd'hui, les flèches ne marchent plus sur mozilla firefox, elles sont devenus incliquables. Auriez-vous une idée ? Voici mes codes: - Spoiler:
- Code:
-
.ascenseur { position: fixed; top: 250px; right: 0px; background-color: none -moz-border-radius: 0px 35px 35px 0px; -webkit-border-radius: 0px 35px 35px 0px; border-radius: 0px 35px 35px 0px; }
<div class="ascenseur"> <a href="#top"><img src="http://i23.servimg.com/u/f23/15/13/04/74/aiguil12.png"></a><br /> <a href="#bottom"><img src="http://i23.servimg.com/u/f23/15/13/04/74/aiguil13.png"></a> </div>
| | |
|
| |
Invité Invité
| Salut aurais-tu un aperçu pour que je puisse mieux voir le problème? | | |
|
| |
Cuian
{ Membre }
Messages : 22
| http://gintama.forumactif.com/forum.htm#top
Voici le lien | | |
|
| |
Hiro
Ninja Codeur
Messages : 1179
| Je suis sous FF et tes flèches fonctionnent très bien | | |
|
| |
Cuian
{ Membre }
Messages : 22
| sois je suis pas à jour, soit y'a un bug, mais pour moi et d'autre ça ne marche pas =s | | |
|
| |
Hiro
Ninja Codeur
Messages : 1179
| |
| |
Cuian
{ Membre }
Messages : 22
| j'ai la 3.5.4 je crois o_o | | |
|
| |
voltie
{ Membre }
Messages : 104
| Moi rien ne s"affiche, trop bizarre ? -_- normale si je me goure entre - Code:
-
<body> et </body> ^^ Arf Donc je confirme sa fonctionne mdr ^^ | | |
|
| |
Crazy-GirL
{ Membre }
Messages : 88
| |
| |
Amy-Lee
{ Membre }
Messages : 22
| Great Maintenant reste juste à modifier les flèches x) | | |
|
| |
xodramm
{ Membre }
Messages : 254
| wow je suis plutôt fière de moi ! J'ai réussit du premier coup encore merci pour ce tuto ^^ | | |
|
| |
-Yuffie-Kisaragi-
{ Membre }
Messages : 28
| Yeah super merci /o/ C'est pratique \o/ | | |
|
| |
Yeon Gi
{ Membre }
Messages : 293
| Merci super tuto ^^ Mais j'aurais aimé savoir tout comme Little Lady comment faire pour que la montée ou la descente se fasse comme un scroll | | |
|
| |
Misa-misa
{ Membre }
Messages : 33
| Bonjour est-il possible pour cet astuce de créer une autre ancre que #top et #bottom?
Mon header étant assez grand j'aimerais que mon ascenseur arrive au niveau de la barre de navigation et pas tout en haut du forum...
C'est possible? | | |
|
| |
Contenu sponsorisé
| |
| |
| Créer un ascenseur pour naviguer sur le forum (messages) | |
|