Intégration CSS dans WordPress

**Laisit** · 17/09/2018, 08h10

Bonjour

J'ai développé un site sous WP mais lorsque je veux intégrer du CSS cela ne fonctionne pas.
J'ai placé dans l'éditeur

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.boite_1{background:#e0d7d7; text-align:justify; padding: 10px;	float:left;width:50%; margin-bottom:20px;border: medium solid orange;}
.boite_2{background:#e0d7d7; text-align:justify; padding: 10px; float:left; width:50%; border: medium solid orange; }
.boite_3{background:#e0d7d7; text-align:justify; padding: 10px; float:right; width:42%;height:200px; border: medium dashed black; }

dans la page le code html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div class="boite_1">
  <strong> COMMUNIQUE : </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</div>
    <div class="boite_3"><strong> COMMUNIQUE : </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </div>
  <strong>
    <div class="boite_2"><strong> COMMUNIQUE : </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
    </div>

Cela m’affiche les trois textes l'un sous l'autre alors que mon test sous CodePen me donne le résultat attendu c'est à dire deux textes l'un sous l'autre et un à droite.

Est-ce que quelqu'un à une idée de la provenance du problème ?
Merci de votre aide.
Cordialement

**ProgElecT** · 17/09/2018, 08h48

Salut

Ligne 6 du HTML, supprimes<strong> cela devrait le faire

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html> <!-- BaseModel.html -->
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Ici mon titre</title>
 
		<style>
                        .boite_1{background:#e0d7d7; text-align:justify; padding: 10px; float:left;width:50%; margin-bottom:20px;border: medium solid orange;}
                        .boite_2{background:#e0d7d7; text-align:justify; padding: 10px; float:left; width:50%; border: medium solid orange; }
                        .boite_3{background:#e0d7d7; text-align:justify; padding: 10px; float:right; width:42%;height:200px; border: medium dashed black; }
                </style>
 
	</head>
    <body>
		<!-- ~~~~~~~~~~~~~~~~~~ partie affichage ~~~~~~~~~~~~~~~~~~ -->
		<div class="boite_1">
			<strong> COMMUNIQUE : </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
		</div>
		<div class="boite_3"><strong> COMMUNIQUE : </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
		</div>
		<div class="boite_2"><strong> COMMUNIQUE : </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
		</div>
	</body>
</html>

**Laisit** · 17/09/2018, 09h40

Bonjour
Merci beaucoup pour la découverte du "bug" ! (Quel étourdi !)
Si j’intègre votre code dans ma page html cela marche, bien entendu, mais j'ai un décalage dû aux balises <header> </header> alors que si je pouvais intégrer mon code directement dans le dossier CSS de mon thème enfant je n'aurai pas ce problème.
Peut-être faut-il intégrer le code directement dans la feuille de style du thème ?
Cordialement

**NoSmoking** · 18/09/2018, 14h43

Bonjour,

Si j’intègre votre code dans ma page html cela marche, bien entendu, mais j'ai un décalage dû aux balises <header> </header>

là il faudrait donner plus de précision car

Fourni le code CSS et HTML correspondant.

**Laisit** · 18/09/2018, 19h10

Bonjour
Le code c’est celui donné dans mon premier message. Je n'ai rien mis de plus ni de moins !
Le CSS est dans la feuille de style CSS et le HTML est dans une page test de mon site.