Alignement vertical des titres de catégories (CSS)

[Patchulea]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Safari
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum :

Description du problème

Bonsoir,

je viens demander votre aide après m'être arrachée les cheveux sur ma feuille de CSS. J'ai modifié certains de mes templates, notamment index_box afin de supprimer les colonnes "Sujets" et "Message" sur l'index. Avec du CSS, j'ai souhaité ajouter un fond à mes titres de catégories : il s'agit d'une image de 800x32. Mais je ne parviens pas à centrer verticalement les titres de mes catégories (voir capture d'écran). J'ai appris le CSS en bidouillant, et même après plusieurs tentatives/variantes, je ne m'y prends visiblement pas correctement.

La partie du CSS qui m'intéresse est celle-ci :

Code:

.secondarytitle /*TITRE DES CATÉGORIES*/ {
font-family: Hammersmith One;
text-transform:uppercase;
width:800px;
height:32px;
font-size:17px;
display:block;
margin-left:auto;
margin-right:auto;
vertical-align:middle !important;
background-image:url("https://i.imgur.com/GdC7L1g.png");
}


Merci d'avance pour votre aide!

[Faline]

Bonsoir,

Il me semble qu'il manque juste un

Code:

text-align:center;

voir http://www.startyourdev.com/css/style-css-text-align

[Patchulea]

Bonsoir Faline, merci pour la réponse rapide. Je viens d'ajouter ça à mon CSS, mais cela n'a rien changé à l'alignement vertical du texte par rapport à l'image de fond…

[Faline]

Il y a confusion/mélange entre les identifiants .secondarytitle et .cattitle .

Pour la ligne incriminée sur la copie d'écran il faut s'occuper du style .cattitle .

Comme en plus le lien du forum concerné n'est pas connu, on ne peut rien vérifier là-bas.

Chez moi (sur tous mes forums) le centrage vertical est la version par défaut.

Pour abaisser localement, on pourra peut-être mettre un

Code:

margin-top:7px;

(valeur à adapter).

[Patchulea]

Merci pour la réponse. J'ai ajouté ceci à ma feuille de CSS :

Code:

.cattitle{
vertical-align:middle !important;
margin-top:7px !important;
}

Malgré le "forçage", rien ne change…  
Si avoir le lien vers le forum peut être utile, le voici : http://tanztraume.1fr1.net (il s'agit d'un forum de tests).

[Faline]

Merci pour le lien. Je vois le code

Code:

<table class="fondtitres"><tbody><tr valign="center"><td><span class="secondarytitle"><center><h2>Ressources</h2></center></span></td></tr></tbody>

Le

Code:

valign="center"

devrait être corrigé.

[Patchulea]

Où est-ce que je dois faire la modification? Dans un des templates?

[Faline]

J'ai l'impression que c'est inscrit directement dans le template  index_box . Faire une recherche pour trouver l'endroit exact.

[◦Jay◦]

Bonjour, dans votre CSS, à .secondarytitle, changez la hauteur qui est à présent de 32px par :

padding-top:10px;
height:22px;

Bien à vous.

[Patchulea]

Merci beaucoup Jay, ça a réglé le problème!
Merci encore pour votre aide, Faline.

Problème résolu.