Problème de code, Catégories

[Anna's word]

Bonjour,

J'ai récemment acquis un code pour mettre des " barres " en fond de mes catégories. Une fois installé, tout va bien sauf que j'obtient ceci :


Comment faire pour que cet petit espace, néanmoins bien visible, disparaisse sans enlever l'effet arrondis des bords ?

Merci,

[no_way]

Bonjour, vous avez dans votre code CSS à deux reprises:

Code:


a.forumlink {
/*du code*/
}


dans la mesure ou le style déclaré la première fois est écrasé par la seconde, vous pouvez déjà supprimer:

Code:


a.forumlink
{
text-shadow: 1px 1px 1px #000;
}

ensuite la barre en fond n'est pas infinie d’où l'espace que vous remarquez, Il est sans doute préférable d'éliminer la répétition du fond:

Code:


a.forumlink {
background-color: #transparent;
text-shadow: #595959 1px 1px 1px;
background-image: url('http://i33.tinypic.com/fjfexh.png');
background-repeat:no-repeat;
color: #F7AFA3;
display: block;
font-family: GEORGIA;
font-size: 16px;
text-transform: uppercase;
text-align: center;
letter-spacing: -1px;
-moz-border-radius:5px;
-moz-box-shadow: 0px 2px 2px #a49896;
}



[Anna's word]

Merci d'avoir répondu si vite, j'essaye tout de suite !

[no_way]

Ok je vois que vous n'avez déjà plus la répétition, cela vous convient-il ?

[Anna's word]

Il me manque juste de la longeur au niveau de la " Barre " mais je n'ai cas en faire une plus longue avec un logiciel de retouche te la placer au bon endroit : C'est bien sa non ?

[no_way]

C'est possible, oui mais autant passer par du CSS pour générer les arrondis, ce serait plus souple, vous préférez la solution par image ?

[Anna's word]

Je veux bien avoir le code si possible, donc ce code me permetteras de garder l'image d'origine mais d'avoir une longeure suffisante c'est bien sa ? ( Je me répète...)

[no_way]

Non ce code va vous permettre d'obtenir un fond arrondi qui s'adaptera quel que soit la largeur disponible pour l'affichage des catégories.
Merci de patienter

[Anna's word]

Ok, merci encore ! J'aurais du poser la question plus tôt, j'ai mis du temps avant de me décider.. J'ai tellement de questions ! ;D

[no_way]

essayez avec ceci:

Code:


a.forumlink{
background-color:#e4d6c8;
text-shadow: #595959 1px 1px 1px;
color: #F7AFA3;
display: block;
font-family: GEORGIA;
font-size: 16px;
text-transform: uppercase;
text-align: center;
letter-spacing: -1px;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
-moz-box-shadow: 0px 2px 2px #a49896;
-webkit-box-shadow: 0px 2px 2px #a49896;
box-shadow:0px 2px 2px #a49896;
}

a.forumlink:hover{
text-shadow: #635f5e 1px 1px 1px;
}


Supprimez les anciennes versions sinon cela ne va pas fonctionner.

[Anna's word]

Sa me donne sa :

[no_way]

Supprimez les anciennes versions, ne gardez que la version se trouvant à la fin de votre CSS .
J'ai édité le code que je vous ai donné, prenez la dernière version

[Anna's word]

Merci, c'est bon ! J'ai oublier de préciser qu'il n'y avait plus les arrondis aussi..

[no_way]

comme je l'ai dit précédemment, supprimez les anciennes versions à savoir:

Code:


a.forumlink {

background-color: #transparent;
  text-shadow: #595959 1px 1px 1px;
  background-image: url('http://i33.tinypic.com/fjfexh.png');
background-repeat:no-repeat;
color: #F7AFA3;
display: block;
font-family: GEORGIA;
font-size: 16px;
text-transform: uppercase;
text-align: center;
letter-spacing: -1px;
-moz-border-radius:5px;
-moz-box-shadow: 0px 2px 2px #a49896;
}


a.forumlink:hover{
background-color: #transparent;
  text-shadow: #635f5e 1px 1px 1px;
  background-image: url('http://i33.tinypic.com/fjfexh.png');
color: #F7AFA3;
display: block;
font-family: GEORGIA;
font-size: 16px;
text-transform: uppercase;
text-align: center;
letter-spacing: -1px;
-moz-border-radius:5px;
-moz-box-shadow: 0px 2px 2px #a49896;
 }


de votre CSS, et reprenez la version que j'ai édité ( la dernière).

[Anna's word]

Sa marche, mais le demi arrondit n'y est plus, c'est possible de le remettre ?


J'ai enlevé tout sa et sa marche :

Code:

.forumline{
 -moz-border-radius: 15px;
padding: 5px;
border-color: #FCD3B0;
border: 3px solid;}


a.forumlink {

background-color: #transparent;
  text-shadow: #595959 1px 1px 1px;
  background-image: url('http://i33.tinypic.com/fjfexh.png');
background-repeat:no-repeat;
color: #F7AFA3;
display: block;
font-family: GEORGIA;
font-size: 16px;
text-transform: uppercase;
text-align: center;
letter-spacing: -1px;
-moz-border-radius:5px;
-moz-box-shadow: 0px 2px 2px #a49896;
}


a.forumlink:hover{
background-color: #transparent;
  text-shadow: #635f5e 1px 1px 1px;
  background-image: url('http://i33.tinypic.com/fjfexh.png');
color: #F7AFA3;
display: block;
font-family: GEORGIA;
font-size: 16px;
text-transform: uppercase;
text-align: center;
letter-spacing: -1px;
-moz-border-radius:5px;
-moz-box-shadow: 0px 2px 2px #a49896;
 }


[no_way]

Si je comprends bien, vous souhaitez avoir l'arrondi tout autour et pas seulement en haut à gauche et à droite ?


Je vais vous fournir votre code CSS complet, je pense que ce sera plus simple pour vous

[Anna's word]

Je voudrais que les deux etremitées soient arrondies... Voilà.
Pour mettre le code, il faudra surement que je supprime des codes non ?

[no_way]

Quelles extrémités ?
haut-gauche + haut-droite ?
bas-gauche + bas-droite ?
etc ...

Je n'arrive pas à saisir ce que vous souhaitez précisément, désolé.

[Anna's word]

Haut gauche et hau droit, en gardant l'épaisseur d'origine de ma barre ( qu'elle fasse a peu près la taille du texte

[no_way]

effacez tout votre css et mettez ce qui suit:

Code:


/*I. FORUM & MESSAGES*/
/*A. Présentations des liens*/
a{
font-family: calibri;
text-transform: uppercase;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
}

a:hover{
font-style: italic;
font-family: Georgia;
text-transform: lowercase;
}





/*V. BARRE NAVIGATION*/


a.mainmenu{
font-family: Impact;
font-size:13px;
letter-spacing: 1px;
background-color: #A38F7F;
text-transform: capitalize;
text-decoration:none}

.mainmenu:hover{
font-family: Georgia;
text-shadow: #ffffff 1px 1px 1px;
font-size: 15px;
font-style:italic;
color: ;
background-color: #FCD3B0;
text-transform: capitalize;
text-decoration: none;
}


/*--- Cette partie correspond à l'onglet "X messages dans X sujets" ---*/
.forum-stats {
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-radius:20px 20px 0px 0px;
border-radius:20px 20px 0px 0px;
border: 3px solid #000000;
border-bottom:none !important;
      color: #000000;
      font-size: 11px;
      font-style: italic;
      height: 14px;
      left: 280px;
      padding: 3px;
      position: relative;
      text-align: center;
      width: 200px;
}


/*E. Contour Avatars*/

.postdetails.poster-profile a img {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border: 9px solid #552D2D ;
}

.postdetails.poster-profile textarea { width: 200px;}


.postprofile textarea {
  /* les bords de haut et de bas */
  border: 3px;
  /* la largeur, le type et la couleur du bord droit */
  border-left: 2px solid #22FF22;
  /* la largeur, le type et la couleur du bord droit */
  border-right: 2px solid #22FF22;
  /* ça doit etre le rayon de l'arrondi */
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

}


/*VI. FOND FIXE ET CENTRER*/

body {
background-repeat: no-repeat;
background-position: top center;
}


/*IV. QEEL*/




.groupes{
width: 300px;
background-color: #FFFFFF;
border: 0px dotted #362308;
-moz-border-radius:15px 0px 15px 0px;
-webkit-border-radius:15px 0px 15px 0px;
border-radius:15px 0px 15px 0px;
}

.forumline{
padding:5px;
background-color: ##552D2D;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
border: 8px #552D2D solid;}

a.forumlink:before {
content:" • ";
}

a.forumlink{
background-color:#e4d6c8;
text-shadow: #595959 1px 1px 1px;
color: #F7AFA3;
display: block;
font-family: GEORGIA;
font-size: 16px;
text-transform: uppercase;
text-align: center;
letter-spacing: -1px;
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
-moz-box-shadow: 0px 2px 2px #a49896;
-webkit-box-shadow: 0px 2px 2px #a49896;
box-shadow:0px 2px 2px #a49896;
}

a.forumlink:hover{
text-shadow: #635f5e 1px 1px 1px;
}



[Anna's word]

Rien n'a changé :$

[no_way]

moi je vois Règlement tout à fait comme vous le souhaitiez pourtant

[Anna's word]

Ha ok ! Je suis internet explorer donc bien sur, on ne le voit pas mais sur mozilla c'est bon ! Merci Beaucoup ! Je peut donc mettre résolut

Merci encore !

[no_way]

non ce n'est pas bon j'ai oublié un padding:
ré-effacez votre CSS actuel et recollez le CSS que je vous ai donné, je l'ai édité.

[Anna's word]

Ok, je change

[Anna's word]

C'est parfait ( merci pour les arrondis des " parties " c'est mieux comme sa ^^' ) Enfin, si j'ai une autre question... je la pose ici ou ailleurs ?

[no_way]

Super alors, tout dépend de la nature de question, si c'est pour du code CSS,JavaScript, HTML etc... c'est bien dans ce forum .

Bon courage pour la suite .

[Anna's word]

Merci

[no_way]

Service @++