encadrer la barre de navigation

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu encadrer la barre de navigation

Message par julien11 le Jeu 8 Mar 2012 - 14:01

Bonjour à tous,je voudrais savoir si il est possible d'encadrer ma barre de navigation:
J'ai les lien acceuil;portail;calendrier etc,et je voudrais les avoirs dans un cadre si c'est possible.
Je n'ai pas trouver de tuto correspondants à me demande et me tourne donc vers vous.
Est-il possible aussi de faire en sorte que les cadres de la barre de nav et ceux des catégorie(à propos;présentation etc...)soit en bord arrondis et non en angle droit?

Si ces modifs ne sont pas trop complexes à effectuer,car novice en la matière.
Je n'ai pas modifier les ccs ni les templates,le forum est un phpbb2 et je suis sous chrome.
Dans l'attente de vos réponses,merci d'avance de vos lumières
cordialement.

julien11
*

Masculin
Messages : 48
Inscrit(e) le : 31/01/2012

http://lesquadeursdelaude.forumgratuit.fr/
julien11 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: encadrer la barre de navigation

Message par Dr. Karlos le Jeu 8 Mar 2012 - 16:26

Bonjour,

En passant par les templates, c'est faisable.

Dans votre template overall_header (PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS), trouvez cette partie:
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
Et remplacez-la par celle-ci:
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
               <tr>
                  <td align="{MENU_POSITION}"{MENU_NOWRAP} id="barredenav">{GENERATED_NAV_BAR}</td>
               </tr>
            </table>
N'oubliez pas de valider la modification en appuyant sur ajout.

Par la suite, insérez ce code dans votre CSS (PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS):
Code:
#barredenav {
border: 10px TYPE #couleur;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
Modifiez 10px par la taille de la bordure désirée.
Modifiez TYPE par solid (barre complète), dotted (barre pointillée), dashed (barre plus pointillée), etc.
Modifiez #couleur par le code de couleur désirée. Wink

En ce qui concerne le 0px, mettez la même valeur partout pour l'arrondissement puisqu'il s'agit de différents codes pour différents navigateurs.


Pour arrondir les coins de vos catégories, il faut insérer ce code à la suite de l'autre dans votre CSS:
Code:
.forumline {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

Procédez de la même façon pour modifier les 0px. Wink


Cordialement.

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: encadrer la barre de navigation

Message par julien11 le Jeu 8 Mar 2012 - 17:52

Merci beaucoup pour la rapidité,la barre de nav c'est bon,je n'ai plus qu'à changer la couleur à l'intérieur,par contre les arrondis ne machent pas,les bords sont bien effacer mais le remplissage du cadre est toujours là et doit masquer l'arrondis,une soluce?

julien11
*

Masculin
Messages : 48
Inscrit(e) le : 31/01/2012

http://lesquadeursdelaude.forumgratuit.fr/
julien11 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: encadrer la barre de navigation

Message par julien11 le Jeu 8 Mar 2012 - 18:30

Remplissage de la barre de nav fait,merci les tutos ;-)
manque plus que les arrondis des cadres,je suis à 9px mais c'est pareil,j'ai pas trouver de solution...
Si quelqu'un en a je suis preneur
Merci

julien11
*

Masculin
Messages : 48
Inscrit(e) le : 31/01/2012

http://lesquadeursdelaude.forumgratuit.fr/
julien11 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: encadrer la barre de navigation

Message par Dr. Karlos le Jeu 8 Mar 2012 - 22:50

Bonsoir,

Quelle est l'adresse de votre forum et pouvez-vous coller le CSS que vous avez utilisé?

Quel navigateur utilisez-vous?


Cordialement.

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: encadrer la barre de navigation

Message par julien11 le Ven 9 Mar 2012 - 1:36

http://lesquadeursdelaude.forumgratuit.org

#barredenav {background-color: #121010;
border: 04px solid #121010;
-webkit-border-radius: 04px;
-moz-border-radius: 04px;
border-radius: 04px;
}.forumline {
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;


Et mon navigateur est chrome.
Merci d'avance.

julien11
*

Masculin
Messages : 48
Inscrit(e) le : 31/01/2012

http://lesquadeursdelaude.forumgratuit.fr/
julien11 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: encadrer la barre de navigation

Message par Dr. Karlos le Ven 9 Mar 2012 - 1:48

Bonsoir,

Il manque une accolade à votre code.

Remplacez votre CSS par celui-ci:
Code:
#barredenav {background-color: #121010;
border: 04px solid #121010;
-webkit-border-radius: 04px;
-moz-border-radius: 04px;
border-radius: 04px;
}

.forumline {
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}


Cordialement.

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: encadrer la barre de navigation

Message par julien11 le Ven 9 Mar 2012 - 1:54

bonsoir,c'est pareil,j'ai zapper la dernière accolade quand j'ai fait le copier/coller,je l'ai refait quand même et c'est pareil.

#barredenav {background-color: #121010;
border: 04px solid #121010;
-webkit-border-radius: 04px;
-moz-border-radius: 04px;
border-radius: 04px;
}

.forumline {
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}

julien11
*

Masculin
Messages : 48
Inscrit(e) le : 31/01/2012

http://lesquadeursdelaude.forumgratuit.fr/
julien11 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: encadrer la barre de navigation

Message par Dr. Karlos le Ven 9 Mar 2012 - 2:04

Re,

Vos coins sont bien arrondis, mais la bordure est trop petite et d'autres cadres cachent les coins.

Vous pouvez insérer ce code dans le CSS pour augmenter la largeur de la bordure:
Code:
.forumline {
border: 3px black solid;
}

Ou insérer celui-ci afin d'arrondir les autres coins:
Code:
td.row1{
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
border-bottom-left-radius: 9px;
}

td.row3 {
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-right-radius: 9px;
}

th {
-webkit-border-top-left-radius: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topleft: 9px;
-moz-border-radius-topright: 9px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}


Cordialement.

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: encadrer la barre de navigation

Message par julien11 le Ven 9 Mar 2012 - 2:19

Yes!!!Super
j'ai mis les deux et le rendu est génial!
Dites moi juste si je peut laisser ces deux codes ensembles, apparemment ça à l'air d'aller ,puis je cocherais résolu.
Merci.

julien11
*

Masculin
Messages : 48
Inscrit(e) le : 31/01/2012

http://lesquadeursdelaude.forumgratuit.fr/
julien11 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: encadrer la barre de navigation

Message par Dr. Karlos le Ven 9 Mar 2012 - 2:28

Re,

Je vous confirme: il n'y a a aucun problème à utiliser les deux codes. Wink


Cordialement.

Dr. Karlos
+ Hyperactif +

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

http://www.forum.forumactif.com
Dr. Karlos a été remercié(e) par l'auteur de ce sujet.

Résolu Re: encadrer la barre de navigation

Message par julien11 le Ven 9 Mar 2012 - 2:32

Ok,super,merci beaucoup Dr.Karlos
merci pour tout
Cordialement.
re- merci
salut

julien11
*

Masculin
Messages : 48
Inscrit(e) le : 31/01/2012

http://lesquadeursdelaude.forumgratuit.fr/
julien11 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum