onglets niveaux inférieurs, arrondir les angles

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

Résolu onglets niveaux inférieurs, arrondir les angles

Message par /dm61 le Mar 17 Mar 2015 - 18:01

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Moi uniquement
Lien du forum : http://agricultrices.forumactif.org/

Description du problème

Bonjour,

Je suis en train d'essayer de personnaliser les onglets des sous-forums en suivant les indications de ce tutoriel : http://tokilltime.forumactif.org/t266-onglets-pour-les-niveaux-inferieurs
mais j'ai un résultat où les angles ne ressortent pas arrondis
donc je voudrais savoir qu'est-ce qu'il faut modifier ou rajouter ?
et j'aimerais aussi que les onglets soient décollés de l'image de la catégorie
je fais mon essaie sur celui-ci : http://louraynal.forumactif.org/
Merci de votre réponse


Dernière édition par dymo le Mar 17 Mar 2015 - 19:46, édité 1 fois

/dm61
**

Messages : 59
Inscrit(e) le : 16/02/2015

http://agri-occitanie.forumactif.org/
/dm61 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: onglets niveaux inférieurs, arrondir les angles

Message par MlleAlys le Mar 17 Mar 2015 - 19:04

Bonjour,

Le tutoriel vous donne le code css suivant :
Code:

.def {
  background-color: #ccd6db;
  -moz-border-radius:10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 3px;
}
Complétez le ainsi :
Code:

.def {
  background-color: #ccd6db;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 3px;
}

border-radius est la propriété css qui permet d'arrondir les coins de l'élément. Si on ajoute un préfixe -moz- ou -webkit- devant, on s'adresse aux versions précédentes des navigateurs mozilla ou chrome/safari qui ne reconnaissent pas encore la propriété générale (sans le préfixe). Le mieux est donc de mettre les trois, en mettant toujours la générale après les autres ^^

Pour n'arrondir que les coins du haut des onglets, vous pouvez remplacer
Code:
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius: 10px;
par :
Code:
  -moz-border-radius:10px 10px 0 0;
  -webkit-border-radius:10px 10px 0 0;
  border-radius: 10px 10px 0 0;

Les quatre valeurs indiquées correspondent alors à l'arrondi du coin en haut à gauche, puis à l'arrondi du coin en haut à droite, puis en bas à droite et enfin en bas à gauche.

MlleAlys
+ Hyperactif +

Messages : 4340
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: onglets niveaux inférieurs, arrondir les angles

Message par R-max le Mar 17 Mar 2015 - 19:24

bonsoir j'aller poster mais vous êtes plus rapide que moi ^^.
mais aussi serez t'il pas utile aussi de supprimer les image (corner) !!!!! bas gauche ,et bas droite , !!!!!
car c'est le bas qui doit être arrondie.

bonne soirée

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: onglets niveaux inférieurs, arrondir les angles

Message par /dm61 le Mar 17 Mar 2015 - 19:45

oui c'est bon ça fonctionne, c'est parfait
merci Very Happy

(j'édite et marque résolu)

/dm61
**

Messages : 59
Inscrit(e) le : 16/02/2015

http://agri-occitanie.forumactif.org/
/dm61 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