28172 sujets

CSS et mise en forme, CSS3

Saut de ligne annule ma div

Bonjour à tous,

Je voudrais changer la taille de la police de la description de catégorie woocommerce.
De base elle est sous l'attribut p en css.

Mais je voudrais changer la taille seulement sur les descriptions catégorie produit et pas sur tout les p.

Pour moi dans la description il suffit de mettre :
HTML :
<div class="XXX">Mon texte </div>

CSS:
.XXX{
	font-size: 14px;
}


Ce code fonctionne par contre si je fait des sauts de ligne dans mon texte HTML cela annule ma div

Exemple :
HTML:
<div class="XXX">Mon texte <br /><br /> Mon autre texte </div>

CSS :
.XXX{
	font-size: 14px;
}

"Mon texte" est bien à la taille voulu mais "Mon autre texte" n'a pas été pris en compte

Si je veux que "Mon autre texte" le sois il faut que je le note comme ceci :
HTML:
<div class="XXX">Mon texte <br /><br /><div class="XXX"> Mon autre texte </div>


Mais je pense vraiment pas que cela sois comme ça que ça marche.

Merci d'avance pour vos réponses. Smiley smile
Bonjour et bienvenue sur le forum,

Ton CSS est correct, comme le montre l'exemple ici.

Il doit y avoir un soucis au niveau de ton HTML, probablement une balise qui se ferme/ou s'ouvre alors qu'elle ne devrait pas.
Est-ce que tu connais le doctype utilisé sur ta page ? Pour voir si les <br /> écrit comme ça pourrait poser soucis ou non (même si je ne verrais pas trop pourquoi... Smiley biggol )
Bonjour SolidSnake et merci pour ta réponse,

ça m'a éviter de résortir "HTML et CSS pour les nuls " ^^

Dans ce cas le problème pourrais t-il venir du php ?

De base je ne pouvais pas utiliser de balises dans mon cadre description catégorie (elles ce supprimées à chaque enregistrement).

Après plusieurs recherche, je me suis rendu compte que woocommerce bloqué des commandes et il fallait ajouter quelques lignes dans fonction.php.

L'explication ici

Es-ce que cela pourrais avoir une influence sur mon problème ?
Bonjour,

Pitêtre que ça vient de là (après ça manque un peu de code), le plus simple pour vérifier, tu vas sur ta page en question, tu inspectes le code avec ton navigateur, voir si ton HTML est correct.
Merci Solid Snake ça avance Smiley smile

Effectivement dans mon code source j'ai des balises qui ne devrait pas être la

Pour faire simple le code source est le suivant :

<div class="term-description"><div class="XXX">Mon texte?</p><p>Mon autre texte?</p></div>


Alors que dans mon interface de modification le code apparaît ainsi :
<div class="XXX">Mon texte?<br /><br />Mon autre texte?</div>


Donc pour moi la class "term-description" doit associé automatique la balise <p> a mon texte.

Mais je ne trouve term-description dans mon style.css.

j'ai essayer d'ajouter a mon css
.term-description{font-size: 14px !important;}

mais cela n'a pas eu d'influence
Attyla a écrit :
Pour faire simple le code source est le suivant :
&lt;div class="term-description"&gt;&lt;div class="XXX"&gt;Mon texte?&lt;/p&gt;&lt;p&gt;Mon autre texte?&lt;/p&gt;&lt;/div&gt;

Es-tu sûr que c'est ce code précis qui apparaît ? Si c'est le cas, tu as un gros soucis, il n'y a pas le même nombre de balises ouvrantes que fermantes.
On ferme un </p> alors qu'il n'est pas ouvert, donc le navigateur peut comprendre de fermer un paragraphe ouvert plus haut, et ça peut pêter tout ton CSS.

Bon, sinon pour aller plus loin, tu vas sur ta page, clic droit sur le texte en question, inspecter élément, et tu dois voir apparaître sur la droite de la fenêtre d'inspection (tout) le CSS associé à ton élément, regarde dans cette liste, le sélecteur qui défini ta font-size...

... pour ainsi l'écraser (ton idée d'utiliser le sélecteur parent était une bonne idée, mais on évitera quand même le !important dans un CSS que l'on veut propre)
Modifié par SolidSnake (20 Nov 2015 - 08:00)
Effectivement j'ai mes 2 ?</div> qui ferment mes divs.

Le texte est défini par le .page-content p

Mais forcement quand je change la font size, tout le contenu des pages change.
Sujet clos
Aller à