Problème de CSS + Html

[Anadéia]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://doyourworst.forumactif.com/

Description du problème

Bonjour !

En codant une fiche, je me suis rendue compte qu'il m'était impossible de changer la place du titre sur cette dernière. Voici l'image expliquant le problème : https://zupimages.net/up/18/18/rm0k.png

Comme vous pouvez le voir, le titre ("LE RESPECT") sort du bloc et il m'est impossible de le centrer. J'ai réussi à le mettre à gauche, à droite, mais pas à le relever pour qu'il ne sorte plus du cadre ! Voici le html de ma fiche :

HTML:

Et le CSS :

CSS:

Je n'ai pas de CSS correspondant au titre puisque je désespérais à le voir sortir du cadre >< J'ai essayé margin-bottom; mais rien à faire, il ne bouge pas de place.

Merci d'avance pour vos réponses !

[Lixyr]

Bonjour,

Vous pouvez demander à la div qui contient les titres de se "tirer" un peu plus vers le haut. Rajoutez ceci dans le CSS :

Code:

.title2, .title {
    margin-top: -8px;
}

[Scoubifitz]

Bonsoir ,

Une autre façon de faire est de mettre une hauteur de ligne équivalente à la hauteur du cadre .
Dans votre cas , c'est 0px ...

Code:

.title_font {
width: 340px;
height: 0px;
background: transparent;
border-right: 12px solid transparent;
border-top: 12px solid #e4e4e4;
border-left: 12px solid #e4e4e4;
border-bottom: 12px solid #e4e4e4;
line-height:0px;
}
 
.title_font2 {
width: 340px;
height: 0px;
background: transparent;
border-right: 12px solid #e4e4e4;
border-top: 12px solid #e4e4e4;
border-left: 12px solid transparent;
border-bottom: 12px solid #e4e4e4;
line-height:0px;
}

[Lixyr]

Cette solution fonctionne aussi, et est peut-être mieux que ce que je propose.

[Anadéia]

Super ! J'ai utilisé ton code Scoubifitz et ça marche, le titre est enfin centré dans le cadre. Merci beaucoup à vous deux