Intégration CSS dans WordPress

Version imprimable

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:

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:

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

Salut

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

Code:

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>

17/09/2018, 09h40
Laisit

Intégration CSS

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
18/09/2018, 14h43
NoSmoking

Bonjour,

Citation:

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 :koi:

Fourni le code CSS et HTML correspondant.
18/09/2018, 19h10
Laisit

Intégration CSS

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.
18/09/2018, 19h52
ProgElecT

Salut

Citation:

Le code c’est celui donné dans mon premier message. Je n'ai rien mis de plus ni de moins !

Ben il y a un gros problème :koi:, car dans le code mis en 1er post, il n'y a pas de balises <header> </header> :?
18/09/2018, 20h34
Laisit

Intégration CSS dans WordPress

Bonsoir
Je ne comprends pas car dans WordPress quand je fais une page (J'ai toujours procédé comme ça, mais je peux me tromper) je ne mets pas les balises <header> </header> pas plus que <body> </body>
Le code que je mets vient s'intégrer automatiquement dans une page créée par le Thème que j'utilise ! Enfin il me semble ??
18/09/2018, 20h43
ProgElecT

Re

Lance ta page dans ton navigateur, sous FireFox tu peux faire Ctrl+U, cela t'affiche le code HTML de la page, c'est ce code qui permettra peut être de te dépanner.
19/09/2018, 15h09
Invité

Bonjour,

il ne faut pas confondre balises <header> et balises <head> !