<Navigation> Barre de navigation fixée en haut de la fenêtre Bouton_active<Navigation> Barre de navigation fixée en haut de la fenêtre Bouton_hover<Navigation> Barre de navigation fixée en haut de la fenêtre Fb-hover<Navigation> Barre de navigation fixée en haut de la fenêtre Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Fiche de Présentation RPG
<Navigation> Barre de navigation fixée en haut de la fenêtre EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
<Navigation> Barre de navigation fixée en haut de la fenêtre EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
<Navigation> Barre de navigation fixée en haut de la fenêtre EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
<Navigation> Barre de navigation fixée en haut de la fenêtre EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
<Navigation> Barre de navigation fixée en haut de la fenêtre EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
<Navigation> Barre de navigation fixée en haut de la fenêtre EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
<Navigation> Barre de navigation fixée en haut de la fenêtre EmptySam 11 Fév 2023, 06:04 par Krager

» Vos partenaires dans le footer
<Navigation> Barre de navigation fixée en haut de la fenêtre EmptyMar 07 Fév 2023, 08:40 par Oxtran


Partagez
 

<Navigation> Barre de navigation fixée en haut de la fenêtre

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://www.artsoul.fr/
Kory
Kory
{ Membre actif }
{ Membre actif }

Féminin Messages : 370



<Navigation> Barre de navigation fixée en haut de la fenêtre Empty
Barre de navigation accrochée en haut de la fenêtre

Niveau: Facile | Par: Kory | Validé par: Hiro' | En date du: 28-02

• Ce tutoriel ne s'applique qu'aux forums ForumActif en version phpbb2
• Vous devez être fondateur de votre forum pour éditer les templates



    Bonjour (ou bonsoir).

    Je vous laisse d'abord le résultat : ici.


  • Première étape
    Pour réaliser ce tutoriel, vous devez avoir votre barre de navigation au-dessus de votre bannière. Un tutoriel vous apprend comment faire ici. Arrêtez vous avant à la création de la class dans la feuille de CSS mais créez-la bien dans le template.

    Arrêtez-vous après cette étape
    Citation :
    Revenez dans votre template overall_header

    Remplacer ce morceau de code :
    Code:
                      <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                  </tr>
                </table><br>

    Par celui-ci :
    Code:
                      <td align="{MENU_POSITION}"{MENU_NOWRAP}><span class="navi">{GENERATED_NAV_BAR}</span></td>
                  </tr>
                </table><br>

  • Deuxième étape
    C'est ici que commence vraiment ce tutoriel. Prenez votre feuille de style et ajoutez-y ce code. Rien n'est à modifier, excepté le fixed par un absolute (voir plus bas) ou le width pour changer la largeur, rien d'autre.
    Code:
    .navi {
    position: fixed;
    left: 0px;
    top: 0px;
    right: 0px;
    z-index:1000;
    width: 100%;
    }

    Vous pouvez maintenant personnaliser votre barre de navigation et votre barre est désormais accrochée la fenêtre pour suivre le défilement de la page.
    Cependant si vous la voulez accrochée en haut de la page mais vous ne voulez pas qu'elle descende, remplacez fixed par absolute dans le CSS.

    En espérant que ce tutoriel vous a servi et plu,
    Kory.


Dernière édition par Kory le Sam 19 Fév 2011, 13:55, édité 4 fois
MessageSujet: <Navigation> Barre de navigation fixée en haut de la fenêtre   <Navigation> Barre de navigation fixée en haut de la fenêtre EmptyMer 05 Jan 2011, 12:00
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



<Navigation> Barre de navigation fixée en haut de la fenêtre Empty
FAQ


Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml
MessageSujet: Re: <Navigation> Barre de navigation fixée en haut de la fenêtre   <Navigation> Barre de navigation fixée en haut de la fenêtre EmptyVen 22 Juil 2011, 08:40
Revenir en haut Aller en bas
http://www.edspeleersaddicts.com
Edward Speleers
Edward Speleers
{ Spécialiste }
{ Spécialiste }

Masculin Messages : 1799



<Navigation> Barre de navigation fixée en haut de la fenêtre Empty
Ce code marche vraiment super bien, merci mille fois, mon forum commence enfin à ressembler à quelque chose^^
MessageSujet: Re: <Navigation> Barre de navigation fixée en haut de la fenêtre   <Navigation> Barre de navigation fixée en haut de la fenêtre EmptyDim 16 Déc 2012, 09:23
Revenir en haut Aller en bas
http://licia.meysenq@gmail.com
mister monster
mister monster
{ Membre }
{ Membre }

Féminin Messages : 12



<Navigation> Barre de navigation fixée en haut de la fenêtre Empty
par contre comment faire pour que la barre de navig soit comme dans ton exemple c'est a dire au dessus d'un fond de couleur transparent ?
Comme ici aussi : http://justaddwater.forumperso.com/
MessageSujet: Re: <Navigation> Barre de navigation fixée en haut de la fenêtre   <Navigation> Barre de navigation fixée en haut de la fenêtre EmptyMer 24 Avr 2013, 10:34
Revenir en haut Aller en bas
Contenu sponsorisé




<Navigation> Barre de navigation fixée en haut de la fenêtre Empty
MessageSujet: Re: <Navigation> Barre de navigation fixée en haut de la fenêtre   <Navigation> Barre de navigation fixée en haut de la fenêtre Empty
Revenir en haut Aller en bas
 

<Navigation> Barre de navigation fixée en haut de la fenêtre

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» <Navigation> Barre de navigation qui disparait au scroll
» <Navigation> Fixer la barre de navigation
» <Navigation> Personnaliser la barre de navigation
» <Navigation> Mettre une Image sous la Barre de Navigation
» <Navigation> Barre de navigation au-dessus de la bannière

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Le Header-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit