It is currently Mon 26 Sep 2016 - 05:37 - créer un forum

[Tuto] Un menu navigation fixe

Skip to content

Post new topic Reply to topic Goto page: <  1, 2, 3 … , 9, 10, 11  >

[Tuto] Un menu navigation fixe
Author Message
Bervi





PostPosted: Sun 7 Feb 2010 - 20:07    Post subject: [Tuto] Un menu navigation fixe Reply with quote

PublicitéSupprimer les publicités ?
Previous post review:

Merci Themalin
mais j'aimerais que le menu ne sois pas fixe mais puisse monter et descendre sur la page


EDIT: J'ai trouvé la solution: remplacez le
 
Code: Sélectionner - Agrandir
 Position: fixed;
Par
 Position: absolute;

Author Message
IZEZ
Membre


Offline
Membre

Joined: 29 Oct 2007
Posts: 19
Niveau:
Point(s): 19
Moyenne: 1.00
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Thu 1 Apr 2010 - 19:46    Post subject: [Tuto] Un menu navigation fixe Reply with quote

Bonjour,

dans mon thème WorkStation Fusion :
J'ai réussi la deuxième étape (les liens sont en haut du forum) mais la première, j'ai pas compris. Où doit-on insérer :

#navigation
{
   background-color: yellow;
   border: 1px solid green;
   width: 150px;
   height: 100px;
   
   position: fixed;
   left: 30px;
   top: 60px;
}


Je n'ai pas de ***.css
Je n'ai que formie.css



Merci


Forum
Author Message
IZEZ
Membre


Offline
Membre

Joined: 29 Oct 2007
Posts: 19
Niveau:
Point(s): 19
Moyenne: 1.00
Mac Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...)

PostPosted: Fri 2 Apr 2010 - 14:39    Post subject: [Tuto] Un menu navigation fixe Reply with quote

Tout est bon ! Je n'avais pas vu le commentaire de cet éternel Themalin
themalin wrote:

bonjour

tu as pensé à ajouter ça


#navigation
{
background-color: yellow;
border: 1px solid green;
width: 150px;
height: 100px;

position: fixed;
left: 30px;
top: 60px;
}

dans ton overall header après ça

background-image: url(http://img.xooimage.com/files6/f/8/7/background-8b73e15--104d152.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top right;
background-color: #a7a9ac;
scrollbar-face-color: #8e9093;
scrollbar-highlight-color: #b0b3b6;
scrollbar-shadow-color: #777777;
scrollbar-arrow-color: #1a70ed;
scrollbar-3dlight-color: #cecece;
scrollbar-track-color: #cecece;
scrollbar-darkshadow-color: #777777;
}


Forum
Author Message
Mambba


Offline
Guest




PostPosted: Sat 28 Aug 2010 - 17:25    Post subject: [Tuto] Un menu navigation fixe Reply with quote

Nickel ce tuto, sauf que position:fixed; bugue dans Iexplorer. Donc je suis obligée de coller le div dans overall-footer pour que mes visiteurs sous internet explorer n'ai pas ma side bar juste avant la bannière :/
J'aimerais bien savoir comment masquer cette barre pour les visiteurs sous internet explorer..?
Ou bien s'il y a une adaptation de ce code pour quil soit compatible avec tous les navigateurs dont internet explorer ?
Ou bien s'il y a un enchantement magique qui ferait que plus personne n'utilise iexplorer Mr. Green .. *je sors*


Author Message
Patapataprout


Offline
Guest




PostPosted: Wed 6 Oct 2010 - 01:58    Post subject: [Tuto] Un menu navigation fixe Reply with quote

J'ai un probleme, peut on m'aider mais beaucoup, voila mon code quand j'ouvre mon template Overall header

 


Code: Sélectionner - Agrandir


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={S_CONTENT_ENCODING}">
<meta http-equiv="Content-Style-Type" content="text/css">
{META}
{NAV_LINKS}
<title>{SITENAME} :: {PAGE_TITLE}</title>
<!-- link rel="stylesheet" href="http://img8.xooimage.com/files/s/u/subsilver-30daa.css" type="text/css" -->
<style type="text/css">
<!--
/*
  The original subSilver Theme for phpBB version 2+
  Created by subBlue design
  http://www.subBlue.com

  NOTE: These CSS definitions are stored within the main page body so that you can use the phpBB2
  theme administration centre. When you have finalised your style you could cut the final CSS code
  and place it in an external file, deleting this section to save bandwidth.
*/

/* General page style. The scroll bar colours only visible in IE5.5+ */
body { 
    background-color: {T_BODY_BGCOLOR};
    scrollbar-face-color: {T_TR_COLOR2};
    scrollbar-highlight-color: {T_TD_COLOR2};
    scrollbar-shadow-color: {T_TR_COLOR2};
    scrollbar-3dlight-color: {T_TR_COLOR3};
    scrollbar-arrow-color:  {T_BODY_LINK};
    scrollbar-track-color: {T_TR_COLOR1};
    scrollbar-darkshadow-color: {T_TH_COLOR1};
}

/* General font families for common tags */
font,th,td,p { font-family: {T_FONTFACE1} }
a:link,a:active,a:visited { color : {T_BODY_LINK}; }
a:hover        { text-decoration: underline; color : {T_BODY_HLINK}; }
hr    { height: 0px; border: solid {T_TR_COLOR3} 0px; border-top-width: 1px;}

/* This is the border line & background colour round the entire page */
.bodyline    { background-color: {T_TD_COLOR2}; border: 1px {T_TH_COLOR1} solid; }

/* This is the outline round the main forum tables */
.forumline    { background-color: {T_TD_COLOR2}; border:0; }

/* Main table cell colours and backgrounds */
td.row1    { background-color: {T_TR_COLOR1}; }
td.row2    { background-color: {T_TR_COLOR2}; }
td.row3    { background-color: {T_TR_COLOR3}; }

/*
  This is for the table cell above the Topics, Post & Last posts on the index.php page
  By default this is the fading out gradiated silver background.
  However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
        background-color: {T_TD_COLOR2};
        background-image: url(http://img5.xooimage.com/files/c/e/cellpic2-30da7.jpg);
        background-repeat: repeat-y;
}

/* Header cells - the blue and silver gradient backgrounds */
th    {
    color: {T_FONTCOLOR3}; font-size: {T_FONTSIZE2}px; font-weight : bold; 
    background-color: {T_BODY_LINK}; height: 25px;
    background-image: url(http://img2.xooimage.com/files/c/e/cellpic3-30da8.gif);
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
            background-image: url(http://img2.xooimage.com/files/c/e/cellpic1-30da9.gif);
            background-color:{T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid; height: 28px;
}

/*
  Setting additional nice inner borders for the main table cells.
  The names indicate which sides the border will be on.
  Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
    height: 29px;
    border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
    font-weight: bold; border: {T_TD_COLOR2}; border-style: solid; height: 28px;
}
td.row3Right,td.spaceRow {
    background-color: {T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid;
}

th.thHead,td.catHead { font-size: {T_FONTSIZE3}px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow     { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right     { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft      { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom  { border-width: 0px 1px 1px 1px; }
th.thTop     { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }

/* The largest text used in the index page title and toptic title etc. */
.maintitle    {
    font-weight: bold; font-size: 22px; font-family: "{T_FONTFACE2}",{T_FONTFACE1};
    text-decoration: none; line-height : 120%; color : {T_BODY_TEXT};
}

/* General text */
.gen { font-size : {T_FONTSIZE3}px; }
.genmed { font-size : {T_FONTSIZE2}px; }
.gensmall { font-size : {T_FONTSIZE1}px; }
.gen,.genmed,.gensmall { color : {T_BODY_TEXT}; }
a.gen,a.genmed,a.gensmall { color: {T_BODY_LINK}; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover    { color: {T_BODY_HLINK}; text-decoration: underline; }

/* The register, login, search etc links at the top of the page */
.mainmenu        { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT} }
a.mainmenu        { text-decoration: none; color : {T_BODY_LINK};  }
a.mainmenu:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Forum category titles */
.cattitle        { font-weight: bold; font-size: {T_FONTSIZE3}px ; letter-spacing: 1px; color : {T_BODY_LINK}}
a.cattitle        { text-decoration: none; color : {T_BODY_LINK}; }
a.cattitle:hover{ text-decoration: underline; }

/* Forum title: Text and link to the forums used in: index.php */
.forumlink        { font-weight: bold; font-size: {T_FONTSIZE3}px; color : {T_BODY_LINK}; }
a.forumlink     { text-decoration: none; color : {T_BODY_LINK}; }
a.forumlink:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav            { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT};}
a.nav            { text-decoration: none; color : {T_BODY_LINK}; }
a.nav:hover        { text-decoration: underline; }

/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2    { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT}; }
a.topictitle:link   { text-decoration: none; color : {T_BODY_LINK}; }
a.topictitle:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.topictitle:hover    { text-decoration: underline; color : {T_BODY_HLINK}; }

/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name            { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT};}

/* Location, number of posts, post date etc */
.postdetails        { font-size : {T_FONTSIZE1}px; color : {T_BODY_TEXT}; }

/* The content of the posts (body of text) */
.postbody { font-size : {T_FONTSIZE3}px; line-height: 18px}
a.postlink:link    { text-decoration: none; color : {T_BODY_LINK} }
a.postlink:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.postlink:hover { text-decoration: underline; color : {T_BODY_HLINK}}

/* Quote & Code blocks */
.code { 
    font-family: {T_FONTFACE3}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR2};
    background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
    border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
    font-family: {T_FONTFACE1}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR1}; line-height: 125%;
    background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
    border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

/* Copyright and bottom info */
.copyright        { font-size: {T_FONTSIZE1}px; font-family: {T_FONTFACE1}; color: {T_FONTCOLOR1}; letter-spacing: -1px;}
a.copyright        { color: {T_FONTCOLOR1}; text-decoration: none;}
a.copyright:hover { color: {T_BODY_TEXT}; text-decoration: underline;}

/* Form elements */
input,textarea, select {
    color : {T_BODY_TEXT};
    font: normal {T_FONTSIZE2}px {T_FONTFACE1};
    border-color: {T_BODY_TEXT};
}

/* The text input fields background colour */
input.post, textarea.post, select {
    background-color : {T_TD_COLOR2};
    border-width:1px;
}

input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
    background-color : {T_TR_COLOR1};
    color : {T_BODY_TEXT};
    font-size: {T_FONTSIZE2}px; font-family: {T_FONTFACE1};
}

/* The main submit button option */
input.mainoption {
    background-color : {T_TD_COLOR1};
    font-weight : bold;
    border-width:1px;
}

/* None-bold submit button */
input.liteoption {
    background-color : {T_TD_COLOR1};
    font-weight : normal;
    border-width:1px;
}

/* This is the line in the posting page which shows the rollover
  help line. This is actually a text box, but if set to be the same
  colour as the background no one will know ;)
*/
.helpline { background-color: {T_TR_COLOR2}; border-style: none; }

/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("http://img10.xooimage.com/files/f/o/formie-30d7c.css"); 
-->
</style>
<!-- BEGIN switch_enable_pm_popup -->
<script language="Javascript" type="text/javascript">
<!--
    if ( {PRIVATE_MESSAGE_NEW_FLAG} )
    {
        window.open('{U_PRIVATEMSGS_POPUP}', '_phpbbprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');;
    }
//-->
</script>
<!-- END switch_enable_pm_popup -->
</head>
<body bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

<a name="top"></a>

<table width="100%" cellspacing="0" cellpadding="10" border="0" align="center"> 
    <tr> 
        <td class="bodyline">
<div style="text-align:center"><a href="{U_INDEX}"><img src="http://img6.xooimage.com/files/l/o/logo-b2c4b.png" border="0" alt="{L_INDEX}" vspace="1" /></a><br /><br />


<div style="text-align:center">
                <table cellspacing="0" cellpadding="2" border="0" style="margin:auto">
                    <tr> 
                        <td align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_FAQ}" class="mainmenu"><img src="http://img1.xooimage.com/files/i/n/interrogation-1--2e754.gif" width="12" height="13" border="0" alt="{L_FAQ}" hspace="3" />{L_FAQ}</a></span><span class="mainmenu">&nbsp; &nbsp;<a href="{U_SEARCH}" class="mainmenu"><img src="http://img9.xooimage.com/files/i/c/icon_mini_search-30d7d.gif" width="12" height="13" border="0" alt="{L_SEARCH}" hspace="3" />{L_SEARCH}</a>&nbsp; &nbsp;<a href="{U_MEMBERLIST}" class="mainmenu"><img src="http://img8.xooimage.com/files/i/c/icon_mini_members-30d7e.gif" width="12" height="13" border="0" alt="{L_MEMBERLIST}" hspace="3" />{L_MEMBERLIST}</a>&nbsp; &nbsp;<a href="{U_GROUP_CP}" class="mainmenu"><img src="http://img3.xooimage.com/files/i/c/icon_mini_groups-30d7f.gif" width="12" height="13" border="0" alt="{L_USERGROUPS}" hspace="3" />{L_USERGROUPS}</a>&nbsp; 
                        <!-- BEGIN switch_user_logged_out -->
                        &nbsp;<a href="{U_REGISTER}" class="mainmenu"><img src="http://img5.xooimage.com/files/i/c/icon_mini_register-30d80.gif" width="12" height="13" border="0" alt="{L_REGISTER}" hspace="3" />{L_REGISTER}</a></span>&nbsp;
                        <!-- END switch_user_logged_out -->
                        </td>
                    </tr>
                    <tr>
                        <td height="25" align="center" valign="top" nowrap="nowrap"><span class="mainmenu">&nbsp;<a href="{U_PROFILE}" class="mainmenu"><img src="http://img2.xooimage.com/files/i/c/icon_mini_profile-30d81.gif" width="12" height="13" border="0" alt="{L_PROFILE}" hspace="3" />{L_PROFILE}</a>&nbsp; &nbsp;<a href="{U_PRIVATEMSGS}" class="mainmenu"><img src="http://img8.xooimage.com/files/i/c/icon_mini_message-30d82.gif" width="12" height="13" border="0" alt="{PRIVATE_MESSAGE_INFO}" hspace="3" />{PRIVATE_MESSAGE_INFO}</a>&nbsp; &nbsp;<a href="{U_LOGIN_LOGOUT}" class="mainmenu"><img src="http://img4.xooimage.com/files/i/c/icon_mini_login-30d83.gif" width="12" height="13" border="0" alt="{L_LOGIN_LOGOUT}" hspace="3" />{L_LOGIN_LOGOUT}</a>&nbsp;</span></td>
                    </tr>
                </table>
</div>
        <br />






Maintenant je pose la question, il est possible que quelqu'un m'aide, qu'il prène mon code et qu'il m'ajoute lui ce qu'il faut que je n'y arrive pas. Si quelqu'un le fait, il peut faire en sorte que ma colonne soit sur la gauche de mon forum.
Merci d'avance!


Author Message
Satir


Offline
Guest




PostPosted: Wed 3 Nov 2010 - 15:52    Post subject: [Tuto] Un menu navigation fixe Reply with quote

Y'a un problème avec ce menu, certains liens de marchent pas. J'ai voulu y mettre des liens vers "Qui est en ligne?" et vers le Portail, et quand je clique dessus ça me met "Not Found", alors que ça marche très bien pour le lien menant vers l'index du forum et le Top 10 des posteurs...

Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Wed 3 Nov 2010 - 15:56    Post subject: [Tuto] Un menu navigation fixe Reply with quote

Bonjour
Il n'y a aucun soucis avec le tuto... si cela ne marche pas c'est que vous avez fait une erreur. Vérifiez les liens que vous mettez.
Cordialement
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
Satir


Offline
Guest




PostPosted: Wed 3 Nov 2010 - 16:01    Post subject: [Tuto] Un menu navigation fixe Reply with quote

Non, je n'ai fait aucune erreur. J'ai bien vérifié, c'est éxactement les mêmes liens que pour les 2 ou 3 autres que j'ai installé et qui marchent très bien. D'ailleurs quand j'ai enlevé mon lien vers qui est en ligne et que j'en ai mis un autre, sans toucher au reste, ça marchait bien. J'ai l'impression que ça ne marche pas pour certaines pages dont on peut avoir directement accès via un lien sur le forum.

Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Wed 3 Nov 2010 - 16:03    Post subject: [Tuto] Un menu navigation fixe Reply with quote

Mettez ici votre code complet entre les balises code.
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
Satir


Offline
Guest




PostPosted: Wed 3 Nov 2010 - 16:08    Post subject: [Tuto] Un menu navigation fixe Reply with quote

Code: Sélectionner - Agrandir
<body><div id="navigation">
<a href=http://sport-land.xooit.com/index.php?mode=topten&order=DESC">Forum</a><br />
<a href=http://sport-land.xooit.com/memberlist.php?mode=topten&order=DESC">Top 10 des posteurs</a><br />
<a href=http://sport-land.xooit.com/viewonline.php=DESC">Qui est en ligne</a><br />
</div>


Les deux premiers marchent très bien. Le 3 ème vers qui est en ligne ne marche pas.


Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Wed 3 Nov 2010 - 16:14    Post subject: [Tuto] Un menu navigation fixe Reply with quote

Bien... et maintenant vous vérifiez cette adresse : http://sport-land.xooit.com/viewonline.php=DESC
Donc vous voyez bien qu'elle n'est pas bonne.
Wink
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
Satir


Offline
Guest




PostPosted: Wed 3 Nov 2010 - 16:21    Post subject: [Tuto] Un menu navigation fixe Reply with quote

Le "=DESC" fait partie du lien de base. Retirez le et vous obtenez  le lien vers Qui est en ligne.

Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Wed 3 Nov 2010 - 16:42    Post subject: [Tuto] Un menu navigation fixe Reply with quote

Mais justement ne mettez pas DESC juste http://sport-land.xooit.com/viewonline.php
Le DESC n'a rien a faire dans cette url.
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
Satir


Offline
Guest




PostPosted: Wed 3 Nov 2010 - 16:47    Post subject: [Tuto] Un menu navigation fixe Reply with quote

OK j'ai compris, en fait comme c'était dans les deux premiers liens que j'ai mis, j'ai cru que ça faisait partie du code, et je l'ai donc laissé en ajoutant d'autres liens. Merci.

Author Message
Satir


Offline
Guest




PostPosted: Thu 4 Nov 2010 - 15:34    Post subject: [Tuto] Un menu navigation fixe Reply with quote

J'ai un autre petit souci.

Quand je veux mettre un lien vers le portail, nommé "Retour à l'accueil", le "à" se transforme en "?" dans un petit losange. Et quand j'ajoute un nouveau lien, le cadre ne s'aggrandit pas, le lien en quéstion s'ajoute en dessous.

Y'a moyen de régler ça? Merci.

Edit: C'est bon j'ai trouvé pour la taille du cadre. Par contre pour le "à"...


Author Message
Yskander
Modérateur


Offline
Modérateur

Joined: 26 Jan 2008
Posts: 1,558
Point(s): 1,654
Moyenne: 1.06
Masculin

PostPosted: Thu 4 Nov 2010 - 16:04    Post subject: [Tuto] Un menu navigation fixe Reply with quote

Pour les lettres accentuées il ne faut pas les mettre telle quelle dans un code. Mettez &agrave;
>> http://www.designvegetal.com/gadrat/cours/informatique/html/accents.html
Cordialement
_______________________
Pour les mp injurieux >> Ezéchiel 25 verset 17


Forum
Author Message
Contenu Sponsorisé





PostPosted: Today at 05:37    Post subject: [Tuto] Un menu navigation fixe

Display posts from previous:   
Reply to topic Page 10 of 11 Goto page: <  1, 2, 3 … , 9, 10, 11  >




Portal | Index | Administration Panel | Create a forum | Free support forum | Free forums directory | Report a violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group |
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401