encadrer la barre de navigation

[julien11]

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.

[Dr. Karlos]

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 .

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.

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.


Cordialement.

[julien11]

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]

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

[Dr. Karlos]

Bonsoir,

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

Quel navigateur utilisez-vous?


Cordialement.

[julien11]

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.

[Dr. Karlos]

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.

[julien11]

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;
}

[Dr. Karlos]

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.

[julien11]

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.

[Dr. Karlos]

Re,

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


Cordialement.

[julien11]

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