Alignement vertical des titres de catégories (CSS)

3 participants

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

Résolu Alignement vertical des titres de catégories (CSS)

Message par Patchulea Mer 24 Jan 2018 - 17:43

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!
Patchulea

Patchulea
Nouveau membre

Messages : 8
Inscrit(e) le : 24/01/2018

Voir le profil de l'utilisateur http://blackwood.forumactif.com
Patchulea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des titres de catégories (CSS)

Message par Faline Mer 24 Jan 2018 - 17:54

Bonsoir,

Il me semble qu'il manque juste un
Code:
text-align:center;

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

Faline
Membre habitué

Féminin
Messages : 1480
Inscrit(e) le : 16/08/2006

Voir le profil de l'utilisateur https://laststickers.forumactif.com
Faline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des titres de catégories (CSS)

Message par Patchulea Mer 24 Jan 2018 - 18:02

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…
Patchulea

Patchulea
Nouveau membre

Messages : 8
Inscrit(e) le : 24/01/2018

Voir le profil de l'utilisateur http://blackwood.forumactif.com
Patchulea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des titres de catégories (CSS)

Message par Faline Mer 24 Jan 2018 - 20:57

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).
Faline

Faline
Membre habitué

Féminin
Messages : 1480
Inscrit(e) le : 16/08/2006

Voir le profil de l'utilisateur https://laststickers.forumactif.com
Faline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des titres de catégories (CSS)

Message par Patchulea Jeu 25 Jan 2018 - 11:30

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…  Neutral
Si avoir le lien vers le forum peut être utile, le voici : http://tanztraume.1fr1.net (il s'agit d'un forum de tests).
Patchulea

Patchulea
Nouveau membre

Messages : 8
Inscrit(e) le : 24/01/2018

Voir le profil de l'utilisateur http://blackwood.forumactif.com
Patchulea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des titres de catégories (CSS)

Message par Faline Jeu 25 Jan 2018 - 16:50

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é.
Faline

Faline
Membre habitué

Féminin
Messages : 1480
Inscrit(e) le : 16/08/2006

Voir le profil de l'utilisateur https://laststickers.forumactif.com
Faline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des titres de catégories (CSS)

Message par Patchulea Jeu 25 Jan 2018 - 17:48

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

Patchulea
Nouveau membre

Messages : 8
Inscrit(e) le : 24/01/2018

Voir le profil de l'utilisateur http://blackwood.forumactif.com
Patchulea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des titres de catégories (CSS)

Message par Faline Jeu 25 Jan 2018 - 19:33

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

Alignement vertical des titres de catégories (CSS) 510
Faline

Faline
Membre habitué

Féminin
Messages : 1480
Inscrit(e) le : 16/08/2006

Voir le profil de l'utilisateur https://laststickers.forumactif.com
Faline a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des titres de catégories (CSS)

Message par ◦Jay◦ Ven 26 Jan 2018 - 8:10

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

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

Bien à vous.
◦Jay◦

◦Jay◦
Membre actif

Masculin
Messages : 4230
Inscrit(e) le : 24/12/2014

Voir le profil de l'utilisateur https://forum.forumactif.com
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alignement vertical des titres de catégories (CSS)

Message par Patchulea Sam 27 Jan 2018 - 12:41

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

Problème résolu.
Patchulea

Patchulea
Nouveau membre

Messages : 8
Inscrit(e) le : 24/01/2018

Voir le profil de l'utilisateur http://blackwood.forumactif.com
Patchulea 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