ip

up

up

up

Coucou

Je peux réaliser ce genre de chose, est ce qu'on peut avoir le lien de ton forum pour que je fasse le code en suivant le design ?

Bonjour, merci de m'aider pour ma demande.
Voici le lien de mon forum : http://forumbrtest.forumactif.com/

faut il que je mettre le bouton "en cours" ?

j'ai trouvé ceci si ça peut aider :

Spoiler:

Merci pour le lien du forum test, et désolée j'ai été un peu occupée cette semaine, j'ai eu un truc imprévu ^^'
Je ne t'oublie pas, je regarde ça demain ! En attendant j'ai mis le sujet "En cours"

Ok, merci et prend ton temps. ^^

De ce que je vois de ton code source sur le forum, la barre grise est en fait la toolbar en haut du forum (pas que la barre de navigation).

Du coup je suis un peu embêtée, est ce que tu veux la garder et ne fixer la navigation dedans que au scroll ? Est ce que tu ne veux plus de la toolbar ?

non on repart de 0, ma barre qui est ce moment c'était juste un test. Donc ce que je souhaite c'est juste la barre de navigation simple (non le toolbar) qui comme je le disais qu'elle se fixe au moment au moment du scrool après l'image en tête du forum. Suis-je compréhensible dans ce que je dis ? :p

Si on reprend d'un forum Basic c est ici :http://leschapeauxtesteurs.forumactif.com/

Je comprends totalement ce que tu veux, c'était juste par rapport au forum spécifique

Vu que l'autre forum n'a pas de style graphique, je vais donc simplement faire un code basique, tu adapteras toi même le style.

D'abord, on va modifier le template overall_header. Tu places ta barre de navigation où tu veux qu'elle soit en mode "normal".
Ensuite on remplace :

Code:

{GENERATED_NAV_BAR}

par :

Code:

<div class="forum-navbar">{GENERATED_NAV_BAR}</div>

Maintenant pour le code JS, tu rajoutes sur toutes les pages ce code :
PA > Modules > HTML & JAVASCRIPT > Gestion des codes Javascript.

Code:

$(document).ready(function() {
    var $navBar = $('.forum-navbar'),
        top = $navBar.offset().top,
        $body = $('body');
    $(window).scroll(function() {
        if ($(window).scrollTop() >= top) {
            $body.addClass('sticky-navbar');
        } else {
            $body.removeClass('sticky-navbar');
        }
    });
});

Et enfin, le style CSS ! :

Code:


/* Style navbar */
.forum-navbar {
    height: 25px; /* hauteur barre de navigation en mode normal */
}

/* Permet de pas avoir de saut lors du scroll */
.sticky-navbar {
    padding-top: 25px!important; /* hauteur barre de navigation normale*/
}

/* Style barre de navigation fixée */
.sticky-navbar .forum-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100; /* adapter la valeur, parfois il faudra mettre plus grand*/
    background: black;
    padding: 15px;
}

Si ça ne fonctionne pas, est ce que je pourrai avoir le lien du forum où c'est installé s'il te plait ?

Merci, alors ça répond un peu près à ma demande mais il y a des petits détails qui ne vont pas :p
alors quand on scroll la barre de navigation va bien au dessus mais c'est comme ci une autre apparaissait car là c'est pas la même que celle qui se trouve en dessous de mon image.
Du coup j'aimerais que la barre de navigation en dessous de l'image du forum soit tout le long aussi du forum et que ce soit elle qui se déplace et non une autre qui apparaissent. Si cela n'est pas possible, ce n'est pas grave mais bon

Voici un autre schéma pour l'explication de barre sous l'image du forum (il y a des petits détails en plus mais je pourrais passer une autre commande) :


Voir l'image en grand

et là quand on scroll avec la même barre de navigation :

Voir l'image en grand

J'ai mis le code ici : http://leschapeauxtesteurs.forumactif.com/

En fait ce n'est pas une nouvelle barre de navigation qui apparait, elle se stylise simplement différent. Comme dit au dessus, avec un forum sans aucun style j'ai simplement fait le code pour qu'elle puisse se fixer quand on arrive à la bonne hauteur lors du défilement de la page. C'est à dire qu'au scroll elle devient noire et fixée en haut (voir CSS, tu peux mettre le style que tu veux).

Du coup si je comprends bien ta demande est faite de 2 choses :
1/ Faire le haut du forum (bannière et barre de navigation qui prennent toute la largeur) -> A faire
2/ Faire se fixer la barre de navigation quand on dépasse sa position. -> Fait

Oui, du coup il faudrait la barre de nav en dessous ait la même aspect que celle qui se fixe après. Du coup dans les codes que tu m'a mis vu que la barre se stylise avec un fond noir et prend bien la largeur du forum avec une certaine hauteur il faudrait les mêmes "cotations" avec celle en dessous de la bannière.

Et sinon puis-je savoir où dans le css on ajoute le "height:" pour que je baisse sa taille en hauteur car elle est un chouilla trop grande mais ça c'est du détail après.

Comme c'est juste un schéma et que je sais pas les dimensions, comme tu veux placer le logo du forum, j'ai fait le strict minimum, juste pour te montrer avec un header qui prend toute la largeur et.

Le JS reste comme avant.

Le CSS est à remplacer par ceci :

Code:

/* Header du forum */
.header-container {
    height: 300px;
    background: #ae7f7f;
    overflow: hidden;
}

.header-container img {
    max-width: 100%;
}

/* Style navbar */
.forum-navbar {
  height: 35px; /* hauteur de la barre */
  text-align: center;
  background: #3a3361;
  padding-top: 10px;
  box-sizing: border-box;
}

.forum-navbar a {
  color: white;
}

/* Permet de pas avoir de saut lors du scroll */
.sticky-navbar {
    padding-top: 35px!important; /* hauteur barre de navigation en normal */
}

/* Style barre de navigation fixée */
.sticky-navbar .forum-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100; /* adapter la valeur, parfois il faudra mettre plus grand*/
}

Dans le template overall_header, tu trouves cette ligne là :

Code:

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">

Juste au-dessus on va mettre :

Code:

<div class="header-container">
    <a href="{U_INDEX}" class="header-forum-link">
        <img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" />
    </a>
</div>
<div class="forum-navbar">{GENERATED_NAV_BAR}</div>

Et ensuite on supprime tout ce gros bout de code (qui est un tout petit peu plus bas) :p

Code:

<table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <!-- BEGIN switch_logo_left -->
        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
        <!-- END switch_logo_left -->
        <td align="center" width="100%" valign="middle">
            <!-- BEGIN switch_logo_center -->
            <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
            <br />
            <!-- END switch_logo_center -->
            <div class="maintitle">{MAIN_SITENAME}</div>
            <br />
            <span class="gen">{SITE_DESCRIPTION}<br />&nbsp; </span>
        </td>
        <!-- BEGIN switch_logo_right -->
        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
        <!-- END switch_logo_right -->
    </tr>
</table>

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
    <tr>
        <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
    </tr>
</table>

<div style="clear: both;"></div>

J'espère que ça te conviendra pour voir comment bouge la barre de navigation, ensuite il faudra styliser le header comme tu veux

Bonjour, alors pour la barre de navigation c'est parfait mais il reste des petits détails :p alors pour la barre de navigation qui se trouve en violet ainsi que la couleur de fond rosé au dessus est il possible de la mettre toute la largeur du forum ainsi que pour cette même couleur rosé enlever cette espace gris qui se trouve aussi ?

Merci encore :p

Pour l'espace sur le côté, comme sur les forums, petite astuce on ajoute au CSS :

Code:

body {
  margin: 0;
}

Ca va enlever aussi la marge du bas. Si tu veux garder celle du bas, met plutôt (en adaptant 8px à la taille que tu veux en bas, par défaut c'est 8px) :

Code:

body {
  margin: 0 0 8px;
}

Merci, ça marche parfaitement. je met le sujet en résolu. :p