Apparence de mes onglets/catégories

3 participants

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

Résolu Apparence de mes onglets/catégories

Message par lunasims57 Mer 4 Juin 2014 - 21:41

Bonjour !

J'ai mis mes catégories en onglet, avec je ne sais plus quel tutoriel. Bref, voilà ce que j'ai :

Apparence de mes onglets/catégories Nyanyo10

J'aimerais savoir comment centrer verticalement le titre de ma catégorie ! J'ai essayé avec le code suivant mais ça n'a pas marché :
Code:
#nav_cat li {
vertical-align:middle;
}

Comment faire, est-ce que c'est possible au moins ?
J'aimerais aussi éviter que le titre de ma catégorie (Paperasse par ex) apparaisse en double comme ça, mais je pense que ce n'est pas possible par contre.

Voilà, merci de bien vouloir m'aider Very Happy
(désolé de poster aussi souvent, je suis accro au forum des forums je crois !)


Dernière édition par lunasims57 le Jeu 5 Juin 2014 - 17:24, édité 1 fois
lunasims57

lunasims57
**

Féminin
Messages : 85
Inscrit(e) le : 27/11/2011

http://tsuki-no-gakuen.forumactif.org/
lunasims57 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de mes onglets/catégories

Message par Angelofdeath117 Jeu 5 Juin 2014 - 12:00

Bonjour luna,

Je ne suis pas un grand spécialiste donc je ne te garantis pas d'arriver à régler ton soucis mais je vais essayé ^^

Essaies donc de mettre ce code là à la place de ton actuel

Code:
#nav_cat li {
vertical-align: middle !important;
text-align: center;
}
avatar

Angelofdeath117
**

Masculin
Messages : 93
Inscrit(e) le : 02/07/2013

http://lfares.forumgratuit.org/
Angelofdeath117 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de mes onglets/catégories

Message par MlleAlys Jeu 5 Juin 2014 - 13:30

Bonjour,
Si le code de Angelofdeath117 ne fonctionne pas, vous pouvez essayer comme ça :

Vous devriez avec un code de ce type dans votre css :
Code:
#nav_cat li {
  background: url(http://i55.servimg.com/u/f55/18/83/38/44/fond211.jpg);
  border: 10px solid url(http://i55.servimg.com/u/f55/18/83/38/44/fond211.jpg);
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  color: #5E3430;
  cursor: pointer;
  float: left;
  font-size: 20px;
  font-variant: small-caps;
  height: 45px;
  list-style: none;
  margin-left: 1px;
  margin-right: 1px;
  padding: 2px 5px 7px;
  text-align: center;
  text-vertical-align: middle;
  vertical-align: middle!important;
  width: 188px;
  z-index: 1;
}

Il y a pas mal de petits soucis...
- la ligne border: 10px solid url(https://i.servimg.com/u/f55/18/83/38/44/fond211.jpg); n'est pas correcte et donc pas prise en compte, elle ne sert à rien, une image ne peut pas être mise en bordure via ce code.
- la ligne text-vertical-align: middle; n'est pas correcte non plus, "text-vertical-align" n'est pas une propriété, il s'agit simplement de "vertical-align"
- les important! servent à écraser une valeur mise directement dans la balise de l'élément concerné, ou bien dans un autre code css, ici il ne sert à rien puisque c'est la seule propriété vertical-align précisée pour cet élément.

- la propriété vertical-align est valable entre autre pour des cellules de tableau, ce que l'on peut utiliser ici en ajoutant à ce code css la propriété : display:table-cell;
- cela ne semble rien changer, à cause de la ligne float:left; , que l'on peut cependant retirer.
- on peut alors retirer d'autres propriétés qui ne servent plus, et ajuster les padding, etc,

Ce qui donne :

Code:
#nav_cat li {
  background: url(http://i55.servimg.com/u/f55/18/83/38/44/fond211.jpg);
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  color: #5E3430;
  cursor: pointer;
  font-size: 20px;
  font-variant: small-caps;
  display: table-cell;
  width: 200px;
  padding: 5px 10px;
  text-align: center;
  vertical-align: middle;
}

et pour retrouver la marge entre les onglets, on peut ajouter en plus le code :
Code:
ul#nav_cat_onglets {
  display: table;
  border-spacing: 3px 0;
}
MlleAlys

MlleAlys
Membre actif

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

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

Résolu Re: Apparence de mes onglets/catégories

Message par lunasims57 Jeu 5 Juin 2014 - 17:23

Angelofdeath117 : Nan, ça ne change rien ! Merci quand même ! :3

MlleAlys : Je me doutais bien que "text-vertical-align:" ne marchait pas (j'avais un peu bidouillé au pif) mais pour la bordure je ne savais pas !
En tout cas, ces codes marchent comme désiré, merci beaucoup Smile !

Je vais laisser tomber le truc des titres en doubles, je pense que c'est inévitable de toute façon.
Merci du coup de main !
lunasims57

lunasims57
**

Féminin
Messages : 85
Inscrit(e) le : 27/11/2011

http://tsuki-no-gakuen.forumactif.org/
lunasims57 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de mes onglets/catégories

Message par MlleAlys Jeu 5 Juin 2014 - 18:12

oh pardon, j'ai oublié cela !
Essayez d'ajouter ce code css :
Code:
div.table-title h2 {
  display: none;
}
et vérifiez par contre que ça n'efface pas d'autres titres sur le forum ^^"
MlleAlys

MlleAlys
Membre actif

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

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

Résolu Re: Apparence de mes onglets/catégories

Message par lunasims57 Jeu 5 Juin 2014 - 18:16

Wahou ça marche aussi ! J'aurais pas cru ! Mercii :3
lunasims57

lunasims57
**

Féminin
Messages : 85
Inscrit(e) le : 27/11/2011

http://tsuki-no-gakuen.forumactif.org/
lunasims57 a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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