chevauchement de texte

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

Résolu chevauchement de texte

Message par ab0utxme le Dim 12 Juil 2015 - 13:09

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://valoransbattlefront.forumactif.org/

Description du problème

Bonjour à tous,
Dans mes catégories, j'ai les titres de mes sous-forums qui se chevauche. Cependant, je n'ai pas ce soucis sur Chrome (d'où le fait que je n'ai pas vu tout de suite.) J'aimerais savoir comment résoudre ce problème ^^
Merci Smile


Dernière édition par ab0utxme le Ven 17 Juil 2015 - 13:29, édité 1 fois

ab0utxme
*

Féminin
Messages : 39
Inscrit(e) le : 04/04/2012

http://valoransbattlefront.forumactif.org/
ab0utxme a été remercié(e) par l'auteur de ce sujet.

Résolu Re: chevauchement de texte

Message par ab0utxme le Mar 14 Juil 2015 - 16:05

J'ai finalement mis des espaces en attendant mais j'attends toujours une solution pour que les deux navigateurs face la même chose ^^
Edit : Ca décale dans mes sous forums ce qui est trèèèès embêtant Sad

ab0utxme
*

Féminin
Messages : 39
Inscrit(e) le : 04/04/2012

http://valoransbattlefront.forumactif.org/
ab0utxme a été remercié(e) par l'auteur de ce sujet.

Résolu Re: chevauchement de texte

Message par ab0utxme le Jeu 16 Juil 2015 - 20:47

UP

ab0utxme
*

Féminin
Messages : 39
Inscrit(e) le : 04/04/2012

http://valoransbattlefront.forumactif.org/
ab0utxme a été remercié(e) par l'auteur de ce sujet.

Résolu Re: chevauchement de texte

Message par MlleAlys le Ven 17 Juil 2015 - 1:25

Bonjour,

On peut voir deux stratégies pour répondre à votre problème :

- Soit garder le retour à la ligne mais augmenter la hauteur de celle-ci pour éviter le chevauchement :


- Soit empêcher le retour à la ligne, au risque que le texte ne dépasse à droite du cadre s'il est trop long :




Tout d'abord... :
Une petite correction facultative mais qui peut simplifier pas mal de chose dans votre css si vous en avez beaucoup :
Lors d'effets au survol grâce à la pseudo-class :hover, vous n'avez pas besoin de remettre toutes la mise en forme de l'élément, il suffit juste de mettre ce qui est modifié.
Autrement dit :
- Localisez le code suivant dans votre feuille style :
Code:
.under a:hover {
  -moz-transition: All 3s ease;
  background: #000;
  border-left: 2px solid #161412;
  border-right: 2px solid #161412;
  display: block;
  font-size: 10px!important;
  height: 20px;
  padding: 5px;
  text-align: center;
  text-transform: Uppercase;
  width: 140px;
}
- La seule chose changeant entre l'élément en temps normal et quand on le survol étant la couleur de fond, vous pouvez simplifier le code ainsi :
Code:
.under a:hover {
  background: #000;
}
- enregistrez ^^


Revenons au vif du sujet...

Pour garder le retour à la ligne mais éviter le chevauchement :



- dans votre css, localisez le code suivant :
Code:
.under a {
  background: #161412;
  border-left: 2px solid #161412;
  border-right: 2px solid #161412;
  display: block;
  font-size: 10px!important;
  height: 20px;
  padding: 5px;
  text-align: center;
  text-transform: Uppercase;
  width: 140px;
}
- Ajoutez line-height: 10px; ce qui donne :
Code:
.under a {
  background: #161412;
  border-left: 2px solid #161412;
  border-right: 2px solid #161412;
  display: block;
  font-size: 10px!important;
  height: 20px;
  padding: 5px;
  text-align: center;
  text-transform: Uppercase;
  width: 140px;
  line-height: 10px;
}
- Enregistrez ^^

Ou bien pour empêcher le retour à la ligne et centrer verticalement le texte dans le cadre :



- Localisez le code css suivant (le même que pour la méthode au dessus ^^) :
Code:
.under a {
  background: #161412;
  border-left: 2px solid #161412;
  border-right: 2px solid #161412;
  display: block;
  font-size: 10px!important;
  height: 20px;
  padding: 5px;
  text-align: center;
  text-transform: Uppercase;
  width: 140px;
}
- Pour empêcher le retour à la ligne, ajoutez white-space: nowrap; et pour centrer verticalement, comme le bloc a une hauteur de 20px, on applique une hauteur de ligne de 20px, ce qui donne :
Code:
.under a {
  background: #161412;
  border-left: 2px solid #161412;
  border-right: 2px solid #161412;
  display: block;
  font-size: 10px!important;
  height: 20px;
  padding: 5px;
  text-align: center;
  text-transform: Uppercase;
  width: 140px;
  white-space: nowrap;
  line-height: 20px;
}
- enregistrez ^^

MlleAlys
+ Hyperactif +

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

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

Résolu Re: chevauchement de texte

Message par ab0utxme le Ven 17 Juil 2015 - 13:28

Bonjour !

Merci d'avoir apporter votre aide Smile
J'ai modifié le CSS comme vous avez proposé et c'est vrai que rien n'a changé. Effectivement, ça allège un peu :p
J'ai opté pour la première solution pour une histoire d'esthétisme. Les membres qui sont sur Firefox m'ont prévenu que le soucis est réglé !

J'édite donc le post ! Résolu ! Encore merci ^^

ab0utxme
*

Féminin
Messages : 39
Inscrit(e) le : 04/04/2012

http://valoransbattlefront.forumactif.org/
ab0utxme 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