| | Créer un ascenseur pour naviguer sur le forum (messages) |  |
|
|
 ♠ Yowa ♫ 
{ Membre actif }
 Messages : 349
 | Merci pour ce tutoriel qui va surement servir pour beaucoup!
Je savais faire les ancres mais pas ça! :p | | |
|
| | |
Liliana
{ Membre actif }
 Messages : 997
| - Citation :
- Et si vous regardez en haut à droite, vous aurez un exemple de ce que ça donne
Chez moi c'est plutôt à gauche  Mais sympa le tuto Basil  | | |
|
| | |
kun
{ Membre }
Messages : 53
| Merci , trés bien expliqué | | |
|
| | |
Basil Hawkins
{ Membre hyper-actif }
Messages : 2912
| Mais de rien, content que ça vous serve  Liliana : Oups, erreur corrigée  (tu sais moi, la droite et la gauche ... ) EDIT Liliana (pour une fois que j'édite un de tes messages xD) : Mouais mouais .. Avoue qu'en fait tu faisais pas attention xD | | |
|
| | |
.Little Lady
{ Membre actif }
Messages : 564
| Il faut le mettre où le code HTML ?? | | |
|
| | |
Basil Hawkins
{ Membre hyper-actif }
Messages : 2912
| Ah oui, j'ai oublié de le préciser. Dans "overall_footer", juste avant "/body"  | | |
|
| | |
.Little Lady
{ Membre actif }
Messages : 564
| Et comment faire, pour que l'ascenseur monte au-fur et à mesure et non pas d'un coup ?? | | |
|
| | |
Basil Hawkins
{ Membre hyper-actif }
Messages : 2912
| |
| | |
.Little Lady
{ Membre actif }
Messages : 564
| 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. | | |
|
| | |
Lou'N@il
{ Membre }
Messages : 43
| déja un grand merci pour ce code ces cool mais oui j'ai deux questions  déja mes deux images sont l'une a coter de l'autre et pas en dessous de l'autre comment faire et je trouve les images trop haute a ma droite (jai mis a droite plus jolie ) sa tombe pile sur mon header cela ne fait pas très esthétique merci merci | | |
|
| | |
.Little Lady
{ Membre actif }
Messages : 564
| Il faut modifier les valeurs de top et right pour décaler l'ascenseur et dans ton template tu dois mettre un juste après le premier lien comme ça: - Code:
-
<div class="ascenseur" align="center"> <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> | | |
|
| | |
Kimi267
{ Membre }
Messages : 17
| Merci beaucoup pour cette astuce, elle est vraiment sympa !! Par contre, j'ai juste un petit problème :/ l'ascenseur ne s'affiche qu'en bas à gauche de tout mon forum, et moi, je voudrais qu'il bouge en même temps que l'écran, si vous voyez ce que je veux dire x) Mon css: - Code:
-
/**TRANSPARENCE DE LA BANNIÈRE**/
body {
background-attachment:scroll;
background-position:center top;
background-color:#FFFFFF;
background-image:url(http://img7.hostingpics.net/pics/68456Banniere.png);
}
/**CHANGEMENT LORS DU SURVOL DES LIENS**/
a:hover{text-transform:uppercase;
}
a {font-variant: small-caps;
}
a:link {text-decoration: none
;
}
a:hover{text-decoration: none !important;
}
a { text-decoration: none;
}
a:link { text-decoration: none;
}
a:hover { text-decoration: none;
}
a:hover{
letter-spacing : 1px; }
body
{font-variant: small-caps ;
}
/**PERSONNALISATION DE LA BARRE DE NAVIGATION**/
a.mainmenu {
position: relative;
top: -25px;
text-align: left;
font-size: 60%;
background-color: #f8c38d;
color: #ef750c;
border-left: 10px solid #ef750c;
}
a.mainmenu:hover {
position: relative;
top: -25px;
text-align: left;
font-size: 60%;
border-left: 10px solid #ef750c;
background-image: url("http://img7.hostingpics.net/pics/383573Fond1.png");
color: #ef750c;
border-left: 10px solid #ef750c;
}
/**FOND DE CATÉGORIE**/
td.row1{
background-image: url("http://img7.hostingpics.net/pics/383573Fond1.png");
}
td.row2{
background-image: url("http://img7.hostingpics.net/pics/383573Fond1.png");
}
td.row3{
background-image: url("http://img7.hostingpics.net/pics/383573Fond1.png");
}
td.row3Right{background-image : url(http://img7.hostingpics.net/pics/383573Fond1.png);
}
/**TITRE DE LA CHATBOX**/
#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before { content: "As in a dream."; }
/**IMAGE DE FOND DE LA CHATBOX**/
body.chatbox {
background-image: url(http://img7.hostingpics.net/pics/383573Fond1.png);
}
/**CADRE AUTOUR DU TITRE DES CATÉGORIES**/
a.forumlink {
text-decoration: none;
background-image: url("http://img7.hostingpics.net/pics/295456Separation.png");
border-bottom: 2px double #F8C38D;
border-top: 2px double #F8C38D;
-moz-border-radius: 10px ;
border-right: 5px solid #F8C38D;
-moz-border-radius: 10px ;
border-left: 5px solid #F8C38D;
display:block;
}
a.forumlink:hover {
text-decoration: none;
background-image: url("http://img7.hostingpics.net/pics/336108Separation1.png");
border-bottom: 2px double #F8C38D;
border-top: 2px double #F8C38D;
-moz-border-radius: 10px ;
border-right: 5px solid #F8C38D;
-moz-border-radius: 10px ;
border-left: 5px solid #F8C38D;
display:block;
}
/**ARRONDISSEMENT DES ZONES DE SAISIE**/
textarea, .textarea.post, input.post {
-moz-border-radius:10px;
}*
/**ESPACEMENT ENTRE LE PROFIL ET LE MESSAGE**/
tr.post td {padding-left: 10px;}
/**SUPPRESSION DE LA PHRASE DE MODIFICATION DE MESSAGE**/
tr.post span.gensmall { display: none; }
/**CHANGEMENT DES QUOTES**/
.quote {
background-image: url('http://img7.hostingpics.net/pics/383573Fond1.png') !important;
}
/**CHANGEMENT DE LOPACITÉ LORS DU SURVOL DUNE IMAGE**/
.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;
}
/**PERSONNALISATION DU QEEL**/
.statistiques{
border:0px;
background-image: url("http://img7.hostingpics.net/pics/880383Stats.png");
background-repeat: no-repeat;
background-position: center;
height:350px;}
.groupes{
background-image: url("http://img7.hostingpics.net/pics/474466Separation2.png");
border: 1px #a17e58 solid;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:13;text-align:center;
/**BOUTONS MONTER ET DESCENDRE**/
.ascenseur {
position: fixed;
top: 50px;
left: 0px;
background-color: #ffffff;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
} Mon template: - Code:
-
<!-- BEGIN html_validation --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <body> <table> <tr> <td> <div> <div> <table> <tbody> <tr> <td> <!-- END html_validation --> <td valign="top" width="{C3SIZE}"> <div id="{ID_RIGHT}"> <!-- BEGIN giefmod_index2 --> {giefmod_index2.MODVAR} <!-- BEGIN saut --> <div style="height: {SPACE_ROW}px"></div> <!-- END saut --> <!-- END giefmod_index2 --> </div> </td> </tr> </tbody> </table> </div> </div> <!-- close div id="page-body" --> <div id="page-footer"> <div align="center"> <div class="gen"> <strong>{ADMIN_LINK}</strong>{U_VERSION_RTL}{U_CREATE_A_FORUM}{U_VERSION} {U_SUPPORT} <!-- BEGIN switch_view_stats --> | <a name="bottom" href="/{switch_view_stats.S_STATS}" class="copyright" rel="nofollow">{switch_view_stats.L_STATS}</a> <!-- END switch_view_stats --> <!-- BEGIN switch_view_donation --> | <a name="bottom" href="/{switch_view_donation.U_DONATION}" class="copyright" rel="nofollow">{switch_view_donation.L_MAKE_DONATION}</a> <!-- END switch_view_donation --> <!-- BEGIN switch_view_contact --> | <a name="bottom" href="/{switch_view_contact.U_CONTACT}" class="copyright" rel="nofollow">{switch_view_contact.L_CONTACT}</a> <!-- END switch_view_contact --> {U_ABUSE} {U_BLOG} </div> </div> </div> {PROTECT_FOOTER} </td> </tr> </table> <script type="text/javascript"> //<![CDATA[ fa_endpage(); //]]> </script> <!-- BEGIN google_analytics_code --> <script type="text/javascript"> //<![CDATA[ var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); //]]> </script> <script type="text/javascript"> //<![CDATA[ try{ var pageTracker = _gat._getTracker("{G_ANALYTICS_ID}"); pageTracker._trackPageview(); } catch(err) { } //]]> </script> <!-- END google_analytics_code --> <div class="ascenseur"> <a href="#top"><img src="http://2img.net/i/fa/subsilver/up_arrow.gif" /></a> <a href="#bottom"><img src="http://2img.net/i/fa/subsilver/down_arrow.gif" /></a> </div> </body> </html> J'espère que vous pourrez m'aider ._. merci d'avance !! | | |
|
| | |
.Little Lady
{ Membre actif }
Messages : 564
| Comme dit dans mon message précédent, il faut modifier les valeurs de top et left pour décaler l'ascenseur. | | |
|
| | |
Kiiss'
{ Membre }
Messages : 19
| Salut Change tout ton CSS par ceci, je n'ai pas eu le courage de te faire un tuto -_-', entier en te disant qu'elle partie tu doit changer nanani nanana, donc voilà. - Code:
-
/**TRANSPARENCE DE LA BANNIÈRE**/
body {
background-attachment:scroll;
background-position:center top;
background-color:#FFFFFF;
background-image:url(http://img7.hostingpics.net/pics/68456Banniere.png);
}
/**CHANGEMENT LORS DU SURVOL DES LIENS**/
a:hover{text-transform:uppercase;
}
a {font-variant: small-caps;
}
a:link {text-decoration: none
;
}
a:hover{text-decoration: none !important;
}
a { text-decoration: none;
}
a:link { text-decoration: none;
}
a:hover { text-decoration: none;
}
a:hover{
letter-spacing : 1px; }
body
{font-variant: small-caps ;
}
/**PERSONNALISATION DE LA BARRE DE NAVIGATION**/
a.mainmenu {
position: relative;
top: -25px;
text-align: left;
font-size: 60%;
background-color: #f8c38d;
color: #ef750c;
border-left: 10px solid #ef750c;
}
a.mainmenu:hover {
position: relative;
top: -25px;
text-align: left;
font-size: 60%;
border-left: 10px solid #ef750c;
background-image: url("http://img7.hostingpics.net/pics/383573Fond1.png");
color: #ef750c;
border-left: 10px solid #ef750c;
}
/**FOND DE CATÉGORIE**/
td.row1{
background-image: url("http://img7.hostingpics.net/pics/383573Fond1.png");
}
td.row2{
background-image: url("http://img7.hostingpics.net/pics/383573Fond1.png");
}
td.row3{
background-image: url("http://img7.hostingpics.net/pics/383573Fond1.png");
}
td.row3Right{background-image : url(http://img7.hostingpics.net/pics/383573Fond1.png);
}
/**TITRE DE LA CHATBOX**/
#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before { content: "As in a dream."; }
/**IMAGE DE FOND DE LA CHATBOX**/
body.chatbox {
background-image: url(http://img7.hostingpics.net/pics/383573Fond1.png);
}
/**CADRE AUTOUR DU TITRE DES CATÉGORIES**/
a.forumlink {
text-decoration: none;
background-image: url("http://img7.hostingpics.net/pics/295456Separation.png");
border-bottom: 2px double #F8C38D;
border-top: 2px double #F8C38D;
-moz-border-radius: 10px ;
border-right: 5px solid #F8C38D;
-moz-border-radius: 10px ;
border-left: 5px solid #F8C38D;
display:block;
}
a.forumlink:hover {
text-decoration: none;
background-image: url("http://img7.hostingpics.net/pics/336108Separation1.png");
border-bottom: 2px double #F8C38D;
border-top: 2px double #F8C38D;
-moz-border-radius: 10px ;
border-right: 5px solid #F8C38D;
-moz-border-radius: 10px ;
border-left: 5px solid #F8C38D;
display:block;
}
/**ARRONDISSEMENT DES ZONES DE SAISIE**/
textarea, .textarea.post, input.post {
-moz-border-radius:10px;
}*
/**ESPACEMENT ENTRE LE PROFIL ET LE MESSAGE**/
tr.post td {padding-left: 10px;}
/**SUPPRESSION DE LA PHRASE DE MODIFICATION DE MESSAGE**/
tr.post span.gensmall { display: none; }
/**CHANGEMENT DES QUOTES**/
.quote {
background-image: url('http://img7.hostingpics.net/pics/383573Fond1.png') !important;
}
/**CHANGEMENT DE LOPACITÉ LORS DU SURVOL DUNE IMAGE**/
.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;
}
/**PERSONNALISATION DU QEEL**/
.statistiques{
border:0px;
background-image: url("http://img7.hostingpics.net/pics/880383Stats.png");
background-repeat: no-repeat;
background-position: center;
height:350px;}
.groupes{
background-image: url("http://img7.hostingpics.net/pics/474466Separation2.png");
border: 1px #a17e58 solid;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:13;text-align:center;
/**BOUTONS MONTER ET DESCENDRE**/
.ascenseur {
position: fixed; /*--- Cette ligne permet de toujours afficher l'ascenseur à l'écran ---*/
bottom: 0px; /*--- On le place à 0 px du bas de l'écran ---*/
right: 0px; /*--- On le place à 0px de la gauche de l'écran ---*/
background-color: #A7CC42; /*--- 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;
} | | |
|
| | |
Kimi267
{ Membre }
Messages : 17
| Désolée, j'avais oubliée de dire que j'avais déjà testée la modification de top, bottom, je suis même passée par fixed; relative; absolute et float x) mais ça ne change rien :/ Ce sera peut-être plus explicite si je vous montre un screen  Jusque là, aucun problème, il est placé où je veux  Et là, j'aimerais qu'il monte en même temps que moi ^^' mais je n'y arrive pas :/ Vous pouvez regarder vous même sur mon www :p Merci de votre aide !! | | |
|
| | |
Jessica A.
{ Membre }
Messages : 139
|  J'ai un problème... mes images dépassent... en changeant les valeurs pas de différence... | | |
|
| | |
Kiiss'
{ Membre }
Messages : 19
| Je n'ai pas compris ton problème je doit être bête ! ^^ | | |
|
| | |
.Little Lady
{ Membre actif }
Messages : 564
| Jessica >> Là je pense que tu dois modifier la valeur de width | | |
|
| | |
Jessica A.
{ Membre }
Messages : 139
| Mais ou ? Dans les modifications il n'y en avait pas... et deuxième question XD, comment fait on pour qu'il soit dans ce sens là? (comme sur mon image) et non ben sur le coté? | | |
|
| | |
.Little Lady
{ Membre actif }
Messages : 564
| Il faut que tu mettes un < br /> entre les deux images. | | |
|
| | |
Jessica A.
{ Membre }
Messages : 139
| Elles ne sont pas remis dans l'autre sens... et je n'ai toujours pas trouvé le widht^^ pour élargir^^
Je voudrais les mettre dans le sens de l'image car sur mon forum ils sont dans le sens de ceux du forum (CSS actif) | | |
|
| | |
.Little Lady
{ Membre actif }
Messages : 564
| Je comprends pas bien ce que tu veux dire. Néanmoins, peux-tu me donner le code de l'ascenseur et le CSS qui va avec ?? | | |
|
| | |
Jessica A.
{ Membre }
Messages : 139
| Alors le code de l'ascenseur c'est le même que celui du tuto avec mes images, et celui là c'est le code css : - Code:
-
.ascenseur {
position: fixed; /*--- Cette ligne permet de toujours afficher l'ascenseur à l'écran ---*/
top: 390px; /*--- On le place à 390 px du bas de l'écran ---*/
right: -7px; /*--- On le place à -7px de la droite de l'écran ---*/
background-color: #553C26; /*--- On donne une couleur au fond ---*/
-moz-border-radius: 35px 0px 0px 35px; /*--- On arrondit les bords ---*/
-webkit-border-radius: 0px 35px 35px 0px;
border-radius: 0px 35px 35px 0px;
border: 3px solid #28160A;} - Code:
-
<div class="ascenseur" align="center"> <a href="#top"><img src="http://moe.mabul.org/up/moe/2010/07/16/img-221318k9x1h.png" /></a><br /> <a href="#bottom"><img src="http://moe.mabul.org/up/moe/2010/07/16/img-22104642yrb.png" /></a> </div> Pour ce que je voulais, j'ai fais un montage :  A gauche c'est ce que j'ai et à droite ce que j'aimerai. Enfin pouvoir le régler à la hauteur que je veux. Enfin dans tous les cas le texte dépasse du cadre et je n'arrive pas à le régler. Et j'ai une autre question, si on veut retoucher l'opacité, on doit le retoucher dans le css ou le template ? | | |
|
| | |
Haribot' ♪
{ Membre hyper-actif }
Messages : 5163
| Pour ceux qui n'ont pas accès aux templates, le code est à placer dans une Annonce quelconque (PA » Général » Messages et Emails » Annonces). | | |
|
| | |
loukag
{ Membre }
Messages : 57
| Mais comment on fait pour le mettre en bas à droite du forum??? Car là, il est en haut à gauche  | | |
|
| | |
Contenu sponsorisé
| |
| | |
| | Créer un ascenseur pour naviguer sur le forum (messages) | |
|
