Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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
avatar

ab0utxme
*

Féminin
Messages : 44
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
avatar

ab0utxme
*

Féminin
Messages : 44
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
avatar

ab0utxme
*

Féminin
Messages : 44
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 ^^
avatar

MlleAlys
Membre actif

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

http://mllealys2.forumactif.org/
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 ^^
avatar

ab0utxme
*

Féminin
Messages : 44
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