Sujets similaires

Dernière édition par Laellyn le Lun 04 Nov 2013, 18:06, édité 1 fois

Coucou !

J'ai suivi le tuto suivant : Apparition progressive du corps du forum.

Cela a eu pour effet de masquer tout le forum à l'exception du footer. Je me suis alors dit que c'était peut être parce que je n'avais pas activé le module javascript sur le forum. J'ai donc activé ce module et cela n'a rien changé.

Alors j'ai supprimé une par une toutes les modifications faites dans le cadre du tuto indiqué plus haut. Lorsque j'ai publié, ma barre de navigation avait disparue.

Dans le overall header, le code que j'avais ajouté pour créer ma classe .navi avait été tout simplement viré. Je n'avais pourtant pas cliqué sur le bouton "Supprimer" dans les actions sur le template overall header. Bref, j'ai remis mon code pour retrouver ma barre de navigation.

Mais c'est bizarre. Smile

Ma question :
Au hover j'aimerais faire changer la couleur de fond au centre et qu'il y ait un dégradé transparent. J'ai essayé ce code, mais ça ne fait rien.

Code:: background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 3%,rgba(0,0,0,0.65) 36%,rgba(0,0,0,0) 100%);

Est-ce que vous auriez une idée ?

Voici mon CSS :

Code:: body {
margin : 0px;
background-position:center top;
background-image: url("http://i.imgur.com/j0xP3yV.jpg");
background-attachment: fixed;
background-color: #5A5E6B;
background-repeat:no-repeat;
}

.bodylinewidth {
   margin-bottom: 15px;
}

/*.nav {
display:none;
}*/

.mainmenu{
   font-size : 14px;
}

a.mainmenu img {
display:none;
}

/* Barre de navigation : fond */
.navi {
  position: fixed;
  top: 0px;
  z-index: 999;

  width: 992px; /*2 x 4px de bordure*/
  height:30px;

  margin-left:-500px; /* retirer la moitier de : la largeur du cadre (992px) + taille des bordures (2 x 4px) */
  left:50%;
  background-color: rgba(93,52,82,1);

  border:4px outset rgba(0,0,0,1);
  border-top:none;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;

  box-shadow: inset 0px -10px 2px -5px #723E64;

}

/*span.navi:hover{
background-color: rgba(93,52,82,1);
border:4px #000000 outset;
border-top:none;
}*/

.navi a.mainmenu{
  text-decoration:none!important;
color:#000000;
text-shadow: 2px 2px 2px #5A5E6B;
  margin:-5px;
  padding: 10px;

}

.navi a.mainmenu:hover {
  color : #BA9B61;
  text-shadow: 2px 2px 2px #370028;
  border-bottom:4px #BA9B61 solid;
  background:#723E64;
  /*box-shadow: inset 0px 0px 10px 8px rgba(93,52,82,1);*/
   background-image:radial-gradient(circle, #723E64, rgba(93,52,82,1));

}

.bodyline {
  border:none;
  background-color: transparent !important;
}

/* Titre des catégories */
.secondarytitle {
   text-align: left;
}

/* Supprimer les images forumactifs des entêtes de catégories */
td.catHead, th, tr.catBottom {
background-image: none!important;
background-color: rgba(114,62,100,0.8) !important;
color : #BA9B61;
   /*border:1px solid rgba(255,255,255,0.8);*/
}

.forumline {
  background-image: none !important;
  background-color: rgba(114,62,100,0.2) !important;

  /* cadre des catégories */
  border: 4px inset rgba(114,62,100,0.6);
  border-radius: 20px;
}

/* Espacement entre les tables du forum */
table.forumline {
  border-collapse:separate;
  border-spacing: 0;
  /*border-radius:20px;*/
}

/* Arrondi QEEL : entête */
.forumline tr:first-child td:first-child {
border-radius: 15px 15px 0 0;
}

/*Arrondi Catégories du forum : entêtes */
.forumline th:first-child {
  border-radius : 15px 0 0 0;
}
.forumline th:last-child {
  border-radius : 0 15px 0 0;
}

/* Arrondi Catégories du forum : pieds */
.forumline tr:last-child td:last-child {
  border-radius: 0 0 15px 0;
}

.forumline tr:last-child td:first-child {
  border-radius: 0 0 0 15px;
}

/* Modification de la zone de saisie : BUGGE
.textarea #text_editor_textarea {

  background-image: url('http://i.imgur.com/ayb0P59.png');
   background-repeat: no-repeat;
   background-position: top left;
   background-color: #xxxxxxx;
border: #000000 2px solid;
   border-radius : 10px;
}*/

/* encadrement de l avatar */
.postdetails.poster-profile a img {
border-radius:10px;
border: 4px solid #000000;
}

/* texte en justifié dans les messages */
.postbody {
   text-align: justify !important;
  padding-right : 30px;
  padding-left: 30px;
}

/* Arrondi sur zones de texte : BUGGUE
textarea, .textarea.post, input.post {
   border-radius:10px;
}*/

/* Transparence du forum : efface tout

  filter:alpha(opacity=90);
  opacity:0.9;*/

/* ruban online */
.online {
background-image: url('http://2img.net/i/fa/prosilver/icon_user_online.png');
background-position: 0 0;
background-repeat: no-repeat;
}

/*insérer une petite image dans les citations */
.quote {
  padding-left:30px;
  padding-right:30px;
  padding-top:10px;
  padding-bottom:10px;

background-image: url('http://i.imgur.com/g3FkDVw.png') !important;
background-repeat: no-repeat !important;
  background-position: 1px 1px !important;
  border-radius:10px;
  border: 2px outset #000000;
}

J'ai un peu de mal à comprendre ta description, mais chez moi le dégradé fonctionne.

Juste, petit conseil pour ta barre de navigation :
Enlève tout le tableau autour. Gardes juste span.navi, et la barre à l'intérieur. Remplace le span par une div. Suis ce tuto là : Centrer horizontalement un bloc. Le code sera bien plus propre Wink

Si j'ai bien compris, dans le overall_header, il faudrait remplacer ce code :

Code:: <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}><span class="navi">{GENERATED_NAV_BAR}</span></td>
</tr>
</table>

par celui ci ?

Code:: <div class="navi">{GENERATED_NAV_BAR}</div>

Citation :: J'ai un peu de mal à comprendre ta description, mais chez moi le dégradé fonctionne.

Oui, j'avoue que c'était d'une limpidité édifiante. XD
Dans mon .navi a.mainmenu:hover j'aimerais remplacer :

Code:: background-image:radial-gradient(circle, #723E64, rgba(93,52,82,1));

par

Code:: background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 3%,rgba(0,0,0,0.65) 36%,rgba(0,0,0,0) 100%);

Sauf que ce dernier code ne fonctionne pas et j'ignore pourquoi.

Pour la div, oui, c'est ce que je te conseille de faire Wink

. Tu verras que pour centrer (voir lien du tuto dans mon message précédent), c'est bien plus léger que ta méthode avec des valeurs négatives x).

Je viens de faire un essai du gradient sur mon forum, pour changer le fond :

Code:: body {background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 3%,rgba(0,0,0,0.65) 36%,rgba(0,0,0,0) 100%);}

Cela fonctionne parfaitement Wink

Nihil a écrit:: Pour la div, oui, c'est ce que je te conseille de faire . Tu verras que pour centrer (voir lien du tuto dans mon message précédent), c'est bien plus léger que ta méthode avec des valeurs négatives x).

je viens de tester et cela me colle tout à gauche. Il faut que je supprime "position:fixed;" dans la classe .navi pour que la barre se centre... mais elle ne reste pas en haut de l'écran lorsque je scroll. je suis vraiment une bille... ^^
[résolu] radial grandient dans la barre de navigation DSRKzUY

[résolu] radial grandient dans la barre de navigation DSRKzUY

Code:: .navi {
width: 992px; /*2 x 4px de bordure*/
height:30px;

/*position: fixed;*/
top: 0px;
z-index: 999;

display: block;
margin-left: auto;
margin-right: auto;

/*margin-left:-500px; retirer la moitier de : la largeur du cadre (992px) + taille des bordures (2 x 4px)
left:50%;*/

background-color: rgba(93,52,82,1);

border:4px outset rgba(0,0,0,1);
border-top:none;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;

box-shadow: inset 0px -10px 2px -5px #723E64;

}

Citation :

Je viens de faire un essai du gradient sur mon forum, pour changer le fond :

Code:: body {background: radial-gradient(ellipse at center, rgba(0,0,0,0.65) 3%,rgba(0,0,0,0.65) 36%,rgba(0,0,0,0) 100%);}

Cela fonctionne parfaitement Wink

crâneuse ! XD Ok, je vais creuser davantage alors. ^^

Waow c'est la première fois que je vois ce problème O__0. Effectivement, j'avais zappé que tu avais fixé, du coup de toutes les façon ça sera un peu chiant... Garde ta première méthode, ça sera plus simple Razz

.

Par contre, je comprends pas pourquoi ça marche pas pour le background, chez moi ça marche sur FF et Chrome.

Je viens de comprendre ! Quel gland alors...

Code initial :

Code:: background:#723E64;
background-image:radial-gradient(circle, #723E64, rgba(93,52,82,0));

J'avais mis un background par sécurité. Du coup la transparence se faisait avec une couleur de fond qui était la même que celle du cercle ce qui me donnait l'impression qu'il n'y avait pas de transparence.

Désolé... j'ai trop honte.

[résolu] radial grandient dans la barre de navigation

[résolu] radial grandient dans la barre de navigation

Sujets similaires

Sujets similaires

Partenaires Or