<Navigation> Fixer la barre de navigation Bouton_active<Navigation> Fixer la barre de navigation Bouton_hover<Navigation> Fixer la barre de navigation Fb-hover<Navigation> Fixer la barre de navigation 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
» Système d'onglets simple et personnalisable
<Navigation> Fixer la barre de navigation EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
<Navigation> Fixer la barre de navigation EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
<Navigation> Fixer la barre de navigation EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
<Navigation> Fixer la barre de navigation EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
<Navigation> Fixer la barre de navigation EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
<Navigation> Fixer la barre de navigation EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
<Navigation> Fixer la barre de navigation EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
<Navigation> Fixer la barre de navigation EmptySam 11 Fév 2023, 06:04 par Krager

-38%
Le deal à ne pas rater :
Ecran PC gaming 23,8″ – ACER KG241Y P3bip à 99,99€
99.99 € 159.99 €
Voir le deal

Partagez
 

<Navigation> Fixer la barre de navigation

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://www.css-actif.com
Orange
Orange
RocketMan
RocketMan

Masculin Messages : 3086



<Navigation> Fixer la barre de navigation Empty
Barre Hitskinienne

Niveau: Intermédiaire | Par: Orange | Validé par: Orange | En date du: 4 Janvier 2010
La barre bleutée au haut des prévisualisations de thèmes Hitskin vous donne envie ? Vous savez, celle-là : Prévisualisation d'un thème de Hitskin.com. Bon, le thème choisi n’à rien avoir, c’est seulement pour vous montrer comment la barre descendait avec le forum, essayez de déplacer le curseur de la barre de défilement vers le bas et constatez comment la barre reste fixe au sommet de la fenêtre. Pratique pour faciliter la navigation rapide sur votre forum, les visiteurs n’ont pas à remonter la page pour naviguer librement.

Avant de poursuivre, je vous recommande d’appliquer les codes de mon tutoriel : Utiliser les variables Forumactif dans les templates. Ça pourrait vous être utile pour le contenu de votre barre Hitskinienne.

  1. Mise en place du code

    Et oui, on va commencer par mettre en place le code de base qu’il nous faudra personnaliser par la suite. Placer les codes au bon endroit ne suffit pas, il va falloir les comprendre (et oui, aussi bien vous y habituer).

    Code:
     <table style="position: fixed; left: 0px; top: 0px; right: 0px; background-color: red; z-index:1000; width: 100%;" ><tr><td> 
    </td></tr></table>

    Essentiellement, c’est un tableau (< table>) avec une rangée (< tr>) et une cellule (< td>)! J’espère que je ne vous apprends rien, notre tableau est un peu particulier, on lui a donné un style bien précis en ajoutant : style="[propriétés CSS] ". Parlons-en des propriétés, chacune ont un rôle bien précis, par exemple : c'est "position: fixed" qui fixe la barre en haut de la fenêtre, et z-index qui définit l'ordre d'affichage ; ici la barre sera par-dessus tous les autres scripts insérés ayant un z-index inférieur à 1000. Le reste n'est pas bien difficile à comprendre, left, right, top définissent la position de votre barre et width la longueur.

    Donc, collez le code ci-dessous dans le template overall_header juste en dessous des lignes :
    Code:
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

    Publiez le template avec l'icône <Navigation> Fixer la barre de navigation Ajouter dans la liste des templates généraux. En retournant sur votre forum, vous remarquez une petite barre rouge toute simple qui reste fixe en haut de la fenêtre de votre navigateur. Rien d'exceptionnel, mais cette barre pourra contenir du texte, des liens, des images et même d'autres tableaux ! Ce qui nous amène à...

  2. Personnalisation du code

    Avouons que pour l'instant notre barre aussi rouge soit-elle ne sert pas à grand chose. Quoi ? Vous n'aimez pas le rouge ? Alors ça sera la première étape de notre personnalisation : modifier le fond. Reprenons notre code de base :

    Code:
    <table style="position: fixed; left: 0px; top: 0px; right: 0px; background-color: red; z-index:1000; width: 100%;" ><tr><td> 
    </td></tr></table>

    Ce qui nous intéresse ici c'est background-color nous remplacerons le "red" qui le suit par une couleur de votre choix, pour ce faire je vous recommande le Sélecteur de couleurs. Il est également possible de remplacer le background-color par background-image : url('LIEN_DE_VOTRE_IMAGE');.

    Ensuite il nous faudra personnaliser son contenu, vous pouvez ajouter celui de votre choix entre < td> et < /td>. Vous pouvez y ajouter uniquement du code HTML, le BBcode n'est pas pris en charge. Des codes pour le contenu de votre barre ont été ajoutés dans la section appropriée, n'hésitez pas à les consulter :
    • Barre Hitskinienne avec Logo



C'est terminé, votre barre Hitskinienne est prête à l'emploi Wink.


Dernière édition par Orange le Lun 04 Jan 2010, 15:44, édité 1 fois
MessageSujet: <Navigation> Fixer la barre de navigation   <Navigation> Fixer la barre de navigation EmptyLun 04 Jan 2010, 14:53
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



<Navigation> Fixer la barre de navigation Empty
FAQ


Q
Comment peut-on modifier la hauteur de la barre ?

R
La hauteur change automatiquement quand on met quelque chose dedans. Elle augmente aussi en mettant la balise <*br /> (Il faut enlever l'étoile * ) aux endroits voulus, cette balise permet de faire un retour à la ligne. Il y a encore un autre moyen, c'est de rajouter height: XXpx; dans le code, par exemple à côté de width: 100%; . Bien sûr, il faut remplacer les XX par les valeurs voulues.


Q
Comment placer la Barre Hitskinienne en dessous de la page ?

R
Pour la mettre en dessous de la page, il suffit de remplacer le mot "top" (qui signifie "haut") dans le code, par le mot "bottom" (qui signifie "bas")


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> Fixer la barre de navigation   <Navigation> Fixer la barre de navigation EmptyVen 22 Juil 2011, 08:21
Revenir en haut Aller en bas
 

<Navigation> Fixer la barre de navigation

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

 Sujets similaires

-
» <Navigation> Barre de navigation fixée en haut de la fenêtre
» <Navigation> Mettre une Image sous la Barre de Navigation
» <Navigation> Barre de navigation qui disparait au scroll
» <Navigation> Barre de navigation au-dessus de la bannière
» <Navigation> Personnaliser la barre de navigation

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